With Cascading Style Sheets (CSS), page authors can control the appearance of content with more precision. CSS rules consist of a selector that determines the content to which the rule applies, and the properties and values that are set. While most developers are accustomed to using selectors that are based on tag names, CSS actually provides several different options that enable even greater control. This article discusses each type of selector and shows you how to use it.
Note: This article shows the use of CSS selectors in browsers such as Microsoft Internet Explorer 6.0 and Netscape 7, but basic selectors are available as far back as Netscape Navigator 4.x and Internet Explorer 4.x. A basic understanding of Cascading Style Sheets is helpful.
The basic page and the universal selector
To demonstrate the use of different CSS selectors, I use in this article the results of a dog show. I've specifically constructed the page to provide the different examples needed, but otherwise it's a perfectly normal page
Listing 1. The basic page
The New Port Richey Dog Show
Show Date: 7/31/2001
New Port Richey, FL
Best In Show:
CH Sarah's Razzle Dazzle
(Yorkshire Terrier)
Herding Group: | German Shepherd Dog | CH Sabre Dawn |
Toy Group: | Yorkshire Terrier | CH Sarah's Razzle Dazzle |
Sporting Group: | Golden Retriever | CH Chase's Golden Chance |
Non-Sporting Group: | Tibetan Terrier | CH Winston of Sunny Brook Lane |
To start with, create the style element into which the various CSS rules will be placed. The simplest possible style sheet is one that applies a particular rule to all content within the page. Creating such a rule involves creating a style element and a rule using the universal selector, * (See Listing 2):
Listing 2. The universal selector
The New Port Richey Dog Show
Show Date: 7/31/2001
...
While this selector doesn't work in Netscape 4.x browsers, in other cases it applies the style to all appropriate content. The example in Listing 2 applies a font change, as shown in Figure 2. (Some style properties, of course, don't make sense for certain elements. You wouldn't set a font change on a graphic, for example.)
Type Selectors
Perhaps the most commonly used selector is the type selector, though most people think of it as a tag name or element selector. This selector chooses content based on the name of the element. For example, the following code in Listing 3 changes the size of any text within a table data (td) element, as shown in Figure 3:
Listing 3. Type selectors
...
...
This style applies to any text within a table data element, no matter where it is in the hierarchy of the page.
Class selectors
After type selectors, the most commonly used selectors are class selectors. A class selector selects all elements that have a class attribute with a particular value. Preceding the name of the class with a period (.) signals to the browser that this is a class selector. For example, the following code in Listing 4 bolds any text that is in the category class:
Listing 4. Using a class selector
...
Classes are an excellent way to increase the maintainability of Web pages, because wholesale changes can be made to the look and feel of a site with just a change to the stylesheet. Classes make it possible to discriminate based on logical or business criteria, rather than simply by an accident of layout. For example, you might create a class that allows you to set all person names to a particular style.
In some cases, you might find it useful to further restrict a class-based rule based on the element to which the class is attached. You can accomplish this task by appending the class name to the element name. For example, category names within a table data cell can be set to italics as shown in Listing 5.
Listing 5. Restricting a class based on element
...
...
ID Selectors
Another specialty selector is the ID selector. Like the class, an ID selector is based on the value of an attribute, but in this case, it's the ID attribute. This selector is used to single out a particular element; IDs should be unique within a document. For example the following code in Listing 6 selects the span designated as bestinshow by preceding the name with a pound sign (#) and colors it red, Listing 6. Using the ID selector
...
...
