to home page


RAM from



By now you should be happy with altering text in terms of size, colour, font and other things.

But for example if you want all your Heading tags to be italicised it can be a drag putting in hundreds and hundreds of <I> and </I> tags. If only there was a way to alter the style of these !

But there is !! These are called style sheets.

They will come to no surprise to many of you who have used style sheets in other applications such as word processing or DTP packages

These are not just the current in thing but are being actively encouraged as good HTML.
Further revisions will take them more & more into account (other editing tags will be dropped in their favour)

There are currently 3 ways of using style sheets

Inline Style Sheets
These are set into the document to define attributes to areas of text
Document level Style Sheets
Also set into document but cover the whole document
External Style Sheets
The document links to an external sheet. Useful if you want to create a consistent one across all your web pages

You can combine them to give your document extra oomph!!. This technique is calledcascading style sheets and is described later

In the examples below we use the following style sheet properties

defines text colour. Either in RGB code or colour name
defines special style like italic or bold
defines the font type e.g. font-family: times new roman;
If more than one listed
e.g. font-family: comic sans ms, serif sans, arial;
Then a browser will use the first it has
defines background colour. Either in RGB code or colour name.
(Also can set background image see library)

some more style sheet properties are listed together with RGB and colour names in our HTMLresource libraryback to the top

Inline Style Sheets

This is the simplest approach. In any tag you just include a style attribute
which defines a style sheet property

<h1 style = "color: red; font-style: bold;">This is a big italic red header</h1>
<h1>Hang on I am not red or in italics.hmm.....</h1>

gives rise to this

This is a big italic red header

Hang on I am not red or in italics.hmm.....

As you can see the effect doesn't carry on once the defining tag is closed.

You can use them in the middle of text using the <span> tag


<span style="color: red">I am Red</span> whereas I am not

I am Red whereas I am not

Why not just use physical style and content tags like font
text = red and <i> I hear you say!!

Well there are some advantages You can set some factors such as giving a chunk of text a background. You can divide areas of text up with <div> tags


<span style ="background: skyblue;">I have blue behind me</span>
I am normal

I have blue behind me I am normal

These clearly have their limitations. But can be useful in conjunction with other style sheets

back to the top

Document Level Style Sheets

Now we're motoring !

If you felt Inline style was fiddily & wishy washy, then this should impress you. With Document level style sheets you can define a consistent style for all your text components

You need to place this in the <head> tags of your document

here is an example
(the attribute type = "text/cps" just lets the browser know its it is a text style sheet. For most browsers its not needed)

<title>Document level Style sheet example</title>
<style type = "text/css">
h1 {color: aqua; font-style: italic; text-align: center}
h2 {color: #0000FF; background: khaki; font-family: serif, sans-serif;}
p {font-style: bold; font-family: comic sans ms, arial;}
dt {color: aqua;}
dt em {color: red;}

Now view a page with this style sheet which explains everything between the <style tags>

As you can see you get a document wide approach. It can also be set to react to certain editing changes (like the use of <em> tags with defined terms in the example)

back to the top

External Style Sheets

The principles of external style sheets only differ from document level style sheets in one respect. Instead of defining all the styles on the document, the style is defined by a separate style sheet file (called a .css file).

The advantage is that if you want the same style sheet across all your documents you don't have to slavishly copy (or cut and paste !) the same <style> tags and attributes.

It also means you can also alter the layout of all linked files just by changing the .css file rather than ploughing through each HTMLdocument (i.e.. You could change all files with a linked external style sheet in a website just by replacing the .css file)

You don't need a special editor to create a .css file. Notepad or any basic text editor will do.

Say you wanted to use the style sheet described in document level style sheets

simply enter the following into notepad

h1 {color: aqua; font-style: italic; text-align: center}
h2 {color: #0000FF; background: khaki; font-family: serif, sans-serif;}
p {font-style: bold; font-family: comic sans ms, arial;}
dt {color: aqua;}
dt em {color: red;}

select save as and alter save as type to read all files. Find your web folder and in file name enter your style sheet name plus .css (e.g. mystyle.css)

To link HTML documents to external style sheets use must place a <link> tag in the <head> tags

here we are using the .css file called mystyle.css

<link rel="stylesheet" type = "text/css" href = "mystyle.css">

We've created a page which uses our mystyles.css as its External style sheet. Have a look

In it there is a link to an identical page but which is linked to a second style sheet file called mystyle2.css. Other than that the HTML editing remains the same. It gives you an idea of the effect of changing a .css file without altering HTML documents

We use a .css file for this site to control our links


You've probably seen the term before , but what are cascading style sheets?

Well, essentially it means several style sheets can be used in a document each influencing the layout slightly (or causing a cascade of style. This is what W3C want you to be doing for page layout and it can be very effective

For example your site could have a common external style sheet to give a like feel throughout your site. Then further document level or in line style sheets could be used to shape an individual document's feel

If there is conflict between style sheets (e.g. your .css file says all header should be blue and your <style> says red) The "closer" style sheet will take precedence. Therefore Inline style sheets win over document level with external style sheets having the least power.

back to the top


Back to intermediatemenu