CSS font-family

This is a paragraph. default font

This is a paragraph, shown in the Times New Roman font.font-family:Arial,Helvetica,sans-serif;

This is a paragraph, shown in the Arial font. font-family:Arial,Helvetica,sans-serif;

This is a paragraph, normal. font-style:normal;

This is a paragraph, italic. font-style:italic;

This is a paragraph, italic. font-style:italic;font-size:10px;

This is a paragraph, italic. font-style:italic;font-size:20px;

This is a paragraph, italic. font-style:italic;font-size:30px;

This is a paragraph, italic. font-style:italic;font-size:40px;

This is a paragraph, oblique. font-style:oblique;font-size:10px;

This is a paragraph, oblique. font-style:oblique;font-size:20px;

This is a paragraph, oblique. font-style:oblique;font-size:30px;

This is a paragraph, oblique. font-style:oblique;font-size:40px;

My name is Hege Refsnes. font-variant:normal;

My name is Hege Refsnes. font-variant:small-caps

This is a paragraph. font-weight:normal;

This is a paragraph. font-weight:lighter;

This is a paragraph. font-weight:bold;

This is a paragraph. font-weight:bolder;

This is a paragraph. font-weight:900;

This is a paragraph. font: 14pt/16pt fantasy, cursive, Serif

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 15px arial,sans-serif;

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. font:italic bold 12px/30px Georgia,serif;

The styles for this text has been specified with the 'font' shorthand property.

This is heading 1. Font size set to 40px

This is heading 2. Font size set to 30px

This is a paragraph. Font size set to 14px

This is heading 1. font-size:2.5em;

This is heading 2 font-size:1.875em;

This is a paragraph. font-size:0.875em;

Serif Fonts

Sans-Serif Fonts

Monospace Fonts

CSS text formatting

CSS text-align Example, text-align:center;

Align right, text-align:right;

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'

This is heading 1, text-decoration:overline;

This is heading 2, text-decoration:line-through;

This is heading 3, text-decoration:underline;

This is heading 4, text-decoration:blink; The "blink" value is not supported in IE, Chrome, or Safari.

This is some text. text-transform:uppercase;

This is some text. text-transform:lowercase;

This is some text. text-transform:capitalize;

text formatting formatting

text-indent: 50px;text-align:justify;letter-spacing:3px; This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the

text-indent: 50px;text-align:justify;letter-spacing:5px; This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the

text-indent: 10px;text-align:justify;letter-spacing:10px; This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the

word-spacing:10px; This is some text. This is some text.

word-spacing:20px; This is some text. This is some text.

word-spacing:30px; This is some text. This is some text.

line-height:90%;This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.

line-height:200%;This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height.

line-height:200%; vertical-align:text-top; An A text-top alignment. A text-top alignment. A text-top alignment. A text-top alignment. A text-top alignment. A text-top alignment. A text-top alignment. A text-top alignment. A text-top alignment. A text-top alignment. A text-top alignment.

line-height:200%; vertical-align:text-bottom; An A text-bottom alignment. A text-bottom alignment. A text-bottom alignment. A text-bottom alignment. A text-bottom alignment. A text-bottom alignment. A text-bottom alignment. A text-bottom alignment. A text-bottom alignment. A text-bottom alignment.

This is some text. text-transform:uppercase;

This is some text. text-transform:lowercase;

This is some text. text-transform:capitalize;

Some text. Default writing direction.

Some text. Right-to-left direction. direction:rtl;

My mother has light blue eyes and my father has dark green eyes.