CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners


This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

CSS: CSS Font and CSS Text Styles

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:



Cascading Style Sheets: an Interactive Tutorial

CSS Font and CSS Text Styles

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

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!


Copyright © Dave Kristula. All Rights reserved.