CSS Tutorial : Specifying the Style
The browser needs to know what style sheet or style elements are being specified. There are several ways style can be defined:
Style sheet information can be placed in the HTML file itself. The following tags goes in the HEAD portion of the HTML document:
<!--
...style code goes here...
-->
</style>
If you are familiar with JavaScript you will notice the same use of comments to fool older browser to ignore the extra code. The HTML specification states that browsers are to ignore tags they do not understand. Thus, an older browser reading this would ignore the STYLE tag, and then bypass the style code because it is between HTML comments (<!-- -->)
Instead of embedding the style code in each HTML file, you can put all of the style code in its own text file and link each document to that file. This is a great way to share the same style throughout a whole site.
The tag to link a style sheet is placed in the HEAD of the HTML document:
You can also combine the above two items by importing a separate style sheet into an individual HTML file. For example you can import a basic sheet, and then add extra styles to it.
The import command is placed in the STYLE section mentioned above and should be the first thing in that section:
<!--
@import url(style.css);
... rest of style code goes here
-->
</style>
Style can also be specified on a per HTML element basis. Below is an example of specifying a 1" margin on one specific paragraph.