davesite.com / webstation / css

Cascading Style Sheets: An Interactive Tutorial for Beginners

CSS Code Tutorial Chapters:

CSS Code Tutorial Chapters:

  1. Introduction
  2. Basics of CSS
  3. All About Selectors
  4. Background and Color
  5. Fonts and Text
  6. Links
  7. Lists
  8. Margin
  9. Padding
  10. Border
  11. Good CSS Design
  12. Resources

visit our other tutorials:

web design tutorial
html code tutorial

[ jump to top ]
Cascading Style Sheets: an Interactive Tutorial

Font and Text

advertisement

You are probably already familiar with both the color: and background-color: properties from earlier chapters. The four common color formats are as follows:

Name
the 16 common VGA colors named in most browsers are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Hexadecimal
format #xxxxxx ( #000000 - #FFFFFF )
Red/Green/Blue Values
(x, x, x) where each x is that colors value from 0 - 255
Red/Green/Blue Values
(x%, x%, x%) where each x is a value from 0.0% to 100.0%

Hexadecimal is the most common format for color. It allows easy matching to graphics' colors, because all major graphics software support hexadecimal color.

The font-family property is equivalent to the face property in the <font> tag. If you use this property you need at least one font or font-type listed. It is recommended to have 2 or 3 different fonts, the last of which is a standard font type of one of the following:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

If you want all paragraphs to first try to use Times, and if Times is not on the system, use a serif if available, you could use:

p { font-family: Times, serif; }

(You'll commonly see this as p { font-family: 'Times New Roman', Times, serif; } because Macs and PCs name the Times font differently.)

The font-style property can use one of three values: normal, italic, or oblique.

The font-weight property can use one of four build in values: normal, bold, bolder, lighter.

It can also use a value in the range of 100 to 900, in increments of 100. (For a baseline, normal is defined as 400, and bold is defined as 700).

There is a font-variant property, which is merely either normal or small-caps.

The last individual font property is font-size. It can be relative to the text around it (smaller or larger), a set size in pt (e.g. 14pt) or em (e.g. 1.5em) or an absolute size by text description, from one of the following:

xx-small, x-small, small, medium, large, x-large, xx-large

The font also has a combination property called font, which is in this format:

[ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family

So if simply wanted a bold 12pt Serif, you could use:

font: bold 12pt serif;

bold 12pt serif

If you wanted it double-spaced, you could add the line-height:

font: bold 12pt/24pt serif;

this is a double-spaced
bold 12 pt serif

advertisement

affiliate_link

< Ch. 4 part 2 > Ch. 5 part 2

Copyright © 2002 Dave Kristula. All Rights Reserved.