How to use Style Sheets

HomeForumTutorials Tags:



The Structure of a Style Sheet

Using Style Sheets


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.

The Structure of a Style Sheet

Here is the style sheet used by this section of this website:

A:link       {color: #ff0000; text-decoration: underline}
A:visited    {color: #ff0000; text-decoration: underline}
A:active     {color: #808080; text-decoration: underline}
A:hover      {color: #c0c0c0; text-decoration: none}
body         {color: #ffffff; background-color: #c0c0c0; font-family: Arial; font-size: 10pt}
h1           {color: #ff0000; font-size: 24pt}
h2           {color: #4646FF; font-size: 20pt}
h3           {font-size: 16pt}
h4           {font-size: 13pt}
h5           {font-size: 10pt}
h6           {font-size: 8pt}
hr           {color: #c0c0c0}
table        {border-color: #ffffff; font-size: 10pt}
td           {border-color: #ffffff}
.ctlfont     {font-family: Arial; font-size: 10pt}
.htmlcode    {font-family: Courier New; font-size: 10pt}

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 attribute.

Using Style Sheets

When you have written your style sheet, you will need to save it with a '.css' extension and upload it to your webspace.  See Publishing Your Site.

To use the style sheet in your web pages, you will need to create a LINK tag e.g.:

<link rel="STYLESHEET" href="html.css" type="text/css">

The LINK tag is always used within the HEAD tag.  Set the HREF attribute to the name of your style sheet.

There are many more declarations that can be used, but by altering the above example you should be able to create a useful style sheet for your website.

blog comments powered by Disqus
© Martin Allen 1999 - 2006.  Last updated Friday 29 December 2006 05:23:03 PM -0000.