Example 3.19. style1.css (excerpt)
 
p {
  color: navy;
}

Note that, unlike the conflicting rules we encountered in the section called "Which Rule Wins?", this battle between style rules has no relation to the order in which they appear in the style sheet.

Specificity can get confusing, so don't lose too much sleep over it -- for now, it's enough just to be aware of the concept, as this may be the reason why one of your styles doesn't take effect when you're convinced it should. Specificity is covered in greater depth in the SitePoint book HTML Utopia: Designing Without Tables Using CSS [31], if you'd like to explore it further.

Styling Partial Text Using span

So, a class can be applied in many different places -- perhaps to a specific paragraph, or to a block of several paragraphs contained in a blockquote, or to a div that holds many different types of content. But what would you do if you wanted to apply the style to a very small section of text'maybe just a couple of words, or even just a couple of letters, within a paragraph? For this, once again, you can use the span element.

Earlier in this chapter I showed how you could use the span element in conjunction with inline styles to pick out and style specific words within a paragraph. The exact same technique can be used with classes: we simply place an opening <span> tag at the point at which we want the styling to begin, and the closing </span> tag at the point at which the styling should end. The advantage of this technique over the inline style demonstrated earlier is, of course, that with this technique, the style is defined in a single location, so you could potentially add the "fun" class to many different elements on many different pages with a minimum of hassle. When you decide that you want to have a different kind of fun (so to speak), you need only change your style sheet (style1.css) for that new style to be reflected across your site.

<p><span class="fun">Bubble Under</span> is a group of diving
    enthusiasts based in the south-west UK who meet up for diving  
    trips in the summer months when the weather is good and the  
    bacon rolls are flowing. We arrange weekends away as small  
    groups to cut the costs of accommodation and travel and to  
    ensure that everyone gets a trustworthy dive buddy.</p>

Try applying the span element to your "about" page as suggested in the above code. If you save the changes and check them in your browser (remember to hit Reload), your page should look like the one shown in Figure 3.16.

Share and Enjoy: