Before we move on let’s review the question posed in the last section of the last post. I gave a small snippet of HTML and several CSS delclerations. Were you able to reason how this would be rendered in the browser? Its not pretty, and ends up looking like this. Okay, but why? I’ve intentionally made the CSS here a little gross in order to demonstrate a few of the properties of stylesheets.
We initially define the p element to have text centered and blue. However looking at the rendered output, the text is aligned right. Why do you suppose that is? Well further down our stylesheet we have another CSS decleration on the p element, saying to align text right, and this declaration is what is applied. The reason for this is due to cascading and inheritance in CSS. If there are two declerations of the same element, the one that comes last will take presedence. So as the browser is parsing this CSS document it will first see the blue and centered rules for the p element, and applie them. As it continues down the document it then sees an align right rule also added to the p element, and so happily applies the right alignment. Thus overriding the initial text-align: center. Another example of inheritance is the strong element. The browser by defulat will render a strong with bold text. In our strong declaration in the CSS we apply a color to this as well. So now strong will render as a certain color, as well as the inherited bold from the browser.
But wait, why is strong rendered yellow and not red? The declerations are not the same, so this can’t be cascading, so what gives? This is an example of specificity. The strong in our example occurs within the p element, so we can specifically target that occurance with the p strong selector. If there where instances of strong in the html that were not wrapped in the p element, they would be rendered red, as you would expect. Give it a try and see! Specificity will also inherit from most to least specific. An example of this is the first p element with the class wowza. The text is blue (inherited from the first css declaration of p), aligned right (inherited from the overridden text alignment in the second css decleration of p), an finally is underlined (from the more specific decleration of p.wowza.)
I know the descriptions of these behaviors sound a little complex. They really are not, their behaviour is pretty intuative once you play with them for a bit (and I encourage you to do so.) However, be warned! Although the rules for these behaviours are fairly simple, they can lead to some very complex situations. Take care to keep your stylesheets organized and as "clean" as possible to avoid falling into a pit of eternal dispair as you hunt for what decleration is overriding the one you just created. For example there is rarely a reason to have two p declerations in your CSS as I do in my last example. It only serves to confuse. Instead they should be combined into one,
p {
color: blue;
text-align: right;
}This way when you need to modify p in the future, there is only one place to look for it to make changes. If you are curious or would like a more thorough explination of these behaviors the mozilla tutorial does a good job.