What is CSS?

Before we start

I'm assuming you have basic HTML skills and know how to code a simple page. If that's not the case you can get all the necessary basics by reading the HTML beginner tutorial first.

CSS

Originally HTML was only used and intended for structure and semantics. Web browsers were supposed to take care of the layout. As the two major browsers Netscape and Internet Explorer at that time started to add their own HTML tags such as <font color="red">...</font> and attributes such as <img border="5" src="..." alt="..." /> to allow coders to change the appearance, HTML documents eventually turned into a mishmash of content and presentation.

To solve this problem and separate content from presentation W3C created CSS in 1996 which was quickly adopted by all major web browsers. In 1998 W3C extended the original specification to create CSS 2.0 followed by a minor CSS 2.1 update. CSS 3.0 is currently still in draft and hardly supported by any browsers as of this writing (Firefox 3, IE 7, Safari 3, Opera 9).

So essentially CSS (cascading style sheets) is a language that applies styles to a HTML document and its elements to change the look and feel and is usually stored in separate .css style sheets which can be re-used for all your web pages. The picture below illustrates this concept:

A website is made of HTML for content plus CSS for appearance

Advantages

• Quick layout changes: Because all your CSS styles are in one or more .css files which are re-used for all pages it's easy to change the look of your website. For instance to add a 5 pixel wide red border to all your images you can simply write img {border:5px solid red}. This saves a lot of time as opposed to changing every single image tag in all your pages.
• Smaller file size: Separating content from presentation helps keep HTML file sizes down and improves page loading times. Once CSS files have been loaded for the first time they will be cached by the browser and loaded instantly for all following pages that use the same style sheets.
• Consistency: With CSS it's easy to keep a consistent look throughout your website.
• Cascading: Multiple style definitions will cascade into one, i.e. the last written one will overwrite all previous ones. This is very useful if you need to work with an existing style sheet and want to make some changes without altering the original code.
• Accessibility: Having content separated from presentation is a great help to people with viewing disabilities who often benefit from well structured HTML to understand the page.
• Design without tables: Before CSS lots of web designers mis-used tables to position elements on their page which is a bad thing for accessibility and also makes the code unnecessarily big and complicated. With CSS you can position any element exactly where you want without using tables.

Disadvantages

The good news is that there are almost no disadvantages. The bad news is that the only real disadvantage is ... *drum roll* ... Internet Explorer's CSS support. IE handles some things a bit differently than Firefox and Co. which follow the W3C standards. This can sometimes cause unexpected display bugs in IE such as the box model bug while it works fine in all other browsers.