Use Cascading Style Sheets Selectors

By Nicholas Chase
2004-06-18

The basic page and the universal selector

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.

Tutorial Pages:
» The basic page and the universal selector
» Type selectors
» Class selectors
» ID selectors
» Family relationships: descendants, children, and siblings
» Pseudo-classes and pseudo-elements
» Summary

First published by IBM developerWorks

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS

Advertise with Us!

Tutorials

Scripts

Web Hosting

Developer Manuals

Resources