Page 37 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF
P. 37

When viewed in a browser you can see that in this file the STYLE command only affects the
               element that it is applied to.

               Inline Styles are used rarely because they are as much work as using the < F O N T >  tag. They
               are sometimes used to override styles from embedded style sheets or from a linked
               cascading style sheet; this will be demonstrated later.




               Embedded Style Sheets

               To use an embedded style sheet, a style block (delimited by the < S T Y L E >  and < / S T Y L E >
               tags) is defined and placed within the < H E A D >  section of the document. This block consists
               of a set of style rules, where each rule defines a style for an HTML element, group of
               elements, or class.


               < h t m l >
               < h e a d > < t i t l e > A n o t h e r  C S S  E x a m p l e < / t i t l e >
               < s t y l e  t y p e = " t e x t / c s s " >
               < ! - -
               b o d y  {  f o n t - f a m i l y :  V e r d a n a ;  f o n t - s i z e :  1 2 p t ;  c o l o r :  # 0 0 3 3 6 1  }
               h 1      {  t e x t - i n d e n t :  4 ;  c o l o r :  # 0 0 0 0 0 0 ;  t e x t - d e c o r a t i o n :  u n d e r l i n e ;
                           f o n t - v a r i a n t :  s m a l l - c a p s ;  f o n t - s i z e :  2 4 p t ;
                           l e t t e r - s p a c i n g :  1 p t ;  f o n t - w e i g h t :  b o l d  }
               a           {  c o l o r :  # F F 0 0 0 0  }
               a : h o v e r  {  b a c k g r o u n d - c o l o r :  # 0 0 0 0 8 0 ;  c o l o r :  # F F F F F F ;
                             f o n t - w e i g h t :  b o l d ;  t e x t - d e c o r a t i o n :  n o n e ;  }
               . h t m l   {  f o n t - f a m i l y :  C o u r i e r  N e w ;  c o l o r :  # 0 0 0 0 0 0 ;
                             f o n t - w e i g h t :  b o l d  }
               - - >
               < / s t y l e >
               < / h e a d >
               < b o d y >
               < h 1 > A n o t h e r  C S S  E x a m p l e < / h 1 >
               < p > N o t i c e  t h a t  a n  e m b e d d e d  s t y l e  s h e e t  is  contained  within  the  <span
               c l a s s = " h t m l " > & l t ; h e a d & g t ; < / s p a n >  e l e m e n t  a n d  t h a t  i t  c a n  e i t h e r
               a f f e c t  t h e s e  e l e m e n t s  u n i l a t e r a l l y  ( s u c h  a s  t h e  < s p a n
               c l a s s = " h t m l " > & l t ; h 1 & g t ; < / s p a n >  e l e m e n t )  o r  c a n  b e  a p p l i e d  o n  e v e n  a
               w o r d - b y - w o r d  b a s i s .
               < p > < a  h r e f = " h t t p : / / w w w . L o u d O f f i c e . c o m " > w w w . L o u d O f f i c e . c o m < / a > .
               < / b o d y >
               < / h t m l >


               LoudOffice.com Guide to HTML – Part II                                               Page 37
   32   33   34   35   36   37   38   39   40   41   42