|
June 17, 1998
 |
 |
Putting Style Sheets in Perspective
Methods of Combining The Style Sheet With HTML
|
There are four ways to combine Style Sheets with HTML.
- STYLE element
- Style Attribute
- Link element
- import using CSS @ import notation.
The Style Element
The Style element is inserted into the HEAD of a document with
all of the
rules
placed between the opening and closing
tags. Only the document that the STYLE is embedded in will
be affected.
<HEAD>
<STYLE TYPE="text/css">
H1, H2, H3 {
color: blue;
font-family: Arial;
}
</STYLE>
</HEAD>
Style Attribute
Style Sheets may be applied to individual elements by
using the Style Attribute. This may sound confusing
as most people begin by thinking in terms of a Style Sheet
as being a separate and much larger entity. Remember, though,
that a Style Sheet can be as small as one rule.
Using the Style Attribute you can bypass the
Style Element and put declarations directly into individual
start tags.
<H1 style="color: blue;
font-family: Arial">
</H1>
Obviously, if you are making document wide changes, you
won't want to use this method, but if you are only adding
style to one individual instance of an element, this
method works very nicely. Keep in mind that using the
Style Attribute will necessitate making changes to each
instance if you should later decide to change the style
of the document.
Link Element
To use the Link Element, your Style Sheet must
be a separate document.
<LINK REL = STYLESHEET
HREF = "mystylesheet.css"
Type = "text/css"
>
You must include the "rel=stylesheet" attribute or the
browser will not load the style sheet.
Import Using CSS @ import Notation.
When a document needs additional style, above and beyond
what is in the document style sheet, you will need to use
the @import declaration rather than the LINK element to
pull it into your document.
The @import should be the first declaration in
your Style Sheet. Local rules, (rules contained in the
document), will over-ride the @import rules.
Multiple @import declarations may be used, with each
subsequent @import declaration over-riding the preceding
one.
<STYLE type="text/css">
@import "differentstyle.css";
H1 { color: blue;
font-family: Arial
}
</STYLE>
Additional Resources:
Selectors
Putting Style Sheets in Perspective: Table of Contents
Inheritance
|
