1. Technology
Send to a Friend via Email

External Style Sheets

How to Use External Cascading Style Sheets (CSS) on Web Pages

By

Casual Guy workin on laptop
StockRocket/Vetta/Getty Images

External style sheets are the best way to put CSS styles on your web pages. Once you've gone beyond the basics of creating CSS styles, you'll want to be able to use the same styles across multiple pages on your site. External style sheets make this easy to do.

To Start Building an External Style Sheet, You Need to Write Some CSS

Open a blank page in your text editor and write out your styles as you would if you were putting them in the <style> tag (such as in an internal style sheet) in the head of your document. But don't write any HTML.

For example:

body {
  background-color : #fff;
  color : #0c0;
}

Once you've written your entire style sheet, save it as a .css file. Make a note of where you saved it so that you know what the URL will be when you upload it. I mirror my website on my hard drive, and store all my style sheets in a separate "styles" sub-directory. So my style sheet URL would look like this:

http://www.mydomain.com/styles/mainstyles.css

I named my style sheet mainstyles.css, but you can name your style sheet anything you like, as long as you use the .css extension.

It's a good idea to upload your style sheet to your hosting provider right away so that you can test that you have the URL correct. Once you have uploaded it, browse to the location in your web browser. If you've got the URL right, you should see the CSS as you wrote it.

Link to the External Style Sheet in Your HTML

Once you've written your external style sheet, you need to attach it to your HTML document. You do this with the <link> tag.

The <link> tag belongs in the head of your HTML document. Use the following attributes to link to a style sheet:

  • href="URL of your stylesheet"
  • rel="stylesheet"
  • type="text/css"

For example:

<link href="http://www.mydomain.com/styles/mainstyles.css" rel="stylesheet" type="text/css" />

Link to External Style Sheets with All Three Attributes

All three of these attributes are important to make sure your stylesheet works correctly. Many people are tempted to leave off the type attribute and this can cause problems with some browsers - especially if CSS is not defined on your hosting server. Do not be tempted to "save download time" by deleting these few characters. You will cause more problems than you solve.

Use Your External Style Sheet Any Place You'd Like

Every page that you want to use that stylesheet, should include that <link> reference. With this one tag, you can set up your entire site to use the same stylesheet. Then, any time you want to change your site, you simply edit that one stylesheet.

External style sheets are very useful to web designers, and now you know how to build an external style sheet.

©2014 About.com. All rights reserved.