Caltech Webmasters Forum
Cascading Style Sheets

Where does the style information live?

  • In line
    • <span="color:green; font-weight:bold">Some stuff</span>
    • Isn't really any better than font tags. Use only if you really need to override the style of just a specific page element.
  • In the head of the page 
    • <head>
  <style type="text/css">
    hr {color: sienna}
    p {margin-left: 20px}
    body {background-image: url("images/back40.gif")}
  </style>
</head>
    • Better than in line, but still not fully reusable
    • Depending on the tools you use, it might be good while testing/debugging
  • External style sheet
    • <link href="../include_dir/stylesheet.css" media="all" rel="Stylesheet" type="text/css" />
    • The right way to style your whole site.
    • You can have different style sheets for different media. Actually, Ming Li recommends you always create a separate stylesheet for print. In it you can: hide the site navigation elements, hide background images, resize your content so it will fit on the page (especially important if you have a wide site), and redefine font sizes in points to work better with printer fonts.

Selectors and Styles

The basic stucture of a style sheet is "find this element" and "do this to it".

Selectors (the finders) have 3 basic flavors:

  • Regular html tags: p, h1, li
  • Class selectors: Named styles that appear in your stylesheet as ".somename" and are accessed in your html page as "<p class="somename">
  • Id selectors: unique identifiers of parts of a page. They appear in your stylesheet as "#thissection" and are accessed in your html page as "<div id="thissection">

Once you have located an element, you can apply a variety of properties to it. Some examples of properties are font, the color of the text, any text decoration (underline, line-through), alignment, etc. Look at the stylesheet for this site for some additional examples.

CSS is "cascading" in that properties are inherited. For example, if you set the font, font-size, and color in the body tag, all text on that page will be styled that way - unless you over-ride those definitions with more specific instructions. In general, rules are additive with conflicts resolved in favor of the more specific selector. Sometimes it is a challenge to figure out what selectors apply to a section of the page. I find the "View Style Information" part of Firefox's Web Developer extension to be invaluable for debugging.

Layout and Positioning

So you can (and should) use CSS even if you still use old school tables and other non-semantic markup to layout your web pages. But the real killer use of style sheets is to divorce your content from its layout. To see this taken to new heights, check out CSS Zen Garden.

Let's walk through an example of a basic 2 column layout that does not use tables - this site. The basic skeleton can be seen best in a page without content. The html gives the basic structure:

  • The template class gives the basic structure and includes the header as a relatively positioned background image.
  • Within that there are three divs: site_title, nav, and content. The stylesheet positions the navigation at the left side, with a top margin to clear the header, and a fixed width of 150 pixels. The content div also has a top margin so it clears the header image and is positioned to the right of the navigation by using a large left margin.
  • The navigation section demonstrates using css to get rollover effects (rather than using javascript to swap images).

Web Resources

Books

Tools

  • Firefox/Mozilla Web Developer extension Especially useful are the "View Style Information" and "Edit CSS" options under the CSS menu. I think that the new option "Use Border Box Model" may help you see some of the differences in how things will layout in IE6.
  • Before trying to debug CSS problems, make sure that your html validates: http://validator.w3.org/ When tracking down html problems, I like to use the View Source Chart Firefox extension.