Cascading Stylesheets

Introduction

W3Schools has this to say about CSS:

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags.

Advantage?

Simply put, using CSS means we can put our content and structure in one document, and the style elements in a different, discrete document.

Why is that such a big deal? Well, perhaps this analogy will help: what if painting your house meant you had to tear it apart and rebuild it? Not very fun, or economical, is it? When we embed style elements into a web page, we run into this same problem when we want or need to change the look of the page. Not to mention, maintaining a consistent look across pages becomes a chore unto itself...

Drawbacks?

I can only think of one major drawback to using CSS: your site becomes dependent on being able to load an external document in order to display correctly. If your site cannot load the stylesheet, your page will degrade to however the core HTML is structured. For some sites, that can be, for lack of a better word, painfull. Of course, this is only a problem with external stylesheets, and frankly, unless your stylesheet is stored on a different server for some reason, if your site loads, your stylesheet will load.

File Structure

There are two methods to implementing CSS: by embedding in the HTML source document, or by referencing an external stylesheet.

Embedded

Of the two ways of embedding style into a web document, the easiest method is to style each element individually, like so:

<tag style=>, where tag is replaced with whatever tag you are styling.

The second method involves adding the <style> tag to the head of your web page, like this:

• samplepage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
      <title>Page Title Goes Here</title>
      <style type=text/css>
         tag {
            // attribute
         }
      </style>
   </head>
   <body>

   </body>
</html>

Simply substitute the element you want to style for tag and add whatever attributes you want to modify, i.e. background-color, font-size, etc.

External

For an external stylesheet, we add a <link> element to our <head> element, like so:

• samplepage.html

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml >
   <head>
      <link rel=stylesheet href=url to stylesheet here type=text/css media=all/>
      <title>Page Title Goes Here</title>
   </head>
   <body>

   </body>
</html>

Stylesheets are very simple documents, and look similar to this:

• style.css

// Add copyright notices, etc. to top of page using comments.
// The rest of the style sheet looks just like an embedded
// stylesheet.

// To style every element of a specific type, add that element
body {
   // attribute
}

// To style a specific element, add its id
#header {
   // attribute
}

// To style more than one element, use a class
.bodytext{
   // attribute
}

And the elements being styled will look like so: <tag id=header> (ID'd element) and <tag class=bodytext> (class element).

Do You Want to Know More...?

Check out SitePoint.com for a very thorough rundown on CSS.