You’ve already learned the technical aspects of naming different types of selectors—class selectors begin with a. (period) to identify the styles as a class, and ID styles begin with the # symbol. In addition, the names you give IDs and classes must begin with a letter and can’t contain symbols like &, *, or !. But beyond those requirements, following some rules of thumb can help you keep track of your styles and work more efficiently:

Often, two or more items on a web page share many similar formatting properties. You may want to use the same border styles to create a frame around a bunch of images on a page. But there may be some formatting differences between those items as well. Maybe you want some images to float to the left and have a right margin, while some photos float to the right and have a left margin (Figure 15-2).

The most obvious solution is to create two class styles, each having the same border properties but different float and margin properties. You then apply one class to the images that should float left and another to the images that should float right. But what if you need to update the border style for all of these images? You’ll need to edit two styles, and if you forget one, the images on one side of the page will all have the wrong frames!

Figure 15-2. Top: The page as originally formatted. Bottom: In this case, both photos have the same style applied to them, thus creating the border effect. The left image, in addition, has another class style applied, causing it to float left; the right image also has a second class applied to it floating that photo to the right.

There’s a trick that works in all browsers that not all designers take advantage of—multiple classes applied to the same tag. This just means that when you use the class attribute for a tag, you add two (or more) class names like this: <div class="note alert">. In this example, the <div> tag receives formatting instructions from both the .note style and the .alert style.

Say you want to use the same border style for a group of images, but some of the images you want floating left and others you want floating right. You’d approach the problem like this:

This technique is useful when you need to tweak only a couple of properties of one element, while leaving other similarly formatted items unchanged. You may want a generic sidebar design that floats a sidebar to the right, adds creative background images, and includes carefully styled typography. You can use this style throughout your site, but the width of that sidebar varies in several instances. Perhaps it’s 300 pixels wide on some pages and 200 pixels wide on others. In this case, create a single class style (like .sidebar) with the basic sidebar formatting and separate classes for defining just the width of the sidebar—for example, .w300 and .w200. Then apply two classes to each sidebar: <div class="sidebar w300">.

Adding one style after another is a common way to build a style sheet. But after a while, what was once a simple collection of five styles has ballooned into a massive 150-style CSS file. At that point, quickly finding the one style you need to change is like looking for a needle in a haystack. (Of course, haystacks don’t have a Find command, but you get the point.) If you organize your styles from the get-go, you’ll make your life a lot easier in the long run. There are no hard and fast rules for how to group styles together, but here are two common methods:

/* *** Layout *** */

/* --------------------------
            Layout
--------------------------- */

As you read in Chapter 14, you can create different style sheets for different types of displays—maybe one for a screen and another for a printer. But you may also want to have multiple onscreen style sheets, purely for organizational purposes. This takes the basic concept from the previous section—grouping related styles—one step further. When a style sheet becomes so big that it’s difficult to find and edit styles, it may be time to create separate style sheets that each serve an individual function. You can put styles used to format forms in one style sheet, styles used for layout in another, styles that determine the color of things in a third, another style sheet for keeping your Internet Explorer hacks, and so on. Keep the number of separate files reasonable since having, say, 30 external CSS files to weed through may not save time at all.

At first glance, it may seem like you’ll end up with more code in each web page, since you’ll have that many more external style sheets to link to or import—one line of code for each file. Ah, but there’s a better approach: Create a single external style sheet that uses the @import directive to include multiple style sheets. Figure 15-3 illustrates the concept.

Figure 15-3. Let a single external style sheet serve as gatekeeper for your site’s CSS. Each HTML page in the site can link to a single CSS file (base.css in this example). The HTML never has to change, even if you want to add or remove additional external style sheets. Just update the base.css file by adding or removing @import directives.

Here’s how to set up this type of arrangement:

It may feel like there’s a whole lot of loading going on here, but once the browser has downloaded those files and stored them in its cache, it won’t have to retrieve them over the Internet again. (See the box on the next page.)

There’s another benefit to using a single external style sheet to load several other style sheets: If you decide later to further divide your styles into additional styles sheets, then you won’t have to muck around with the HTML of your site. Instead, just add one more @import directive to that gatekeeper style sheet (see step 2). If you decide to take all the styles related to type out of the main.css file and put them in their own type.css file, then you won’t need to touch the web pages on your site. Simply open the style sheet with all of the @import directives in it and add one more: @import url(type.css).

This arrangement also lets you have some fun with your site by swapping in different style sheets for temporary design changes. Say you decide to change the color of your site for the day, month, or season. If you’ve already put the main color-defining styles into a separate color.css file, then you can create another file (like summer_fun.css) with a different set of colors. Then, in the gatekeeper file, change the @import directive for the color.css file to load the new color style file (for example, @import url(summer_fun.css)).

<link rel="stylesheet" type="text/css" href="main.css">

<link rel="stylesheet" type="text/css" href="main.css?v=1">

<link rel="stylesheet" type="text/css" href="main.css?v=2">

One of your biggest allies in using descendent selectors effectively is the <div> tag. Since this HTML tag lets you create logical divisions in a page, you can use it to identify different layout elements like a banner, a sidebar, a column of text, and so on. As discussed on The Mighty <div> Tag, you can organize the content of your page into different areas by wrapping HTML in a <div> tag.

Group the title of a story and a list of links used to navigate the story’s pages like this:

<div>
  <h2>The CosmoFarmer Revolution</h2>
  <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
  </ul>
</div>

After adding the <div>, identify it for CSS purposes with either a class or ID attribute: <div class="pullQuote"> or <div id="banner">. When you want to include the same type of layout element more than once on a page—multiple pull quotes in a single story perhaps—use a class. For regions that appear only once per page—like the banner—an ID is the common choice.

Suppose the list of links in the HTML above appears twice on a page—at the beginning of the text and at the end. You’d apply a class to it like this:

<div class="storyNav">
  <h2>The CosmoFarmer Revolution</h2>
  <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
  </ul>
</div>

Once you identify each <div> on a page, it becomes very easy to use a descendent selector to target tags inside a particular <div>. Say you want to create a unique look for each of the links in the above HTML. You’d create a descendent selector like this:

.storyNav a {
  color: red;
  background-color: #ccc;
}

Now links will appear as red text on a light gray background, but only when they appear inside another tag with the storyNav class applied to it. Best of all, if you want to add another link (like page4.html) to this list, then you don’t have to lift a finger to format it like the other links. The browser handles all of that automatically when it applies the descendent selector.

Formatting other tags inside that <div> is a simple matter of creating a descendent selector that begins with the class name—.storyNav, for instance—followed by a space and the tag you want to style. To format the <h2> that appears inside the <div>, create the descendent selector .storyNav h2.

Because descendent selectors provide such specific targeting of styles, you can easily create styles that not only apply to one particular area of a page, but also apply only to particular types of pages on your site. Say you want to style the <h1> tag differently on the home page than on other pages of the site. An easy way to distinguish <h1> tags on the home page is to add a class or ID to the <body> tag of the home page:

<body id="home">

or

<body class="home">

You can style the <h1> tag on the home page using a descendent selector: #home h1 (if you’re using an ID) or .home h1 (if you’re using a class). With this technique, you can create entirely different looks for any tag on any particular page of your site. One approach is to identify the section of the site each page is in. Say your site is divided into four sections—news, events, articles, and links. On each page within a section, add either a class or ID to the <body> tag. So each page in the news section might have the following HTML: <body class="news">, while pages in the events section would have <body class="events">.

One great use for identifying a page’s section in the site is to highlight that section’s button in a navigation bar. The highlighted button acts as a kind of “you are here” marker, as shown in Figure 15-7 If a page is in the news section of your site, you can highlight the “news” button so visitors can tell immediately which section they’re in.

Here’s how to format a navigation button differently depending on which section of your site it’s in:

