css fonts

css font properties set the font face,font size,font color,font boldness.

css font-families

css font-families are divided into two types:-

  • font-family - the name of a font family of choice(e.g 'Helvetica' or 'arial')
  • generic-family -generic families can best be described as groups of family-names with uniformed appearances(like "serif", "sens-serif","fantasy")

CSS Serif Font    serif font

CSS Serif Fonts example    serif font (serif in red)

CSS sens-serif font - family    sens-serif font

generic familyfont familydescription
 serif times new roman
 minion web
 raanana
 sens-serif helvetica
 attika
 ms tahoma
sens-serif fonts are simply plain type font
 monospace courier
 prestige
 everson mono
monospace fonts have the same fixed width.

Css - font-family

the font-family property is used to change the face of a font.

if the font family names contain any spaces they should be enclosed in quotes.

more then one font family is specified in a comma-separated list.

              
              <style type="text/css">
              
                  p  {font-family:gill,helvetica,sans-serif; }
                  
                  h1 {font-family:"times new roman",serif; }
                  
                  h3 {font-family:arial,verdana,fantasy; }
                  
          </style>

Css font-style

the css font-style property is used to make a font italic or oblique.

               h1.normal  { font-style=normal; }
               
               h2.italic  { font-style=italic; }
               
               h3.bolique  { font-style=oblique; }

Css font-size

the font-size property is used to sets the size of the text.

the font-size value can be absolue or relative size.

the font-size value can be set with pixels or em.

                 body{font-size:100%; }
                 
                 h1{font-size:30px; }
                 
                 h2{font-size:20px; }
                 
                 h3{font-size:2.5em; }

Css font shorthand property

the 'font' property is a shorthand property for setting 'font-style',   'font-variant', 'font-weight','font-size', 'font-family' at the same place in the style sheet.

               body {font:300 italic 1.3/1.7em "FB armada",sans-serif; }
              
               h1 {font:italic small-caps bold 15px georgia; }

all css font properties -

font propertydescription
font set all font properties in one declaration.
font-family specifies the font family for font.
font-style specifies the font style for text.
font-size specifies the font size of text.
font-weight set the font bolder or lighter.
font-variant it used to create a small-caps effect.
font-stretch stretches the font by adjusting its letter spacing.