HTML(5)

div

divide your page into logical sections or groupings.

div h2 {
color: black;
}

#elixirs h2 {
color: black;
}

span

<span> elements give you a way to logically separate inline content in the same way that <div>s allow you to create logical separation for block-level content.

<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>

.cd {
font-style: italic;
}
.artist {
font-weight: bold;
}

a element and its multiple personalities

Unlike other elements, the style of an <a> element changes depending on its state. If the link has never been clicked on, it has one style, and if it has been clicked on, another. And if you hover over a link, it can have yet another style.

cascade

you’ve got an <h1> element on a page and you want to know the font-size property for it. Here’s how you do it:
Gather all your stylesheets together.
For this step you need all the stylesheets: the stylesheets the web page author has written, any stylesheets that the reader has added to the mix,and the browser’s default styles. (Remember, you’re the browser now, so you have access to all this stuff !)
Find all the declarations that match.
We’re looking specifically for the font-size property, so look at all the declarations for font-size that have a selector that could possibly select the <h1> element. Go through all the stylesheets and pull out any rules that match <h1> and also have a font-size property.
Now take all your matches, and sort them.
Now that you’ve got all the matching rules together, sort them in the order of author, reader, browser. In other words, if you wrote them as the author of the page, then they are more important than if the reader wrote them. And, in turn, the reader’s styles are more important than the browser’s default styles.
Remember we mentioned that the reader could put !important on his CSS properties, and if he does that, those properties come first when you sort.
Now sort all the declarations by how specific they are.
Remember, we talked about this a little, way back in Chapter 7. You can intuitively think about a rule being more specific if it more accurately selects an element; for instance, the descendant selector “blockquote h1” is more specific than just the “h1” selector because it only selects <h1>s inside of <blockquote>s. But there is a little recipe you can follow to calculate exactly how specific a selector is, and we’ll do that on the next page.

Finally, sort any conflicting rules in the order they appear in their individual stylesheets.
Now you just need to take the list, and order any conflicting rules so that the ones appearing later (closer to the bottom) of their respective stylesheets are more important.That way, if you put a new rule in your stylesheet, it can override any rules before it.