CSS Tutorial

    Part ii - Properties

  • Ch4- Text Manipulation
  • Ch5- Fonts

    CSS Applications

  • Tabs
  • Multi-column Layouts
  • Dynamic Drop-down Menus
  • Slide Show
  • Borders
  • Webmail
  • Input Forms
  • File Viewer
  • Calendar

    FAQ

     

CSS Ch2- Selectors

2.1 Class and ID Selectors

Class and id selectors are the most widely supported selectors. The class attribute is more generic, meaning it may encompass many elements in a given document, even elements of different types or purposes. On the other hand, you can use the id attribute only once per document. The name id tells you that the id must be unique.

2.1.1 Class Selectors

A dot begins a class name selector in the style sheet. The class name is the name that you make up. The class name is typically only comprised of letters, numbers, or hyphens. Class names cannot include spaces. 
.planet{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 15px;
}
The following example shows the planet class name included in the HTML document using the class attribute. 
<div class="planet">
   <img src='images/jupiter.png' alt='Jupiter' />
</div>
The dot appearing before the class name in the CSS rule tells CSS that you are referencing a class selector. The dot does not appear in the class attribute value, because the value of the class attribute is just the class itself.

The class selectors apply to any type of element. In the following example, the planet selector also applies to the img element in addition to div element. 
<div class="planet">
   <img src='images/jupiter.png' alt='Jpiter' class='planet'>
</div>
You can create a style sheet rule that applies to only a type of element. You append a class selector with a type selector to limit the style sheet rule to a certain type of element. 
div.planet{
   position: absolute;
   top: 0;
   left:0;
   bottom: 15px;
}
Elements can also be assigned more than one class name. Each class name must be separated by a single space. 
<div class='planet jupiter'>
     <img src='images/jupiter.png' alt='Jupiter' class='planet'/>
</div>
Class names can be chained to one another to reference an element that has multiple class name values. 
div.planet.jupiter {
   left: 0;
}
The preceding rule applies only to elements that reference both class names in their class attributes.

IE 6 interprets chained class names per the CSS 1 specification, which did not allow chained class names in the style sheet. In IE 6, only the last class name in the chain is recognized. In the preceding example, IE 6 would interpret the .planet.jupiter selector as .jupiter only. This has been fixed in IE 7.

2.1.2 ID Selectors

id selectors are unique identifiers; an id is meant to be unique, defined once per document. Like class selectors discussed in previous section, a special character precedes id selectors in a style sheet. To reference an id, you precede the id name with a hash mark (or pound sign, #). Like class names, this name cannot contain spaces. You should use name that only include letters, and numbers for compatibility with the older browsers. 
#jupiter {
  left: 0;
}
The element can then be defined in the document using the id attribute. This is demonstrated in the following example: 
<div id='jupiter'>
   <img src='images/jupiter.pgn' alt='Jupiter' class='planet' />
</div>
Like class selectors, an id selector can be prepended with a type selector to make the selector apply only to a certain type of element. 
div#jupiter {
   left: 0;
}
You may wonder why this is useful for an id selector, since an id element has to be unique in a document. Appending the selector with the type of element is useful in situations where one style sheet applies to more than one HTML document, where it's possible that you have a unique id in one of those documents that applies to for instance, an <img /> element.

    References

    (1) CSS - Cascading Style Sheets for Web Design, 2nd Edition, (beginning).

KHMERCyber.com ©2008