CSS Basics

• Selectors

  A full explanation of CSS selectors is outside the scope of this course, but we will briefly mention a few common selectors. Admittedly, these are incomplete explanations.

  • tagName

    Any markup element can be selected for styling by its tagName. This is the simplest of selectors and should be used whenever possible for general styles that apply to all elements of the same type.

    h1 { /* h1 heading element */ }

p em { /* selects an em element contained in a paragraph */ }
  • className

    A className selector begins with a period (.) and is more specific than a tagName selector. These should be used to differentiate between multiple types of data that use the same tagName.

    .nav { /* any element with a class of nav */ }

div.header { /* selects a div element with a class of header */ }
  • id

    An id selector begins with a hash mark (#) and is even more specific than a className selector. Because the id of a markup element must be unique, these should refer to singular elements that need to be noted differently. Use id sparingly and try to control your document with more general styles.

    #links { /* any element with an id of links */ }

#foot address.corp { /* selects an address element with a class of corp that is contained in an element with an id of foot */ }
  • pseudo-class

    A pseudo-class selector begins with a colon (:) and usually refers to an element in a certain state.

    a:visited { /* hyperlink that has previously been visited by the user’s browser */ }

:hover { /* (should) select any element while the mouse cursor hovers over it */ }

  For more plain English (and Spanish) explanations of selectors, including complex CSS2 and CSS3 selectors, examine Selectoracle, developed by the Opal Group.

  As you may have noticed from the examples, you can combine these selectors to create a new selector with greater specificity.

• Specificity

  When two or more CSS rules define the same property for a given element, the style preference is given to the rule that is more specific. Again, this is too large a subject to continue, and there are other resources that explain the concept better than we could.

  The mark of a good technical author is the ability to take a complex subject and explain it in a simple way. Eric Meyer demonstrates his skill with a fantastic explanation of specificity in his book, Cascading Style Sheets 2.0 Programmer’s Reference (PDF). Read page 9 and 10: Specificity Calculation.

  More resources on the subject are available in HTML format.

  • Link Specificity, also by Eric Meyer
  • House of Style’s specificity explanation

  One notable exception to the rules of specificity is the !important construct. !important acts as a trump to override a rule that may be more specific.

  .content { font-size:1.2em !important; }

  For now, we recommend never using using !important in your author style sheets. You’ll find out why later, when we discuss user style sheets.

• @import versus <link />

  Some older browsers, specifically Netscape 4, do not handle CSS-P well, sometimes to the point of fatal application crashes. For this reason it is often necessary to hide your complex styles sheets from these browsers. The following is a method of importing a stylesheet so that version 4 browsers ignore it.

  <style type="text/css">
  @import "inc/compliantstyles.css";
</style>

  If you have written you page in semantic HTML, it will still be very readable and accessible in older browsers; it just won’t be styled. This way, you will still be “supporting” these browsers even though they are not “targeted” to receive the full design and layout.

  For more information on this subject and justification for web standards, read From Web Hacks to Web Standards: A Designer’s Journey by Jeffrey Zeldman, or read Mr. Zeldman’s latest book, Designing With Web Standards.

  Alternately, you can use a combination of @import and <link /> to serve selective styles to Netscape and also to standards-compliant browsers.

For a great CSS reference tool, install the Netscape DevEdge sidebar for Mozilla or other Gecko-based browsers.