Style sheets can be placed in three places in a document: in the HEAD element (<head> … </head>), in an external file, or within an individual element. Style calls placed within an individual element will only affect that element, while other style calls affect the entire page or any page that loads the style sheet.
Styles Within the Elements
The example on page one of this lesson shows a style inside an element. In the H4 element to be precise:
<h4 style="color: #0000ff;">another blue headline</h4>
Creating styles as an attribute of an element is a quick way to generate the style you would like without impacting your entire page. One common way this is used is to hide random links throughout the page. For the links you would like hidden, you would give them a style of text-decoration: none;. For example, put this HTML in your web page:
<a href="http://webdesign.about.com/od/css/a/aa011899b.htm">This link has the default decoration</a>
<a href="http://webdesign.about.com/od/css/a/aa011899b.htm" style="text-decoration: none; color: #000000;">This link, while still a link, is not underlined and has a color of black.</a>
Styles Within the HEAD of the Document
To create a style sheet to affect the existing page, you place the CSS in the HEAD element of the page. You surround the CSS with a STYLE element (<style> … </style>).
<head>
<style>
h4 { color: blue; }
</style>
</head>
All you need are the beginning and ending <style> and </style> tags. If you're writing HTML5, you don't need to include anything else, but in HTML 4, you should include the MIME type inside a type attribute (<style type="text/css">. And if you think you will be supporting browsers that are 3–5 or more years out of date, you should enclose your styles in a comment (<!-- put styles here -->)
External Style Sheets
You can create a separate document with all of your style information in it and either link or import it into your document. These are called external style sheets. If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.
An external style sheet is just a text file with CSS selectors and properties in it. The browser reads these selectors in order from top to bottom. You write the CSS the same way you write the styles in a style attribute or inside the STYLE tag in the HEAD of the document.
To change all H4 headlines to blue and all paragraph text to red in an external style sheet you would write:
h4 { color: blue; }
p { color red: }
And then save that file to a file named filename.css. You can change the filename to anything you want. I usually use the word “styles” i.e. styles.css, but you can create external style sheets for various purposes and name them all for their purpose i.e. layout-styles.css and font-styles.css, etc.
Linking an External Style Sheet
The most common way to include an external style sheet is with the LINK element. You call a linked style sheet like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Importing an External Style Sheet
Another way to load external style sheets is with the @import command. This allows you to separate your style sheets into multiple documents, while only having one style call in the document itself. You import style sheets like this:
@import url(http://yoursite.com/stylesheet.css);
Then you place that line either inside a STYLE element in the HEAD of your document:
<style>
@import url(http://yoursite.com/stylesheet.css);
</style>
Or anywhere inside a stylesheet document (named filename.css).
