getting started with
cascading style sheets

what is css and why would you want to use it?

CSS stands for Cascading Style Sheets and at the simplest level, it's a way to build a web page that keeps the formatting separate from the content of that page. For example, in a web page that doesn't use CSS, you would change the size, color and style of text using a <font> tag.

However, to change the style of that text, you would change each and every font tag, on every page on which it was used. Using style sheets allows you to make the change in one external file, affecting one, ten or a hundred pages.

Besides saving you a lot of work, style sheets also help make your pages more consistant and smaller, which means they load faster for your visitors. Style sheets can also be used to completely format web pages, eliminating the need for tables, one of the most frustrating problems beginning web designers face.

some examples

Before using CSS to format a couple of pages, take a look at some examples of pages that make excellent use of CSS.

Wired News - While this page may look like it's formatted using a standard three column table format, there are no tables anywhere in the code. All of the layout is accomplished using stylesheets. If you click on one of the different sizes of A's at the top right side of the page, you can change the size of the text used for the articles. If you return to this site later, the colors might have changed on every page, easily done by changing one or two lines in the style sheet.

CSS Zen Garden - The only purpose of this site is to allow web designers to show off their CSS skills. Click on any of the links in the navigation column to apply a new style sheet to the content of this page.

There are plenty of other examples running around out there but you probably can't tell just by looking. But the people maintaining the sites certainly know since it would be difficult, if not impossible, to keep those pages in shape without style sheets.

This tutorial will not give you the tools to build a table-less page. However, you should get a good idea of the concepts of CSS. The resources at the end will point you in the right direction to learn more.

So, let's get started.

Next Page -->