Introduction To CSS

CSS means Cascading Style Sheets. It is a format for writing Style Sheets that Cascading, meaning that it can put together from several sources with out conflicting. It can be used to add layout and themeing to several types of documents. CSS is all about separating content from style, simplifying both. This tutorial with focus on how it can be used in (X)HTML documents, though it can be applied from there to other formats.. You should have an understanding of (X)HTML before you attempt CSS, in the tutorial I presume you know at least most of the basics.

So way bother learning it? For a number of reasons. The first is it makes a lot of sense, you make one file and apply it to your whole site. This creates a very easy way of make your site look uniform. Making it very easy for visitors to know as they go from one link to another that they are still on your site. Also you can change just one file and the change the look of your whole site. A lot better than trying to change the font size on every single on of you5 500+ pages or even just for 5 pages if that is what you have. Also if makes to possible to do tableless designs. These don't have all those <tr> and <td> tags every were that have to be downloaded for for every page. It is all in the one file the gets downloaded once, saving you bandwidth and $$$. CSS also removes the need for <font> tags and attributes like bgcolor and alink that bloat the HTML code and which you can't put in HTML 4 strict or XHTML anyway.

CSS information is included in a document four ways.

Inline, that is on an element, that is an (X)HTML tag
Internal, that is n the head of a document.
External, in another file linked to the document.
As the browser default.

The aim of this tutorial is to show you how to use the first three methods of including CSS so that you may make your site reach its full potential.

First it is important that you understand the lingo that I use in this tutorial. When I say element I am talking about what is commonly called HTML tags such as body, h1 and p. (X)HTML means both XHTML and HTML, both very similar document formats in common use. IE is short for Internet Explorer.