Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter

Advanced HTML
Frames & Tables
Rounded Table Corners
Flash 5
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics


Related Links
More Stylesheets Sites

Sitemap | Contact | Link To Us | Advertise
Report A Problem

Stylesheets Tutorial
Part 2 - Inserting Stylesheets & Rollovers


After the last part you should know that CSS is an extremely powerful web language which can create amazing websites.

How To Include Stylesheets

There are 3 ways to include stylesheets on your page. You can create a link to an external file in the head of your document. This is very useful if you would like to make sitewide updates by changing one file. The second way is to include the stylesheet information in the head of the document. This allows you to have a style applied to the whole page without being the same as the rest of the site. Finally you can have inline styles, which let you change the style of one piece of text.

At this point I should mention that linked stylesheets are not supported by Netscape apart from versions 6.x

To insert a linked stylesheet you need to put the following into the head of your document:

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

The URL of the stylesheet can either be relative or can use an http://

To insert a stylesheet into the head of a page insert the following into the head of your document:

<style type="text/css">

Stylesheet in here


Inline styles are added differently and I will cover these in detail next week.

Rollover Links

One of the most popular uses of stylesheets is to create mouse rollover effects on links on your site (like you can see on Gowansnet). They are extremely easy to create and are very versatile.

The code you should insert should either go in a file (saved as a .css) for linked stylesheets or in the <style> section of your pages:

A:link {text-decoration: underline; color: #0000FF}
A:visited {text-decoration: underline; color: #990099}
A:hover {text-decoration: none; color: #FF0000}
A:active {text-decoration: none; color: #FF0000}

Here is an explanation of what it all means:


This tells the browser you are making changes to the <a> tag (for links).


This tells the browser what to do to each type of link (hover is when the mouse is over the link).

The information inside the {} tells the browser what to apply to each tag.

text-decoration: underline;
text-decoration: none;

This tells the browser whether the text should be underlined or not.

color: #FF0000

This tells the browser the color to make the text (using an RGB code). You can also add:

text-weight: bold;

to the stylesheet to make that text bold.

When you are adding new elements you must always remember to have a ; after each one.

What Now?

In the next part I will show you some of the other effects you can acheive with stylesheets and how to apply them to other tags.

© 1999 - 2001