I'm new to CSS and want to learn how to make webpages. While learning on Codecademy there was a lesson for classes and Ids which got me confused.
How should the classes be setup and does it make a difference if it's like this
.content h1 {
}
or
h1 .content {
}
Firstly, the spaces in between the CSS selectors .content and h1 matter, meaning, if you are trying to make a CSS rule specifically for h1 elements with a class of content, then the rule needs to be formatted as h1.content.
Secondly, a CSS rule with a space in between selectors (e.g. div .bold) is a combinator known as a descendant selector, and in the example div .bold { font-weight: bold; }, it would mean that any elements with class bold descending from any div element would have a bold font weight style applied.
element.classname mean you are targeting the tag having a class as classname.
element .classname or .classname element mean you are targeting the html element having class classname which is a child/descendent of tag.
Related
What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes.
In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general.
For example, here's a snippet of HTML:
<h2>This should be black</h2>
<div class="all_red_text">
<h2>This should be red</h2>
</div>
Now if I include some CSS like this:
.all_red_text { color: red; }
I will get the result I expect. On the other hand, if I the css which I included was
h2 { color: black; }
.all_red_text { color: red; }
then all the text will be black. In the first case there is some default browser CSS which is able to be overridden by the inherited property, but then when the same property is manually specified in the second example it takes precedence over the inherited property.
Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.
CSS is applied to elements in this form:
Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles
So, using your HTML structure & CSS:
h2 { color: black; }
.all_red_text { color: red; }
<h2>This should be black (and is black)</h2>
<div class="all_red_text">
(This text is indeed red.)
<h2>This should be red (actually, its parent is red - this text is black)</h2>
</div>
The .all_red_text CSS is telling the div.all_red_text element and everything inside it to have red text. The h2 CSS is telling the h2 elements directly to have black text. When the h2 is rendered, it sees "my parent element wants me to have red text, but I'm directly being told to have black text". The same idea applies to further up parents, including the HTML and browser defaults - this allows you to, for example, set the font-family on the html element and have it apply to everything on your (well formatted) web page, unless something specifically overrides it.
If you want the h2 inside div.all_ted_text to also have red text, you'd need to tell those h2 elements directly to have red text; something like this:
.all_red_text h2 { color: red; }
CSS-Tricks has a pretty nice guide on this, although they don't currently go too deep into inherited properties.
There is no such thing as specificity of inherited CSS properties. Selectors, not properties, have specificity.
In your example, both h2 elements match only one of the rules, h2 { color: black; }. Thus, the color of h2 is black (assuming there are no other style sheets that affect the rendering). Anything set on some other elements (including the parent of the second h2 element) does not affect this the least.
If the rule h2 { color: black; } is absent and there are no other rules affecting the situation, then there is no color set on either of the h2 elements. According to the definition of the color property, the value is then inherited from the parent.
Two or more selectors gets engaged into Specificity War, if and only if
they end up targetting the exact same element. However, If two selectors (targetting the same element) have equal specificity weight, then there are other factors like you said, inheritance or the styles getting over ridden in the css file.
What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes.
In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general.
For example, here's a snippet of HTML:
<h2>This should be black</h2>
<div class="all_red_text">
<h2>This should be red</h2>
</div>
Now if I include some CSS like this:
.all_red_text { color: red; }
I will get the result I expect. On the other hand, if I the css which I included was
h2 { color: black; }
.all_red_text { color: red; }
then all the text will be black. In the first case there is some default browser CSS which is able to be overridden by the inherited property, but then when the same property is manually specified in the second example it takes precedence over the inherited property.
Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.
CSS is applied to elements in this form:
Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles
So, using your HTML structure & CSS:
h2 { color: black; }
.all_red_text { color: red; }
<h2>This should be black (and is black)</h2>
<div class="all_red_text">
(This text is indeed red.)
<h2>This should be red (actually, its parent is red - this text is black)</h2>
</div>
The .all_red_text CSS is telling the div.all_red_text element and everything inside it to have red text. The h2 CSS is telling the h2 elements directly to have black text. When the h2 is rendered, it sees "my parent element wants me to have red text, but I'm directly being told to have black text". The same idea applies to further up parents, including the HTML and browser defaults - this allows you to, for example, set the font-family on the html element and have it apply to everything on your (well formatted) web page, unless something specifically overrides it.
If you want the h2 inside div.all_ted_text to also have red text, you'd need to tell those h2 elements directly to have red text; something like this:
.all_red_text h2 { color: red; }
CSS-Tricks has a pretty nice guide on this, although they don't currently go too deep into inherited properties.
There is no such thing as specificity of inherited CSS properties. Selectors, not properties, have specificity.
In your example, both h2 elements match only one of the rules, h2 { color: black; }. Thus, the color of h2 is black (assuming there are no other style sheets that affect the rendering). Anything set on some other elements (including the parent of the second h2 element) does not affect this the least.
If the rule h2 { color: black; } is absent and there are no other rules affecting the situation, then there is no color set on either of the h2 elements. According to the definition of the color property, the value is then inherited from the parent.
Two or more selectors gets engaged into Specificity War, if and only if
they end up targetting the exact same element. However, If two selectors (targetting the same element) have equal specificity weight, then there are other factors like you said, inheritance or the styles getting over ridden in the css file.
I apply styles to the <html> element and to the <body> element. Is it possible to have the styles on the <html> element apply over the <body's styles?
Applying CSS to <html> doesn't seem to follow the usual rules of CSS specificity. Is this true?
Example: http://jsfiddle.net/59dpy/
Try to make all background colors red.
If you want all of the background red, why add a yellow background to the body? In any case, you just need something more specific.
.test2 { background: red; }
is all you would really need.
Calculating Specificity
The actual specificity of a group of nested selectors takes some calculating. Basically, you give every ID selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. Then you add them all up and hey presto, you have the specificity value.
p has a specificity of 1 (1 HTML selector)
div p has a specificity of 2 (2 HTML selectors, 1+1)
.tree has a specificity of 10 (1 class selector)
div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
#baobab has a specificity of 100 (1 id selector)
body #content .alternative p has a specificity of 112 (HTML selector + id selector + class
selector + HTML selector, 1+100+10+1)
So if all of these examples were used, div p.tree (with a specificity of 12) would win out
over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.
Specificity - CSS | MDN
I apply styles to the <html> element and to the <body> element. Is it possible to have the styles on the <html> element apply over the <body>'s styles?
Apply over the body's styles? Not really. In your question, you appear to be confused about CSS's specificity: this defines how different styles compete over the same element when they clash, with the more specific and last defined style winning out.
If html tries to set the background to blue, and html.test tries to set the background to red, the background will be red as that's more specific.
This doesn't apply to child elements
It does not mean those rules then override the childrens' styles. You seem to think that because html.test is more specific a selector than body, the html.test style should also override the body style. That's not the case!
Cascading style sheets don't work that way. Styles only cascade down wherever inheritance applies until a child element overrides that style. The child's style will always win out over its parent's style, and then that will cascade down to its child elements if it's an inherited style (until, again, one of those children overrides it).
Specificity says that out of any competing styles, the most specific one that could apply to the html element wins out. In your provided jsFiddle, there aren't any competing styles, and the html element is now red.
That's it; specificity has no more role to play here. Your body element is then given a background color of yellow. Background colors are not inherited by default, but even if they were, body would not ever inherit its parent's background because you assigned one to it specifically.
You need to apply your styles to the body specifically
In this scenario, you need to either make the body just inherit the html element's style:
body { background-color: inherit; }
Or not give the body a style in the first place.
Or you need to set a specific rule for when the html element has the test class applied:
html.test {
background-color: red;
}
body {
background-color: yellow;
}
html.test > body {
/* Don't have a background color when the HTML should have one
so that the HTML's background can show through. */
background-color: transparent;
}
Hello I'm having some issues with CSS on my blog. My Wordpress theme has a post styles section in the CSS file which have a class "Entry" in which "a" attribute is defined for the links inside the article area.
I generated a button from css generator and inserted the button in an article that is pointing to some other website using href. My CSS file has something like this,
.Entry a{color:black;text-decoration:underline};
.button {background:black;color:white And some other Styling};
I used this code to display the button.
Go to this link
Without the use of class="button", the link follow the Entry a property. But when I use class with it, it display the button with the mixture of Entry a and class button styles. I don't want the button to use Entry a properties. Any help?
You could rewrite the first rule using the CSS3 :not pseudo-class selector as
.Entry a:not(.button) {color:black;text-decoration:underline}
This will do what you need, but it's not supported by IE versions earlier than 9.
A true cross-browser solution is more involved: you would need to "undo" the attributes that .Entry a applies in your .button rule. For example:
.Entry a {color:black;text-decoration:underline}
.button {color:white;text-decoration:none;background:black}
Update: I forgot something quite important.
If you do go the "undo" route you will need to make sure that the "undoing" selector has specificity at least equal to that of the first selector. I recommend reading the linked page (it's not long) to get to grips with the concept; in this specific case to achieve this you have to write a.button instead of simply .button.
For avoid .Entry a CSS styles to be applied at when you use the selector .button you should overwritte with the selector .button all the properties defined in .Entry a
For example:
.Entry a{color:black;text-decoration:underline};
.button {color:white;text-decoration:none;background:black;color:white And some other Styling};
This happens because .Entry a has a higher specificity than .button. The result is that your element receives its actual background property from .button but its color and text-decoration properties come from .Entry a.
There are a few ways to "fix" this:
Increase the specificity of the .button selector.For example, if you only use .button on a tags, you could change the selector to a.button. This new selector would have the same specificity as .Entry a (one tag value and one class value), so the "winner" is decided by the source order. If a.button comes after .Entry a in the CSS file, a.button takes the upperhand.
Decrease the specificity of the .Entry a selector.Do you really need to target only a tags inside .Entry elements? Can you get away with simply making it a base style for all a tags? If you can, you can simply change .Entry a to a. This new selector has only one tag value, which is less specific than the one class value in .button.
Define extra selectors on .button.For example, you could use .button, a.button so that the second selector takes over where the first selector fails. Be warned that this could get very messy when you encounter this same problem with other tags such as input or button tags.
Use !important.Never do this, as you'll get yourself in trouble if you ever try to make a .big-button class which needs to override some .button styles.
If you want to learn more about specificity, here's a good article about what it is and how it's calculated.
Well in CSS3 you could do this:
.Entry a:not(.button)
That will restrict your .Entry a rule from affecting any elements with .button.
If CSS3 is not an option (i.e. you need to support IE <= 8) you'll need to overwrite whichever inadvertent styles are being inherited. So for example if your button is ending up with an unwanted border from .Entry a, overwrite this in your .button rule, e.g.
.button { border: none; /* more button styles */ }
You could overwrite any styles in .button class that are defined in .Entry a
E.g. if you dont want your text to be underlined you could use text-decoration: none
.Entry a{
color: black;
text-decoration: underline;
}
a.button {
background: black;
color: white;
text-decoration: none;
/*And some other Styling*/
}
Also don't use semicolons after braces }; in your css. simply use a brace to close }
The simplest thing would be to "undo" the specific styles that your element inherits from the styles for .Entry a. For example, to undo the text-decoration style, you could use text-decoration:none.
If you only need it to work for newer browsers, then you could use the not() selector #Jon has mentioned.
In the linked code for the blueprint CSS framework, there is a style defined for a div.class selector and just the .class selector. Isn't this redundant? Or is there a more subtle reason for defining the class with two selectors?
https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/src/grid.css (lines 229-235)
/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
margin-top:1.5em;
}
div.append-bottom, .append-bottom {
margin-bottom:1.5em;
}
Interesting question. I've not used Blueprint, but then if you choose to override either div.prepend-top or .prepend-top, only that selector's styles will be overridden.
That means doing this:
.prepend-top { margin-top: 1em; }
Will leave the styles for <div>s with that class unaffected (still a 1.5-em top margin), because div.prepend-top is a more specific selector and so will take precedence for <div> elements.
And doing this:
div.prepend-top { margin-top: 1em; }
Will leave the styles for other elements with that class unaffected, because of the div type selector. Likewise for the append-bottom class.
Again I've not used Blueprint, but I think it has something to do with how it expects your HTML to be structured.