WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

Converting Existing Content to CSS, Step 6

External Style Sheets

by Shirley E. Kaiser, M.A., SKDesigns

Copyright © 2001-2016, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at websitetips.com with permission.

Interested in trying an external style sheet instead of a style block? You can use the style block created for the previous lessons. Step 6 below will show you how to do that.

Create an External Style Sheet

To create the style sheet:

Open a new, blank document.

You can copy and use your completed style block rules from Step 5: Links and CSS, excluding the outer style element tags, as shown highlighted below:

<style type="text/css">

body {
background:#fffff0;
color:#336666;
font-family:verdana,geneva,arial,helvetica,sans-serif;
}

h1 {
color:#336666;
font-size:2.1em;
background:transparent;
}

h2 {
color:#669966;
font-size:1.8em;
background:transparent;
}

h3{
color:#999966;
font-size:1.5em;
background:transparent;
}

h4{
color:#669999;
font-size:1.2em;
background:transparent;
}

p,ul,li {
font-size:small;
font-family:verdana,geneva,arial,helvetica,sans-serif;
}

a:link {
color:#999966;
background:transparent;
}

a:visited {
color:#669999;
background:transparent;
}

a:hover {
color:#fffff0;
background:#669999;
}

a:active {
color:#cc0033;
background:transparent;
}

</style>

For reference, here's your completed markup and style block from Step 5 with the style block to copy in bold red text:

Style block to copy for new external style sheet. (A separate window will open.)


Paste the copied style block rules into the new, blank document that you created above.

Save your new style sheet document with a '.css' file extension as main.css. Your new external style sheet should look like this:

External Style Sheet. (A separate window will open.)

(You can name your style sheet other names, too, of course! We're just calling it main.css for this lesson.)

Now that you've created your new external style sheet, delete the style element tags and style block rules from your HTML document, and save it.

Link the Style Sheet to Your Web Page

Here's how to link your new external style sheet, main.css, to your Web page.

Within your HTML document between the head element tags, the link attribute is added to point to the external style sheet. Your external style sheet doesn't have to be in a special directory or within the same directory as your document. You can place it wherever you wish. I'd suggest having a separate directory for your style sheets, though — just good organization.

Here's the format for the link:

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

where main.css is the name of the external style sheet.

Here's how to add the link to your Web page.

Using the format noted above, the <link> attribute is used to point to your external style sheet. Add it between the head element tags of your HTML document, as highlighted below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>
Name of your document here</title>

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

</head>
<body>


Save your document. Your Web page markup should look like this:

Markup of HTML Document With External Style Sheet. (A separate window will open.)

Check your document with your browser to make sure it's recognizing and using your external style sheet. Your HTML document should look like this:

Web Page With External Style Sheet. (A separate window will open.)

If the external style sheet isn't working correctly, doublecheck the path and spelling, and also check your style sheet for any typos.

The external style sheet is an especially efficient way to maintain the styles for an entire site. For example, you can set up or change an entire site's appearance all at once with one style sheet rather than having to change individual pages.

The more you can separate your structure from your content, the easier your site will be to maintain. There is more information about these alternatives via the W3C Style Sheet Resource page and WebsiteTips.com's CSS section.

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves


Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation