Introduction
CSS is a formatting language, used to provide more customised web pages and make it easier to make multiple pages use the same style. The acronym stands for Cascading Style Sheets. All current browsers can handle CSS, and it is the best Web page formatting language produced to date. Some very popular browsers do not handle it as well as they should (see the section on browser problems) but largely support is good and developers are tending to use it much more often.
Using CSS, you can define colours, backgrounds, borders, margins, alignment, fonts, sizes and loads of other things for almost any part of your web pages.
The word cascading describes many of the features of CSS. Firstly, it means that many stylesheets can be used and will be merged by the browser to provide a computed style for each element. If styles defined for one element oppose each other, the later one will be used, unless another one more specifically refers to the element (for example, if all paragraphs are made red, but a paragraph that is in a <div> is made blue, the blue will override the red for paragraphs in a div, as it more specifically refers to the desired element). Cascading also means that each object inherits some styles from its parent object or parent class. The parents are not the same as the parent objects in JavaScript but use a similar idea. The objects are refered to by their element tag. The highest object in the structure is the html element. If any elements do not have their own CSS defined but the html element does, then the cascading behaviour means they will inherit from the html element. So, if in the html element we define the text colour to be white, then any tables will also have white writing in them.
Each element can be in a class. For example, if we define the 'p' tag to have a text colour red then every paragraph will be red. But if we then define a class of paragraph called mybold where the text is bold and we create a paragraph of class mybold, it will have bold text. But remember that style sheets cascade and elements inherit from their parent class, so the text in the paragraph of class mybold will also be red. If we define the class mybold to have blue text then the blue will override the red and the text in the paragraph of class mybold will be blue.
One of the features of CSS is that if the browser does not understand something, it will ignore it and move on to the
next attribute. It will not display warnings. This can make things easier in some circumstances, since you can apply styles
without having to worry that a browser might ignore the entire stylesheet, because it should only ignore the parts it does
not understand (although there are a few exceptions). However, it also means that it can be difficult to work out if a browser
will correctly apply a rule or not. For example, you may want to apply display:table-cell;width:25% to an element
if it understands it, and width:100% if not. Unfortunately, CSS does not provide any way to test for support
of a property.
Opera has some of the most comprehensive CSS support of any browser. It has fairly complete support for CSS 1 and 2.1 (including 6 separate media types), as well as several parts of CSS 3. The KHTML/WebKit engine browsers like Safari, Chrome and Konqueror also have fairly complete support for CSS 1, largely complete support for CSS 2.1 (but only for screen and print media), and large parts of CSS 3. After that are Gecko engine browsers like Mozilla/Firefox, which supports CSS 1 and CSS 2 (only for screen and print media), and some parts of CSS 3. They also have support for many CSS extensions. Last of all is Internet Explorer. When comparing the same version numbers, IE on Mac supports some parts that the Windows version does not, but both are fairly old and incomplete. They support CSS 1, and selected parts of CSS 2, and manage to pack more bugs into their support than most of the other browsers. Internet Explorer 7 supports more of CSS 1 than IE 6, and has fixed some of the CSS 2 handling. Internet Explorer 8 has finally made a proper advance to support most of CSS 2.1, but is still nothing like as good as the other browsers when it comes to more advanced CSS. Internet Explorer 9 is much closer to the other browsers, supporting CSS 2.1 (screen and print media only), and some of the more popular CSS 3 modules.
This tutorial is not intended to teach you all of the many possible styles that you can apply, it is intended to teach you the syntax expected with CSS.
Last modified: 19 March 2011