Style sheets allow you to create a uniform look to you site, which include
fonts, colours, spacing and other attributes. Instead of formatting pages
as they are made with the font formatting options in your HTML editor, you
simply link a cascading style sheet file (using the LINK
tag) and the page is then formatted according to the rules in the .css file.
Style sheets are written in the cascading style sheets (CSS) language.
The advantage of this is that you can alter the look of your whole website in
a few minutes. Also as the formatting code is held in a separate file, you
pages will download quicker, especially as once the .css file has downloaded, it
is then read from the cache instead of being downloaded each time the user
navigates to another page.
This tutorial will show you how to create a simple style sheet.
Style sheets contain rules, selectors and declaration blocks. A rule is
made up of a selector and a declaration block. In the above example, the
top line shows 'A:link' as the selector and the text following (contained in the
curly braces) as the declaration block. The selector and declaration block
do not have to be on the same line. The declaration block is made up of declarations,
separated with semi-colons. Each declaration is made up of a property and
value, which is separated with a colon.
For example, the 'h4' selector has a 'font-name' property set to '13pt'.
All selectors that do not start with a '.' refer to HTML tags.
Therefore, the H1 tag will be formatted so that the text
is in red and 24 pts in size.
In the case of the A tag, this is split into the four
states of a hyperlink - before it has been clicked on (link), when it has been
visited before (visited), while it is still highlighted (active) and while the
user's mouse cursor is over it (hover).
Many tags support the CLASS attribute. Selectors preceded with a '.'
character, can be used as the value to this attribute to format elements
according to this selector's declarations e.g.:
<p class="htmlcode">Example text</p>
The text 'Example text' will be formatted in the Courier New font and be
10pts in size. Note that '.' is not included when using the CLASS