Cascading Style Sheet language

The descriptive syntax used in CSS has its own language and construction rules, which are different from those of HTML.

In the past, if a Web manager wished to format a line of text in red, make it larger, specify a particular font, embolden and italicise it, the following HTML commands would have to be used on each occasion:

This is very inefficient, particularly if many instances of this formatting are required throughout the document or the website.

In this example the author has reused a required HTML element and applied a class attribute and value to it. This class refers to a line in the CSS section. The browser recognises that the line needs to be styled a particular way and displays the results. In this way all objects can be styled.

If this element of the CSS file is examined it will become obvious how this instruction is formatted correctly:

.redtext { color: #ff0000; font-family: arial, helvetica, sans-serif; font-size: 1.5em; font-weight: bold; font-style: italic }

Firstly the class is listed, which in this case is ‘redtext’. A full point must precede this listing, as this is the class identifier.

Each class has a series of CSS formatting rules, which are contained within braces (curly brackets) { }.

Each rule has an attribute and a value. The separation of these is slightly different to that used in HTML. An author would normally use the equals symbol and quotation marks to separate the attribute and value in HTML. In CSS specifications, a colon is all that is used. Each set of attribute(s) and value(s) is separated by a semicolon.

In the example above, the ‘font-family’ attribute has a multiple value: it states not only two values for the font family name (Arial and Helvetica) but also the generic typeface name (sans-serif). This is to ensure that if a user’s browser does not contain the required fonts it will still display the information in a style that is acceptable.

The font-size can be specified in a number of different ways. Pixel height, point value and percentage size can all be used. Pixel and point are particularly inflexible and cannot be changed by a user (known as hard coded). It is recommend that text formatting is stated either by ‘ems’ or by using the x-small, small, medium, large or larger technique.

An author should always make the size of text as legible as possible. It is not sufficient to rely on users to change their font size as some will not bother. Start with a font size equivalent to 10 or 12 pixels, which will render acceptably on most web browsers.

Many browsers are still being used that have no understanding of CSS. Although information on an HTML page should always be formatted using this method it is important to ensure that you website is still legible if this facility is disabled.