Changing the size, color, family and other font styles is made very simple with CSS. Unique font properties can be applied to any element containing font, or applied to an entire website using the body { } selector in an external stylesheet.
There are 6 fonts that are available to most browsers/computers. The available fonts are:
| Font | Font-Family | Description |
|---|---|---|
| Times New Roman | Serif | Characters Have Small Lines On Ends |
| Georgia | Serif | Characters Have Small Lines On Ends |
| Arial | Sans-serif | Characters Without (Sans) The Small Lines On Ends |
| Verdana | Sans-serif | Characters Without (Sans) The Small Lines On Ends |
| Courier New | Monospace | Characters Are All The Same Width |
| Lucida Console | Monospace | Characters Are All The Same Width |
The font is set using the font-family property. Since not all browsers/computers have all 6 fonts available to them, more than one of these 6 fonts can be set at a time, so that a second or third preference can be used if the first is not.
body { font-family: Verdana, Arial, "Times New Roman"; }
The code above sets Verdana as the default font for the entire webpage or website, with Arial and Times New Roman as the runners-up if Verdana is not available. "Times New Roman", or any other font with spaces in its name, must be enclosed in quotation marks.
Font size is set using the font-size property, along with one of the following values.
| Value | Description |
|---|---|
| length | Fixed Font Size In px, cm, pt, em, Etc. |
| % | Percentage of Parent Element's Font Size |
| small | Sets Font Size to "Small" |
| smaller | Sets Font Size to "Smaller" |
| x-small | Sets Font Size to "X-Small" |
| xx-small | Sets Font Size to "XX-Small" |
| medium | Sets Font Size to "Medium" |
| large | Sets Font Size to "Large" |
| larger | Sets Font Size to "Larger" |
| x-large | Sets Font Size to "X-Large" |
| xx-large | Sets Font Size to "XX-Large" |
body { font-size: 14px; }
h1 { font-size: 250%; }
p { font-size: large; }
Font colors are set using the "color" property, which accepts three types of values: color names, hexadecimal values, and RGB. The following code will give some examples:
<p>
<span style="color: red;"> </span><br />
<span style="color: #0096C5;"> </span><br /><br />
<span style="color: rgb(255, 153, 0);"> </span><br />
<span style="color: #693;"> </span>
</p>
Why did the boy bring a ladder to school?
He wanted to see what High School was like!
What dog keeps the best time?
A watch dog!
A list of web-safe colors can be found at our HTML tutorial.
The thickness of a font is controlled by the font-weight property. This property accepts numerical values between 100 and 900, or any of the three reserved words "normal", "bold" and "bolder" at a time.
<p>
<span style="font-weight: bold;">Why was the broom late?</span><br />
<span style="font-weight: normal;">It over swept!</span>
</p>
Why was the broom late?
It over swept!
The font-style property determines whether or not the font is italicized. This property accepts any of the three reserved words "normal", "italic" and "oblique" at a time.
<p>
<span style="font-style: italic;">Why do cows use the doorbell?</span><br />
<span style="font-style: oblique;">Because their horns don't work!</span>
</p>
Why do cows use the doorbell?
Because their horns don't work!
CSS gives you the option of converting all characters to small capitals by using the font-variant property. This property accepts any one of the two reserved words "normal" and "small-caps" at a time. Note that any capitals that this property is applied to appear larger than the small caps, and that this property may not work on all fonts.
<p>
<span style="font-variant: small-caps;"> </span><br />
<span style="font-variant: normal;"> </span>
</p>
What do birds need when they are sick?
A tweetment!