Developer Forums | About Us | Site Map
Search  
HOME > TUTORIALS > CLIENT SIDE CODING > CSS TUTORIALS > USE CASCADING STYLE SHEETS SELECTORS


Sponsors





Useful Lists

Web Host
site hosted by netplex

Online Manuals

Use Cascading Style Sheets Selectors
By Nicholas Chase - 2004-01-28 Page:  1 2 3 4 5 6

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

    
...
   <style type="text/css">
      * { font-family: Verdana }
      td { font-size: 10pt }
   </style>
...

This style applies to any text within a table data element, no matter where it is in the hierarchy of the page.

Figure 3. Using a type selector
Type selectors

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

    
   <style type="text/css">

      * { font-family: Verdana }
      td { font-size: 10pt }
      .category { font-weight: bold; }
   </style>
...

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

    
...
   <style type="text/css">

      * { font-family: Verdana }
      td { font-size: 10pt }
      .category { font-weight: bold; }
      td.category { font-style: italic }
   </style>
...

Because the text "Best In Show" is outside a table data element, the new rule doesn't apply, as shown in Figure 4.

Figure 4. Using class selectors
class selectors



View Use Cascading Style Sheets Selectors Discussion

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

First published by IBM developerWorks


Copyright 2004-2017 GrindingGears.com. All rights reserved.
Article copyright and all rights retained by the author.