CSS is an acronym that stands for Cascading Style Sheets. They are important as they separate the content of your websites (defined in HTML) from the layout (which can be defined in CSS). In effect this allows you to write your site's style in a CSS file that can be called by your html page and which is then applied to the page. Obviously, by keeping the style and the HTML separate you're reducing the size of your HTML files (and maling them quicker to laod). You're also able to change the 'look and feel' of your website by simply changing the CSS file. Of course, it's possible to include CSS in the header region of your HTML file (and this can be useful if you want to do something specific to a single page). With CSS you can also define multiple files each defining different styles which you can then apply to various areas or subdomains of your website.

How CSS Works

Above you've had a (very) brief introduction to CSS, but the only real way to see how CSS works is to play with it.

There are styles in HTML as well, these are the things that define the size, style and clour of font or its degree of shading. In traditional HTML these styles are applied to a tag, such as a <font> tag. In CSS all these changes are gathered together under the banner of an unique name, called a selector. The style is then defined as an attribute of that selector (don't worry about the terminology for now, all will become clear) which means that in your CSS file they all occur in one place (this makes them easier to write and to subsequently locate if you need to change them).

When it comes to using the style in your HTML file you simply use the name of the selector as an attribute of the HTML tag that you want to apply the style to, using the class attribute.

The following example should make things clearer:

The top table defines the classic HTML and the bottom table uses CSS to define the style. You can see from the top table that you're defining the table colum style for each column in the table, which obviously could makes the table code and the HTML file very large. If, however, the style is saved in a CSS file (assuming that you've defined the bigfont selector style in that file) then you can simply refer to that style using the class="bigtext" attribute. You can see that this makes the table much smaller and easier to read and as you only need to define the style once this significantly reduces the size of the files that the user needs to upload and makes the loading of your web pages much quicker.

This is also a good example of the separation of the layout from the content. With this system the HTML file deals only with the content whilst the CSS file defines the layout. CSS also allows you to define very complex layouts fairly simply (the header block, the main text, the left-hand sidebar, the right-hand side-bar and the footer of this web page are defined with pure CSS and HTML there isn't a table in sight. Indeed, header, footer, maintext, leftnavigation and rightnavigation areas are simply defined with those selector keywords. Just use those and you've defined the main areas of your website (which is a lot easier than fiddling with nested tables, right?).

The Advantages of CSS:

As you may have realized by now, I'm a great fan of CSS and below is a list of some of the strengths of CSS:

• Defining the look of all your pages in one place. Rather than having to repeat the same styles or variations again and again throughout your entire website you can now use a single CSS file to define every style and style variant that you need.


• Easyily change the look of your site. As all your styles are now in a single file (and separate from your content) if you decide to change the look and appearance of your site you only need to edit the CSS file and not each HTML page on your site.


• Define font sizes and all attributes with pinpoint accuracy. CSS turns HTML into more of a typesetting tool. You can define any point size for a font you wish (rather than the limited size variation of HTML). You can also position anything on a web page with better than millimetre accuracy.


• Redefine the behaviour of HTML tags. With CSS you can actually over-ride the behaviour of standart HTML tags to get them to do things that they were never intended to, such as changing fonts, locations, removing bullets from unordered lists. (The 'Home' and 'Back' buttons at the bottom of this page are an example of this where the <ul&ul; (unordered list) tag has been re-defined completely.


• Define customized styles for links. Using CSS you can allow the behaviours of links to do pretty much whatever you do. You could define an univsited link to be a bold text in a bright colour, change this to italic text as you hover and change to a light text once you've visited the link. You can also remove the underline from the link text. Basically how it behaves is up to you with CSS.


• Defining layers. This is one of my favourite behaviours. Because you can position elements any way you want to you can define layers that stack on top of one another. This allows for great menu effects without a single line of JavaScript (see my CSS Menus page for an example of how to use this behaviour to create floating menus).


• Get more of your web pages indexed. This is not something that crops-up frequently when people are compiling lists of CSS advantages, but it's a very important aspect of CSS behaviour. Many web coders use scripts such as JavaScript to define the 'whizzy' functionality of web-pages, such as drop down menus. The problem with JavaScript is that it's not indexed by the indexing spiders. As such you have potentially useless content. More importantly, you are potentially throwing away deep links in your website by not allowing them to be indexed. With CSS, as you've separated content and layout the content of your website is pure HTML and it cal all be spidered and indexed by the serch engines. This potentially gives you both deeper spidering and more keywords for your web pages.

Overall, your pages will lad faster as you've removed all the duplicate style definitions from your HTML files (making them smaller) and these are now defined only once in a single CSS document. As this document only needs to be loaded once into a web browser this makes the loadig of yor other web-pages quicker, thus giving your visitors a better experience.

I should mention that there is one potential disadvantage, in that CSS only displays correctly in fourth-generation browsers. However, 95% of all browsers now lie in this category. Even without CSS enabled your pages (as they're basically pure HTML) will still load into older browsers (and even text readers) they simply won't be formatted with your CSS styles.

The next part of this CSS course will get you started on thinking about CSS and actually writing your own CSS code for the first time. If you are interested in following this course, of if you want to brush-up your CSS programming skills then I suggest that you buy yourself a book on CSS and HTML (a number of possible options form Amazon are shown at the bottom of this page).

On to the next part...

• Next Page >>