Page 39 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF

elements in the
Notice that the Embedded Style Sheet below will make all of the < H 2 >
document display in blue, except for any < H 2 > that contains an inline style command. Inline
style commands takes precedence over the embedded commands if they are in conflict.

< S T Y L E T Y P E = " t e x t / c s s " >
< ! - -
H 2 { c o l o r : b l u e ; }
- - >
< / S T Y L E >

Linked Style sheets
The easiest method for adding style to multiple HTML documents is to use Linked Style
Sheets. A Linked Style Sheet is a separate file that contains all of the style information that
is referenced in each page that uses it.

Below is an example of a separate Cascading Style Sheet, w e b - s t y l e . c s s :

< s t y l e >
h 1 { c o l o r : # 8 0 0 0 0 0 }
h 2 { c o l o r : # 0 0 0 0 8 0 }
h 3 { c o l o r : # 9 9 0 0 0 0 }
b o d y { f o n t - f a m i l y : v e r d a n a , a r i a l , t a h o m a ; f o n t -size: 10pt }
a { f o n t - w e i g h t : b o l d }
a : l i n k { c o l o r : # 0 0 3 3 7 5 }
a : v i s i t e d { c o l o r : # 0 0 3 3 7 5 }
a : h o v e r { c o l o r : # f f 0 0 0 0 ; t e x t - d e c o r a t i o n : n o n e }
a : a c t i v e { c o l o r : # f f 0 0 0 0 }
< / s t y l e >
MAKE SURE YOU SAVE WITH A .CSS EXTENSION

To link the style sheet to the HTML page you use a < l i n k > element in the < h e a d > of your
document. The required attributes are h r e f = " u r l " , r e l = " s t y l e s h e e t " , and t y p e =
" t e x t / c s s " . For example, to use the w e b - s t y l e . c s s file above, the following tag would
be used:

< l i n k r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = " w e b - s t y l e . c s s " >

CSS Classes
CSS classes allow you to define a standard CSS element that can be used for any HTML
element. CLASS is an HTML attribute that has no display characteristics and can be applied
to any element, like this:
< h 2 c l a s s = " s a l e s " > S t y l e c l a s s ‘ s a l e s ’ a p p l i e d h e r e . < h 2 >
< p c l a s s = " s a l e s " > T h e c l a s s ‘ s a l e s ’ c a n a l s o b e u s e d h e r e . < / p >
The CSS class ‘sales’ would be declared as follows:

< S T Y L E >
< ! - -
. s a l e s { c o l o r : l i m e ; t e x t - d e c o r a t i o n : n o n e }
- - >
< / S T Y L E >
NOTE: THAT THE SELECTOR BEGINS WITH A PERIOD (.),
WHICH IS THE REQUIRED SYNTAX FOR CLASS NAMES.

LoudOffice.com Guide to HTML – Part II Page 39