Contents
Introduction
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.
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.
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.:
<head>
<link rel="STYLESHEET" href="html.css" type="text/css">
</head>
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.
© Martin Allen 1999 - 2006. Last updated Friday 29 December 2006 05:23:03 PM -0000.
|
Tags: 
