CSS Font Styling

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.

CSS Font Families

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.

CSS Font Size

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; }

CSS Font Color

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.

CSS Font Weight

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!

CSS Font Style

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 Font Variant

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!