External, or linked style sheets are ideal when the same style is applied to an entire website, as the style can be maintained by editing a single file. There are two parts to external style sheets, the link to the CSS file, and the CSS file itself.
External style sheets are linked to an HTML file by adding the <link> tag into the head of each HTML file.
<html>
<head>
<link rel="stylesheet" type="text/css" href="myboringfilename.css">
</head>
<body>
<p>You page content goes here.</p>
</body>
</html>
Inside the link tag, the "rel" attribute defines the relation between the current document and the linked document. The "type" specifies the type of document linked, and the "href" is the file name and path to the css file.
We also need the external CSS file that is being linked to. Any CSS stylesheet, containing only CSS, must be identified by a ".css" file extension, similar to how an HTML file is identified by its ".html" file extension. I would not recommend the use of word processors (i.e. Microsoft Word, StarOffice Writer, or Abiword) to save or create CSS files. Text editors such as Notepad or Wordpad on Windows machines, and Kwrite or Kate on Linux machines, are a better option. When saving the file, make sure that you type in the file name and the extension (example: myboringfilename.css) and that if there is a "Save as Type" dropdown option on the Save menu, that the type is set to "All Files".
Once your CSS file is created, you can test it by saving the HTML code above into an HTML file, and saving the following example to you myboringfilename.css file:
p {
border: 1px dotted #000000;
}
Now try opening the HTML file in your browser and see what happens... this is not a science experiment, so I can assure you that even if you don't get the result that you think you are going to get, your monitor will not explode.
