Font-family

  Back   HOME NEXT | WORD 

There are two types of font-family values:

  1. family-name, like "times", "courier", "arial", etc.
  2. generic-family, like "cursive", "fantasy", "serif", "sans-serif", "monospace".

Note:

Example

body
{
font-family: courier, serif
} 
p
{
font-family: arial, "lucida console", sans-serif
}

CSS Font Color

Although the colour of the text seems like it would be part of CSS Font, it actually is a standalone attribute in CSS. In other words, the colour value is not grouped with other font values. Example :
p {font :120% arial, "lucida console", sans-serif ; color: #0000ff;}

CSS Font Size

You can manipulate the size of your fonts by using values, percentages. Percentages are great when you want to change the default font.

CSS Code:

p { font-size: 120%; }
ol{ font-size: 10px; }

font-family Examples:

Provide a list of similar fonts for the browser to use the first available.
<p style="font-family : geneva, helvetica, sans-serif;">
This paragraph would like to be geneva, but may be another sans-serif font.

<style type="text/css">
body   { margin: 10px; 
       color: black; 
       background: #FFCC33; 
       font-family: verdana, geneva, arial, sans-serif; }

.serif  { font-family: georgia, palatino, times new roman, serif; }
.sans  	{ font-family: verdana, geneva, helvetica, arial, sans-serif; }
.fixed  { font-family: courier, courier new, monospace; }

</style>