 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>
|
