What is CSS? - Placement of CSS Elements (
Page 3 of 5 )
Style sheets can be place in three places in a document, in the <head>, in an external file, or within an individual tag. Style calls placed within an individual tag will only affect that tag, while other style calls affect the entire page or any page that loads the style sheet. For the above example, while the demonstration showed a style call used within a style sheet created either in the head of the document or on another page, the actual style use was within the H4 tag itself. For example:
<h4 style="color: #0000ff;">another blue headline</h4>
Creating styles as an attribute of a tag 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:
This link has the default decoration
This link, while still a link, is not underlined and has a color of black.
(Editor's note: The above two lines are not links.)
To create a style sheet within the header of your HTML document, you enclose it in <STYLE> tags. It is a good idea to define the mime type of the styles you are creating (usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example:
<head>
<style type="text/css">
<!--
H4 { color: blue; }
-->
</style>
</head>
Finally, you can create a separate document with all of your style information in it and either link or import it into your document. 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.
Linking a Style Sheet
The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Importing a Style Sheet
Importing style sheets are only currently supported by Internet Explorer 4.0. They allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example:
<style>
@import URL (http://yoursite.com/stylesheet.css);
H4 { color: #0000ff; }
</style>
