Font Styles and Colors

The templates control the color of the links in the side menu for you; these need to change with the templates' seasonal color schemes. Font styles and colors in the rest of the Web page can be controlled by you, and the best way to change these is through Cascading Style Sheets (CSS).

Font Styles

Use the font-style property to make a font italic. The default font style is normal.

h3 {font-style: italic;
	line-height: 0.9;}

#dateline {font-style: italic;}

Font Weight

The font-weight property makes the font bolder or lighter. Its values can be labels (normal, bold, bolder, lighter) or numbers (100 through 900, with 400 equal to normal).

h3 {font-weight: normal;
	font-family: Verdana, Arial, sans-serif;
	font-size: 120%;}
	
.delicate {font-weight: lighter;}

Color

The color property sets the text color; it has no effect on images. Its values can be labels of Web-safe colors (red, navy, black, etc.), RGB color values, or hexadecimal color values.

strong {color: #FF00FF;}
p.warning {color: red;}
#introduction h1 {color: rgb(255, 128, 128);}

Font Variant

The font-variant property allows fonts to appear as small caps, meaning the text is in all capital letters with the initial capital being larger.

h1 {font-variant: small-caps;}

This Heading is in Small Caps.

Using Styles and Color Wisely

Font styles and colors are not simply used for decoration. They help convey meaning and give your reader a sense of what is important and how one piece of content is related to another. Remember this general rule of thumb: If everything stands out, then nothing stands out. Keep your choices to a minimum. Before adding another color or style to your text, ask yourself whether this will add or detract from the clarity of the page.

Be particularly careful with color. Remember that some of your readers will not be able to discern colors.