In this example, we apply that class of fun to the blockquote element, so everything contained in that element inherits the style of the parent container. This saves us from having to apply these different classes all over our pages (an affliction that has become known as class-itis -- a not-too-distant relation of div-itis, which we discussed in Chapter 2, Your First Web Pages).

Note: class vs id

So far, we've looked at both class selectors (which involve periods) and id selectors (which involve pound signs). Are you confused by them? It's true that these selectors are similar, but there is one important difference: a specific id can only be applied to one XHTML element. So, for example, on any web page, there can only be one element with an id of mainnavigation, and only one with an id of header. A class, on the other hand, can appear as many times as required.

Note: Limiting Classes to Specific Elements

Imagine you want to italicise any blockquote element that has a class attribute with the value fun, but not other elements with that class value. Think it sounds tricky? Not with CSS!

.fun {
  font-family: Georgia, Times, serif;
  color: #339999;
  letter-spacing: 0.05em;
}
 
blockquote.fun {
  font-style: italic;
}

Now, any text inside a pair of <blockquote class="fun"> and </blockquote> tags will appear in italics.

By prefixing our normal class selector with an element name, we're telling the browser to apply the following declarations to that element-and-class combination only. It's as simple as element.class, but make sure you don't leave any spaces!

Note: Specifically Speaking

Those with an eagle eye will have noticed that not all of the fun styles in the previous example are actually applied to the quotation. The font-family and letter-spacing declarations take effect, but the color change does not! The reason for this can be explained with the concept of specificity.

Specificity simply means the rule that is the most specific is the one that is applied. "Most specific" really means "most deeply-nested in the document's structure." In our markup, the p element appears inside the blockquote element, so any style applied to the p is deemed to be the more specific of the two and, therefore, will always win out. We have such a rule in our project site -- the one that states that all paragraphs should be navy-colored -- so this is the one that takes effect:

Share and Enjoy: