Using External Style Sheets
The preceding example only changes a few aspects of the HTML document's appearance, but it adds about 10 lines to its length. If you were trying to make a very stylish page and had defined new styles for all of the attributes, you would end up with a very long and complicated document.
For this reason, you can use a CSS style sheet from a separate file in your document. This makes your document short and to the point. More importantly, it enables you to define a single style sheet and use it to control the appearance of all of the pages on your site.
Linking to External Style Sheets
You can refer to an external CSS file by using the <link> tag in the <head> section of one or more HTML documents:
<link rel="stylesheet" type="text/css" href="style.css">
This tag refers to an external CSS style sheet stored in the style.css file.
By the Way
Using external style sheets is a good practice because it separates content (HTML), presentation (CSS), and behavior (JavaScript). See Hour 15, "Unobtrusive Scripting," for more information on best practices.
Creating External .css Files
After you've linked to an external .css file, you need to create the file itself. The external style sheet is a simple text file that you can create with the same editor you use for HTML documents.
The .css file should contain a list of CSS rules, in the same format you would use between <style> tags. However, the file should not include <style> tags or any other HTML tags. Here is what the styles from the previous example would look like as an external style sheet:
BODY {color: blue}
P {text-align: center;
margin-left:20%;
margin-right:20%}
H1, H2, H3 {color: red}
UL {color: green;
font-weight: bold}
|
