Formatting Text with CSS

CIW Course in a Nutshell

Setting Fonts, Font Size and Font Decoration

Formatting the text displayed on your Web page is, perhaps, the thing you are most likely to use cascading style sheets for. This may include the pseudo-animated effects such as those employed by the navigation links on this page. Yes! they are done with CSS.

Font settings and Text settings only apply to certain elements and it is easy to forget this and try to apply font settings to something like a <DIV> element and wonder why it has no effect. It must be easy because I've done it countless times.

body {
	font-family: verdana, arial, ms sans serif;
	font-size: 12pt;
	font-weight: normal;
	text-align: justify;
	text-decoration: none
}

font-family sets the font to be used. I have specified three fonts, as Verdana and Arial may not be installed on the client's computer. CSS looks along the supplied list of fonts for the first one that is installed and uses this one. I have specified the font-size as 12pt (12 point). My documentation states that the font size should be a number, corresponding to the browser's font number, or a pixel size (12px). I have found that most browsers are happy to accept point sizes, which seem to work better than pixel sizes. Using the browser font number is, in my opinion, dangerous as different browsers will use different font numbers.

Pseudo-Classes

Pseudo-classes are classes for intangible characteristics, and most browsers will support the following for anchor text, or hyperlinks.

link - links that haven't been visited or aren't being pointed to
visited - a link that has, previously, been clicked
focus - a link selected via the keyboard
hover - a link that is being pointed to by the mouse
active - a link that has been clicked

Below is the code used to display the navigation links to the left on this page:

#navinner a {
	display: block;
	margin-left: 5px;
	margin-top: 3px;
	color: #606060;
	text-decoration: none;
	font-weight: bold;
	font-size: 11pt
}

#navinner a:hover {
	display: block;
	margin-left: 5px;
	color: #FF0000;
	text-decoration: underline
}

Since a link may have more than one state at any given time, it is important that they are defined in the above order.