I feel a bit silly asking this as the answer is bound to be obvious. I set a h3 tag with a class on a WP template but for some reason the header tag is getting picked up as the default setting but the class is not and I can't understand why.
Html:
<h3 class="contact-heading">Get in Touch</h3>
CSS:
.contact-heading h3{color: #3C0; font: 2.0em Verdana, Geneva, sans-serif;font-weight:
normal;letter-spacing: 5px; text-transform:uppercase;}
Change css to:
h3.contact-heading { .... }
.contact-heading h3 means "apply these styles to all h3 elements inside an element with the class contact_heading"
h3.contact-heading means "apply these styles to all h3 elements which have the class contact_heading"
The selector .contact-heading h3 will select any <h3> element within an element that has the class .contact-heading.
If you change the selector to h3.contact-heading it will select the <h3> element that has the class .contact-heading.
Remember to NOT put a space bewtween h3 and .contact-heading, or you're changing the selector :)
Related
here I have HTML elements stacked like this,
.center-badge p {
font-size: 12px;
}
<div class="center-badge">
<div>
<p>Get a</p>
<p><strong>2% rate reduction</strong></p>
<p>with a</p>
<p>co-applicant</p>
</div>
</div>
and I have added the font size as 12px for the center-badge CSS. In this, we need to exclude the strong tag with p. Only the 12px styling has to apply all the p tags but a strong tag.
We have added a global styling for the p as 16px. How to exclude a particular element to not apply the parent CSS.
Is any way to solve this. can we can use the :not() for this scenario.
If an element has font-size: inherit or font-size: someUnitRelativeToTheParent — and it doesn't matter if that is set explicitly or by the browser stylesheet — then you can't make it not base the font-size on that of the parent element.
Likewise there is no way to write a selector with a condition "Unless the element's children include X" to avoid applying the font-size in that particular p in the first place.
You can either:
Explicitly style the strong element with a font-size that uses absolute units or
Change the DOM in such a way that you can exclude the p (e.g. by adding a class to it and adding :not(.that_class) to the stylesheet.
you have applied the global css like this I think.
p {
font-size: 16px;
}
but once you apply css using the parent class like this way
.center-badge p {
font-size: 12px;
}
it overrides your global css for <p> tag.
now <strong> has no browser default font size as <p> tag for the font-size property.
so you have to define it globally like this way
strong {
font-size: 16px;
}
or using parent class also you can apply the css like this way.
.center-badge strong {
font-size: 16px;
}
or you can apply it by giving the font-size: initial to the <strong> tag like this way.
.center-badge strong {
font-size: initial;
}
I have a div which contains the page's title. Is it possible to set all text to the h1 style without using tags?
For example:
<div id="title-div" style="h1">My Title</div>
Or maybe something like:
#title-div {
style: h1; //Imports all styles from h1
}
Is this kind of thing possible?
No.
Extensions to CSS such as SASS tend to have features like #mixin which can define a set of rules once and then apply them in different places but:
CSS itself has nothing like that
The styles have to be explicitly defined as a mixin
Find the css for your h1 tag and just add your div id (assuming you have control over that css and its not coming in from a 3rd party, in which case you will likely just have to copy it)
h1, #title-div {
// styles
}
You can use class or id to style your page's title.
CSS example for styling with "id":
#title-div {
//add your styling here
}
The other option is a "class", so in the "div" open tag, you should have "class" HML example:
<div class="title">
<h1>My Title</h1>
</div>
CSS example for class styling:
.title {
//add your styling here
}
Also, I think you should add in the div container h1 to understand and clear it.
You can use the default style of h1
-webkit-text-size-adjust: 100%;
line-height: 1.5;
color: #000!important;
box-sizing: inherit;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
font-size: 42px;
I am creating a custom CSS class and i am not sure how to write the code.
The element uses a h2 font size for its heading and a standard paragraph font size for everything else.
I would like to code a custom size for the h2 headings.
my custom class name is hosting-post-slider and my code starts as follows...
.hosting-post-slider {
}
I am not sure how to refer to the h2 heading in my CSS in the above so i can customize h2 just for this element.
if you have some styling in a class such as
.hosting-post-slider {
color: red;
}
Then to make a single h2 tag have this style, simply do this in you HTML:
<h2 class="hosting-post-slider">The heading</h2>
If you want all h2's to have this style, either add that class to all h2 elements, OR change your css to target all the h2s, such as:
.h2 {
color: red;
}
The code below will reference only this instance of the h2 element. Any style you add to it will only be applied to this element.
The complete code will look like this:
.hosting-post-slider h2 {
font-size: 30px;
}
<div className="hosting-post-slider">
<h2>My header</h2>
<p>My paragraph</p>
</div>
Is this what you are looking for, this selects all h2 elements with your custom class
h2.hosting-post-slider{
}
I have the following a HTML code:
<div>
<p> linux version</p>
<h1> new tool </h1>
And some CSS for it that should select <h1> but does not select anything.
*:not(div p) {
font-family: sans-serif;
}
The following does not work too:
*:not(div>p) {}
I have so many such <div> <p> in the HTML whereas the following selects and apply the font:
div p {
font-family: sans-serif;
}
As others have stated in the comments: the usage of the not selector is like this:
E:not(s) - an E element that does not match simple selector s
where
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
So if you want you code to work you'll have to add a class to the <p> elements which you don't want styled with that font-family.
*:not(.classname) {
font-family: sans-serif;
}
Alternatively: If you need to apply a font to all your elements - it is generally done by setting it in the body element, then the other elements in the document inherit that rule.
Then you can style your <p> elements within the div differently.
body
{
font-family: sans-serif;
}
div p
{
/* the special font-family that you need for paragraphs within a div */
}
<div>
<p> linux version</p>
<h1> new tool </h1>`
</div>
Now consider the following CSS code-
*:not(div p) {
font-family: sans-serif;
}
This code selects all elements except the <p> inside <div>. So a <div> is also selected by the selector *:not(div p) and hence all the contents of the <div> gets the style: font-family: sans-serif. So the text in the <p> element in the <div> also gets the style.
N.B. You should keep track so that two CSS declaration don't contradict each other. Then if such contradiction arises the declaration that applies some style wins over the declaration that forbids that style to be applied on that element.
Hence the following code will run fine
div>:not(p)
{
font-family: sans-serif;
}
This selector will select the elements inside a <div> except <p>-elements. So you may use this instead.
Well, it won't be exactly the same thing, but in this case you can use
div>*:not(p)
instead of
*:not(div>p)
Demo
It seems in your question, that given the markup:
<div>
<p>linux version</p>
<h1> new tool </h1>
</div>
<h1> elements are the special ones. So be specific. Rather than define styles for "all-but-me" (as you do with "*:not(div p)" clause) set and standard for "all-of-them" and then you overwrite the one you consider special. Just like here:
div {
font-family: serif;
}
div > h1 {
font-family: sans-serif;
}
I've tried this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
font-color: red;
font-weight: bold;
}
and this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
color: red;
font-weight: bold;
}
but I still end up with a gray font on my H3 text.
Why?
Either you have another color set for the id #ambrosia and that is taking precedence over the generic selector, or you have another tag inside the h3 which has a color assigned to it.
Or, in your html you have the #ambrosia applied to the h3 tag, but in your css, you have specified an h3 element which is inside an #ambrosia element. If you are wanting to use <h3 id="ambrosia">, your css should be
h3#ambrosia { color: red; }
You likely have other CSS that has a more specific selector that's giving your <h3> that font color, identifying that selector and/or posting your markup would help us provide a more specific selector that would override the font color.
You should use Chrome's "Inspect Element" option.
Right click on the line and choose Inspect Element and it will show you the path of the CSS evolution of your element.
the color: red; syntax is correct. however it is possible that you have some other styles in your css file that are conflicting.
you might try using the "firebug" firefox plugin. it will allow you to select the element and see exactly which style is applied to the element and if your class is being overridden