Which Rule Wins?

When we added the grouped declaration for the headings, we changed some styles that we'd set previously. A look at the source shows that the level two heading, h2, has been set to be blue and white in different places in our style sheet:

Example 3.17. style1.css (excerpt)
 
h2 {
  color: blue;
  font-size: medium;
  font-weight: normal;
}
 
em {
  text-transform: uppercase;
}
 
h1, h2, h3 {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  background-color: navy;
  color: white;
}

Because the declaration specifying that the h2 should be white comes later, it has overridden the earlier one. It doesn't matter if you've defined an h2 to be blue 100 times through your style sheet; if the last definition says it should be white, then white it will be!

Note: Filenames for your Style Sheets

Although we've been working with style1.css for some time, you may be wondering why we named the file this way. The name is deliberate. You might want to add another style to your web site at a later date, and numbering is a basic way to keep track of the styles you can apply to a site.

You might be thinking, "Why not name it something like marine.css because it uses marine colors, references to under-sea animals, and so on?" That's a fair question, but the important thing to note about CSS is that you can always change the styles later, and your naming convention might, at a later date, bear no relevance to the styles a file contains. For example, you can edit marine.css such that all the colors in your web site are changed to ochres, browns, and sandy yellows. This ability to change the web site's design in one action is the whole point of CSS! With the new design, your web site might have an earthy/desert feel to it, yet you could still have 200 or more pages referring to a style sheet by the filename of marine.css. Something's not right there, is it? This is why I've chosen an abstract name for the CSS file, and I recommend that you do the same for the web sites you develop.

Recapping our Progress

Time for another breather. What have we learnt? Well, we've learned some more styles that you can apply in CSS, we've seen how you can style certain elements depending on their context, and more recently, we've discussed how you can group elements that need to be styled in the same way. There's one thing that we've touched on only briefly, yet it demands more attention because it's so fundamental to the way the Web functions. That topic is links.

Styling Links

Links are everywhere on the Web: they truly are the basis of everything you see online. Nowadays, we're used to seeing highly decorative web pages adorned by a wealth of different images and features. Take a step back in time, though, and you'll find that the World Wide Web was little more than a collection of linked documents. Go back to the earliest browsers and you'll find that those links were underlined, which remains the case today. By default, a browser uses the following color scheme for links:

    
• blue - an unvisited link
    
• purple - a link to a web page that you've previously visited
    
• red - an active link (one you're clicking on, but, for whatever reason, the next page hasn't quite appeared; we don't see this much in these days of widespread broadband usage, because pages load much faster than they used to!)

Share and Enjoy: