hitmill.com
link to hitmill.com home page

 

CSS Tutorial:
Linking to an External Style Sheet

This is an introductory, entry-level tutorial about how to link an external .css file (Cascading Style Sheets) into an HTML document.

The easiest external style sheet to link to is the one you will make yourself and place into the same folder as your Web page files. To do this you simply make a list of CSS rules without using any HTML coding and save this file as .css and save as "all files", not "text files". The extension .css means it is a CSS file, a style sheet. Move this file that you created with a simple text editor such as NotePad into the same folder as your Web page files. If you named this file something like "mystyles.css' you can code a line of reference in the HEAD section of the HTML document as follows:
That's all there is to it. You're done. Each page that has the link coded will be using the style sheet rules from "mystyles.css" in the same folder. The internal (in-document) style sheet that you made in the previous lesson will over-ride the external style sheet. The persistent style in this case will be the in-document style sheet. It over-rides any external style sheets.


 

mystyle.css  (this filename is not part of the file, only used when saving)

BODY {font-size:1em; font-family:Arial, Helvetica, sans-serif;}
H1,H2{color:#000008;}
H5{font-size:0.8em;}
P {font-size:1em; margin-left:110px; margin-right:110px; font-weight:400; line-height: 1.2;}

The only things that are in this file are selectors and declarations. Do not include the filename as I have shown in the example. Only CSS rules belong in a .css file. No HTML, just CSS rules. Any simple text editor will work just fine to create your external .css file. Do not use style rules that will not be in your documents. I used NotePad on my PC to create my own external .css file. You may link to more than one external file. You may designate alternate style sheets by using the following link in the HEAD section of your document:
<LINK REL="ALTERNATE STYLESHEET" TYPE="text/css" HREF="[use full url of stylesheet location]"> An HREF example for a style sheet in a different folder would simply be the full url of that location: "http:www.hitmill.com/style1.css".

You could also link to an external style sheet at W3.org but remember that anytime you link to an external file that there will be a longer download time for the first page. The upside is that after the first page has cached, the other pages will load quickly because the external style sheet is already within the cache memory.

Here's an example of an ALTERNATE STYLESHEET link to one of the style sheets at W3.org:
<LINK REL="ALTERNATE STYLESHEET" TYPE="text/css"
HREF="http://www.w3.org/StyleSheets/Core/Swiss"> In the future, the user will be able to select from a list of your alternate stylesheets so you may want to start your own collection of style sheet rules, and of completed style sheets. This will be a nice addition to the technology of browsers and CSS specifications as Web technology improves. Remember now when coding HTML that if you are using style sheets, only code the actual HTML structure and do not use style attributes such as <FONT>.

Errors: When first learning to use CSS rules, the new student will make punctuation errors. Look carefully at punctuation in the CSS rules and try to check your punctuation carefully before saving your file. I have found from my own errors, that if I so much as leave off one semicolor in the CSS rules, and save the file and refresh the browser, that an entire Web page has suddenly disappeared without a trace. When this happens, the first suspect is a missing or incorrect punctuation mark. It may even be a quote mark if you use inline CSS rules. (Once the punctuation is corrected, the Web page will suddenly appear again, upon clicking Refresh, or Reload.) Look for faulty punctuation when you incur strange behavior, before you check for other errors.

[BACK]  [TOP]  [CONTENTS]


 

 

 
Contact
 
Updated 11 April 2006
© hitmill.com
All Rights Reserved