Simple CSS Explanation

This is a very simple cascading style sheet (css) explanation. It is not meant to be authoritative, a reference, or a tutorial. Instead it is just a brief overview of what css is and a simple example showing the style used with this page.

CSS is a way to separate the content of a html document from its presentation. The html specifies what elements are on the page and how they are grouped and then the stylesheet specifies how the page looks. This is useful for a couple of reasons. First and foremost it can save lots of time and energy. CSS lets you control aspects of how presentation such as font color and size that previously took lots of <font> tags mixed through the html. If you wanted to change any of the colors then you had to hunt down all of the <font> tags and change them appropriately. Cascading style sheets lets you specify all the appearance properties for a document in one place and thus makes making changes much simpler. Actually you can have one stylesheet used by hundreds of pages and so to change the appearance of all your webpages you need only change one file.

Also css allows different people to manage the appearance of the document than manage its content. I, for instance, happen to be very good at writing programs to generate html, but my aesthetic sense leaves much to be desired. Using css I can create lots of html and someone with a finer tuned sense of color balance can write the style for it and voila, you end up with a solid match of the technical and the artistic, with each person handling the area where they are the strongest.

I will begin with a simple example that illustrates where the "cascading" in cascading style sheets comes from. Each element in the page gets its properties from the styles that are the closest to it. For instance in the following html:

15pt green text

15pt red text

12pt blue text

Normal text

Note: If you are unfamiliar with the <div> tag, it just specifies a division in the document.

This sample gives a little idea of how styles are applied. The first tag is the <div>ision tag; it says that for this section of the document any text that doesn't have the styles overridden will have 15 point green text. The first <p>aragraph tag doesn't have any other styles so the <div>ision tags styles apply. The second <p>aragraph tag has a font color style. Because this tag is closer to the text than the <div> the red color overrides the green. Because the font size is not overridden though the text is still 15 point. The final <p> overrides both the font size and the font color and so none of the properties for the <div> show through.

After the <div> is closed there is one more <p>. A <div>ision tag has no representation on the screen. It is used only to specify groupings of elements in html. The final <p> is outside of that <div>ision so none of the styles for it apply.

Each style contains a set of style declarations. These are simple keyword: value; pairs, for instance font-size: 14pt;. There are different valid keywords for different tags and different values allowed for each keyword. To learn about what they are you can either look at the specification or a reference.

Hopefully that gives a good general idea of how stylesheets are applied. The properties of a document that have styles is pretty large. Not only things like the font size and color but also the justification of lines and the background and the spaces between characters and borders too. The group that is over deciding what sorts of things stylesheets will do is called the world wide web consortium (w3c). It is a group of companies and individuals that confer on different ideas and then come out with standards. The makers of internet browsers, like Netscape and Internet Explorer then take those standards and write their browsers to support them. Cascading style sheets have been around for a while and have been supported in one way or another since Netscape 4 and IE 3. Support is not always perfect but things are pretty solid now and it is a safe bet as a web designer that using css will not limit people's ability to see your site. For a while now the browser that has the best support for css as well as lots of other standards is Mozilla.

There are three ways that you can use styles in your document. The one shown above is called an inline style. It is done by simply putting a "style" attribute in the tag. It is perhaps the least useful form of style usage because it ties the style to a specific spot. There are times though when you only want the style in one place and inline styles work for that.

A more general type of style is called an embedded stylesheet. This type is specified in the text of your html, but instead of being in the tags it is in a special <style> section. For instance an embedded stylesheet appearing in a document might look like this:

Any <p> tags in the document would then look like this. It is not necessary to specify the styles inline if they are embedded. If any of the <p> tags had inline styles for font size or color then those properties would override the embedded ones, but if there were no inline styles closer to the text then the embedded style would take affect.

You might have noticed that instead of specifying a name for the color, like red or blue, instead there is rgb(245, 193, 139). You are allowed to specify colors a few ways in css. There are predefined color names like red and green and blue, also though you can use rgb() and specify the red, green, and blue values of the color as numbers from 0 to 255. Another format you are allowed to use is the traditional html #rrggbb notation where you have the same information as in rgb() but the numbers are written one right after the other in hexadecimal. For instance rgb(245, 193, 139) = #FEC18B. I personally prefer the rgb notation.

Also inline styles introduces the idea of "rules". A rule is just a tag name followed by a set of style declarations enclosed in {}'s.

The most useful type of stylesheet is a linked stylesheet. It is much the same as an embedded stylesheet except it is in a different file. To link to a stylesheet you just include a line like this in the <head>er of your document:

The format of the linked document is a set of rules just like the embedded stylesheet. This document has a linked stylesheet. If you look at it you will see that it specifies the font color and size and background.

One thing that you will notice if you look at the stylesheet for this page is that the rule names are not all exactly the names for tags. Specifically there is a set that looks like this:

The <a>nchor tag has a special set of properties: ":link", ":active", ":visited" and ":hover". These specify the properties of links in your document when they are displayed. You might have noticed that none of the links on this page are underlined. This is because of the text-decoration: none; style in the :link section. Also if you are using IE 5 or Netscape 6 then when your mouse passes over a link it turns yellow. This is because of the :hover color: rgb(245, 251, 134); style. If you wanted to you could have the background change colors when the mouse passes over or have the text change size or any other type of style change.

The especially nice thing that I mentioned before about linked stylesheets is that they can be shared by many pages but to change the appearance of a page you need only alter it in one place.

So, this is a brief overview of stylesheets. If you want a more in depth tutorial I recommend either webmonkey or zvon.