Lesson 7

Lesson 7 - Style Sheets

Style sheets save time. Up until now, when making changes to the fonts, text sizes and attributes etc, we have done it for each paragraph or heading we wish to change - remember the Red Heading with a green paragraph in lesson two ? As if you could forget - it was horrible ! Imagine if your entire document was all set up like that example, remember the code to do it - it is shown here.

By using a style sheet, we can specify the attributes for any tags we want in a single place in the document <HEAD> and if we ever decide to change the styles, change it once to affect the entire document. Much simpler.

Style sheets are not fully supported in all browsers - IE5 supports some of the standards where Netscape 4 doesn't support much. The best browser for style sheets is Opera but this comes as no surprise because the chief technical guy at Opera is Håkon Lie who just happens to be a major driving force for style sheets at W³C.

Style sheets come in 3 flavours :- local, internal and external. I shall deal with all three kinds in this lesson.

Local styles

Local styles are the easiest way to dip your toe into the murky waters of style. (and we are not talking 'Changing Rooms' here either !) Simply go to the tag you want and inside it, add a STYLE attribute and all the required parameters. Here is an example of a style being applied locally to an H2 tag :

<H2 STYLE="font:italic bold; color: red">Fancy Heading</H2>

Which looks like this :

Fancy Heading

Notice that the style parameters are keyword : value and each set of keywords is separated by a semi-colon.

Of course, you will have to apply the same style to each H2 tag, they won't all pick up on the one above, as the following shows :

<H2>Non-Fancy Heading</H2>

Which looks like this :

Non-Fancy Heading

If you want every H2 heading to look like that, you need to use internal and/or external style sheets. Local styles are applied locally and affect only the tag being 'styled'.

Local styles are quite handy when used with the <DIV> tag. This tag allows you to define an area (or DIVision) within your document, and apply a specific style, or alignment etc, to everything withing the boundaries of the DIV tag. A DIV tag must be followed, at some point, by a corresponding </DIV> tag.

If I wanted to, I could take an existing HTML document, and select a section I want to appear in a different manner to the rest. I place a <DIV> tag at the top of the section and a </DIV> tag at the bottom. So far so good - the document remains the same. Now, I apply some local styling to the opening DIV tag, and the document takes on a whole new look. (Obviously, any areas withing my DIV that explicitly define other fonts or colours, will not be affected by the styles I apply via the DIV tag. There is a fuller example here for you to have a look at.

Internal styles

As a local style sheet applies only to the tag being styled, an internal style sheet applies only to the document being styled. This means that you define styles and use them throughout the current HTML file (and thus, document) but any links to other HTML files/documents will not pick up on your styles. There is a bit more work involved in using an internal style sheet, so lets do one !

Starting at the top of the document, within the area defined by the <HEAD> tags, type the two following tags :

<STYLE>
</STYLE>

Now add a comment tag and end tag between the STYLE tags as follows (in red)

<STYLE>

</STYLE>

The comment tags are used to hide the style definitions from browsers that don't recognise them. Browsers are supposed to ignore tags they don't understand, so the STYLE tags are ignored, but definitions of styles are NOT tags so the browser may try to display them - with unpredictable results, hence the comments.

Now we type in the tag name we wish to style, we will stick with the H2 as above, but type the tag without the opening & closing brackets, then a single space and an opening curly bracket {, the styles we wish to apply and a closing curly bracket } :

<STYLE>

</STYLE>

Now, every time we use an H2 tag in this document, the fancy red italic font will be used. Don't believe me ? Check this out !. That example shows how all H2 headings get set to the same style. Now, what else can we do ?

If we amend the STYLE definitions to the following, we can now affect how emphasised text within an H2 is displayed. Other EM text will not be affected (unless we stylise it too), only EM text inside an H2 tag.

<STYLE>

</STYLE>

We have to define the EM tag separated by a single space from the H2 tag, otherwise it won't actually work ! Now when the browser comes across an EM tag within an H2 tag, it gets a blue background, like this.

External styles

External styles sheets are stored as a separate file from the HTML document. They are simple text files and mean that all styles are defined outside the document in question. This allows you to define a single style sheet and use it throughout your web page. Any HTML document that wishes to use the external style sheet, simply links to it. Lets do one now.

First step is create a new text file using any old editor. Into this file place all the style definitions you wish to use. If you have a document which uses internal style sheets already, cut and paste from that ! Note that an external style sheet does not need to have the STYLE tags present. Here then is our test style sheet definitions :

H1 {
		text-align: center; 
		background: yellow; 
		color: green;	
		font: bold italic
}
		
H2 {
		text-align: left; 
		background: yellow; 
		color: blue; 
		font: bold italic
}
		
H3 {
		text-align: left; 
		color: cyan;	
		font: bold italic
}	
			
H1 EM, H2 EM, H3 EM {background: red}

P {color: blue}

Save this as styles.css in the same directory as the HTML documents that are to use it.

Next, we load up an old, or create a new HTML file and add the following between the HEAD tags (having first got rid of any existing internal style sheets !) :

<LINK REL=stylesheet TYPE="text/css" HREF="styles.css">

And the resulting mess ? Check this out !

It is with the use of external style sheets that HTML comes into its own. The definitions of the fonts etc will all be held in a single document - allowing 'house' styles to be defined. All documents produced will use the style sheet and therefore have the same style throughout - nice and compact. In addition, the document content is uncluttered by all those tags defining colours etc. This makes them a lot easier to manipulate and/or update.

More on styles

You can, if you wish, define any number of styles to have the same attributes. In our H2 example, we could define the H1 and H3 tags to have exactly the same style as follows :

<STYLE>

</STYLE>

Which means that all headings or type H1, H2 and H3 will look the same in our document. See an example here. Note that the relative sizes of the headings remain the same - they are still different sizes, just all red & italic bold. Note too that adding the various other tags to each heading level tag has to be done like this :

<STYLE>

</STYLE>

Style classes

HTML elements can be divided up into different classes and these classes can be applied using styles to various parts of the document. These apply to internal & external styles only, by the way. For local styles, it is manual labour time again !

Lets say that you have a document and wish to define a different paragraph style for the first paragraph of a section of your document. This is usually the introduction, so call it intro. All the rest of the paragraphs in the section will be defined as body. Using a style sheet for the P tag would be difficult - as you wish to define two separate styles for the same tag. What to do ?

As before, define the tag's style between the STYLE tags, but this time add a class name to the tag, as follows :

<STYLE>

</STYLE>

Then, in your document, specify the first paragraph with the CLASS="intro" attribute and it will be displayed in bold italic green text. Other paragraphs will be displayed in green text as defined by the P style. It sounds gross, it looks gross, but if you want, you can find it here !

Again, specific tags within the defined styles can be defined, in a manner similar to that described above. Simply define the type for the class then for the additional tags within that class, as follows :

<STYLE>

</STYLE>

You are advised to use styles in your documents by the W³C and not to use the various <B> tags etc which are being deprecated. It looks like styles are the only way to go and this is understandable. When HTML was invented, its purpose was to be used to define a document's content and not its layout. As Microsoft & others have added bits here and there, the language has become more and more a definition of how the document should look rather than what is in it. The W³C are trying to get back to how it was. Using style sheets gets rid of all the clutter in the documents and makes them easier to maintain. (Looks like I shall have to start using them then :o)

Style attributes

So you now know how to use style sheets, but you need to know what attributes can be applied ? The link you need, where all of CSS1 specs are defined, is here.

Previous Lesson

Home Page

Next Lesson