Example of <h1> without applying any styles. What you get depends on your browser's defaults.

Example of <h1> with applying an inline style

Warning: not all these examples will work in Netscape 4! Many don't work in IE 4 or 5 either. See notes.

Normal type without using Cascading Style Sheets.


Absolute Font Sizes

This font rendered 3 mm high regardless of screen resolution.

This font rendered 1/4 inch high regardless of screen resolution.

This font rendered 18 points high regardless of screen resolution. 18 points is the same as 1/4 inch.


Relative Font Sizes

For comparison here is an M and an x used for em and ex values.

This line is 2 em units.

This line is 2 ex units. ex units are not very useful.

This line is 175% the size of a default line.

This line is specifies a font-size: large.


Spacing Examples

Normal word spacing

Here is an example of double word spacing in action. But it doesn't seem to work in either Netscape 4.x or IE 5.5!

Here is an example of double letter spacing in action. This does not work in Netscape 4.x so it's probably CSS-2.

Here is an example of 1.5 line spacing. It's like using an old fashioned typewriter! The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.


Font Style Examples

Italic using a Cascading Style Sheet

Oblique using a Cascading Style Sheet. Not supported in Netscape 4.x.


Font Weight Examples

Font Weight of 100

Font Weight of 300

Font Weight of 600

Font Weight of 900


Text Align Examples

Text aligned left using a Cascading Style Sheet.

Text aligned right using a Cascading Style Sheet.

Text aligned center using a Cascading Style Sheet.

Text justified using a Cascading Style Sheet. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.


Vertical Alignment Examples

Only super and sub seem to work in IE 5.5. None of them work in Netscape 4.x.

No alignment Aligned to baseline

No alignment Aligned to bottom

No alignment Aligned to middle

No alignment Aligned to sub

No alignment Aligned to super

No alignment Aligned to text-bottom

No alignment Aligned to text-top

No alignment Aligned to top

No alignment Aligned to 50%

No alignment Aligned to -50%


Indentation Examples

Example of a 10% paragraph indent using a Cascading Style Sheet. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

Example of a 5em paragraph indent using a Cascading Style Sheet. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

Example of a -10% paragraph indent using a Cascading Style Sheet. This is a hanging indent. Note the first few words are cut off in IE as well as Netscape so it's not implemented correctly. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.


Text Decoration Examples

No text decoration.

Overline text decoration.

Underline text decoration.

Line-through text decoration.


Text Transformation Examples

no text transformation.

capitalize text transformation.

uppercase text transformation.

LOWERCASE TRANSFORMATION.


Font Variant Examples

Normal Font Variant.

Small-Caps Font Variant. Doesn't work in Netscape.


Font Attribute Examples

Font: italic small-caps bold 3em/0.8em Times Roman, serif

Valid XHTML 1.0!