Use Cascading Style Sheets Selectors Harness the power of CSS

Use Cascading Style Sheets Selectors

By Nicholas Chase - 2004-01-28 Page: 1 2 3 4 5 6

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.

Figure 1. The basic page

Listing 1. The basic page


    
<html>
<head>
   <title>New Port Richey</title>

</head>
<body>
<h2 align="center">The New Port Richey Dog Show</h2>
<h4 align="center">Show Date: 7/31/2001</h4>
<h4 align="center">New Port Richey, FL</h4>

<p align="center">
   <span class="category">Best In Show:</span> 
   <span id="bestinshow">CH Sarah's Razzle Dazzle
   (Yorkshire Terrier)</span>
</p>

<p><a href="complete">Complete results</a></p>


<table align="center">
<tr>
   <td class="category">
       <a href="herding.html">Herding Group:</a>
   </td>
   <td>German Shepherd Dog</td>

   <td>CH Sabre Dawn</td>
</tr>
<tr>
   <td class="category">
      <a href="toy.html">Toy Group:</a>

   </td>
   <td>Yorkshire Terrier</td>
   <td>CH Sarah's Razzle Dazzle</td>
</tr>
<tr>

   <td class="category">
      <a href="sporting.html">Sporting Group:</a>
   </td>
   <td>Golden Retriever</td>
   <td>CH Chase's Golden Chance</td>

</tr>
<tr>
   <td class="category">
      <a href="nonsporting.html">Non-Sporting Group:</a>
   </td>
   <td>Tibetan Terrier</td>

   <td>CH Winston of Sunny Brook Lane</td>
</tr>
</table> 
</body>
</html>

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



    
<html>
<head>
   <title>New Port Richey</title>
   <style type="text/css">
      * { font-family: Verdana }
   </style>

</head>
<body>
<h2 align="center">The New Port Richey Dog Show</h2>
<h4 align="center">Show Date: 7/31/2001</h4>
...

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.)

Figure 2. The universal selector applies a style to all appropriate content.

View Use Cascading Style Sheets Selectors Discussion

Page: 1 2 3 4 5 6 Next Page: Type Selectors

First published by IBM developerWorks