Categories:
Partners

4 ways of defining style

The browser needs to know what style sheet or style elements being specified. There are several ways style can be specified:

1. embedding a style
Style sheet information can be placed in the HTML file itself. The following tags goes in the HEAD portion of the document:

<STYLE TYPE="text/css">
<!--

...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 could would ignore the STYLE tag, and then bypass the style code because it is between HTML comments (<!--    -->)

2. Linking to a separate style sheet file
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. The following tag to link a style sheet is placed in the HEAD of the HTML document:

<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">

style.css would simply be a text file containing your style definitions (minus the surrounding <style> tags).

3. Importing a style sheet
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 on extra styles to it. The import command is placed in the STYLE section mentioned above and should be the first thing in that section:

<STYLE TYPE="text/css">
<!--

@import url(style.css);

... rest of style code goes here

-->
</STYLE>

4. Inline 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.

<P STYLE="margin: 1.0in">This paragraph will have 1" margins all around.</P>
Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.