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. This is easy to do with external style sheets.
First Write Your 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 in the head of your document. For example:
body {
background-color : #fff;
color : #0c0;
}
Once you've written your entire style sheet, save it as a .css file. When I am editing a site on my local computer, I save all my files in a mirrored directory structure. And I like my style sheets to be saved in a /styles directory. So that's where I save it on my local drive as well. For example:
styles/mainstyles.css
Link to the Style Sheet
To link to an external style sheet, you use the <link> element. The <link> element belongs in the head of your HTML document. Use the following attributes to link to a style sheet:
- href="path to stylesheet"
- rel="stylesheet"
- type="text/css"
For example:
<link href="/styles/mainstyles.css" rel="stylesheet" type="text/css" />
Note: 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.
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.