Using the same technique, make additional styles to apply different looks for the links when you hover over them, click them, or when they’ve been visited. See Highlighting Different Links for the details.

These few examples are just some of the ways you can take advantage of descendent selectors. They can make your style sheets a little more complex. You’ll have styles like #home .navbar a, for example, instead of a simple class like .navLink. But once the styles are set up, you’ll need to do very little further formatting. HTML pasted into different areas of the page automatically gets formatted in strikingly different ways. Almost like magic.

Because Internet Explorer 6 and 7 are still very common, many web designers use one of those browsers for testing their site design. When they find a problem with the way the page looks in this browser, they manipulate their CSS until the page looks fine. Unfortunately, because IE 6 and 7 don’t always get CSS right, the “solutions” designers use for that browser cause more modern, CSS-savvy browsers like IE 8, Firefox, and Safari to display pages incorrectly.

The backward-looking approach of designing for Internet Explorer 6 or 7 would be fine if everyone visits your site on Windows with Internet Explorer 6 or 7 for the rest of eternity. But as more people upgrade to Internet Explorer 8 or switch to state-of-the-art browsers like Firefox or Safari, your fine-tuned IE 6 pages will begin to break. A better approach is to design with Internet Explorer 8, Firefox, Safari, or Chrome in mind. Make sure your CSS works in those browsers, and you can be reasonably confident that you’re using CSS correctly. Then, after your site looks great in those browsers, it’s time to fix the problems that crop up in Internet Explorer 7 and 6.

Tackling all those problems may sound like an overwhelming task, but take heart. You’ll repeatedly encounter the same set of bugs, which in turn require the same set of fixes. So once you become an old hand at identifying and fixing the peek-a-boo bug or the double-margin bug, it won’t be hard for you to add the necessary hacks to fix your pages for older versions of Internet Explorer.

The * html hack in Chapter 7 (Wrap Content with Floating Elements) is one way to send the “this’ll fix your stupid bug” styles to just Internet Explorer 6 and earlier without adversely affecting other browsers. But as your style sheets get larger, all those little fixes start to create clutter. Even if you isolate those changes into one part of your style sheet, you may still end up inserting some invalid CSS code (like zoom: 1) that prevents your main CSS file from validating.

Another way to collect IE-only styles in a single place is to use Internet Explorer’s conditional comments feature (Figure 15-8). This Microsoft invention provides a way of inserting HTML that only Internet Explorer understands. Other browsers simply see the code as an HTML comment and ignore it.

Conditional comments can even target different versions of IE. You can put all of your IE 6–only styles in a single external style sheet (like IE6_styles.css) and use a conditional comment to link it to IE 6 browsers only. This approach also makes it a snap to eliminate those styles when IE 6 finally goes the way of the dinosaurs. Just remove the external style sheet. Your non-IE visitors will benefit too. When you use conditional comments, other browsers don’t download those external style sheets at all. As a result, your site opens and runs faster for these lucky folks.

Figure 15-8. With Internet Explorer’s conditional comments feature, you can apply IE-specific style sheets full of your IE hacks. Conditional comments let you have some HTML appear only in a particular version of Internet Explorer (left). Other browsers simply ignore the HTML inside the comment (right).

Here’s the basic structure of a conditional comment:

<!--[if IE]>
Some HTML code that only applies to IE goes here.
<![endif]-->

The <!--[if IE]> is the condition itself. It translates to: “If this browser is Internet Explorer, then process the following HTML.” So any Internet Explorer browser acts on the HTML that comes after this line of code and stops when it gets to the <![endif]--> statement. In this way, you can add any HTML—text, images, styles, and even links to external style sheets—to Internet Explorer only.

<!--[if lte IE 6]>
<link href="IE_styles.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
@import url(IE_styles.css)
</style>
<![endif]-->

<link href="global_styles.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link href="IE7_styles.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<link href="IE6_styles.css" rel="stylesheet" type="text/css" />
<![endif]-->