Harness the power of CSS
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, as shown in Figure 1 and Listing 1.Listing 1. The basic page
To start with, create the
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):
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.)