Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Linking to a style sheet

Linked style sheets are the most powerful way to use style sheets. All you have to do to change the look of all your pages is to make a single change in the style sheet file. If you have lots of pages, this is the way to go.

To use a linked style sheet, you must first create a file that contains the styles that you want to use. You can use a text editor like Notepad to create the file and save it with a .css file extension or there are lots of tools that you can buy to help you create style sheets.

Once you have the file, you can then use the <link> tag to link to it from your pages. For example, if your style sheet is called hints.css, add the following to your pages:

<head>
<title>My HTML page</title>
<link rel=stylesheet href="hints.css" type="text/css">
</head>

The href property tells the browser where to find the style sheet.

The linked style sheet consists of a set of style rules. Here's an example:

body {font-size: 75%; 
           font-family: Arial, Verdana, Sans-Serif;}
a:link    {background: transparent; color: #0000FF;}
a:visited {color: #800080;}
h1        {font-weight: bold;}

Don't add HTML to your external style sheet. The rules are not enclosed in <style></style> and comment (<!-- -->) tags. For example, you do not need <style type="text/css"> at the start of an external style sheet.

  • Any settings for the <body> tag do not work in Internet Explorer 3.

For a list of properties, see Style properties.