DIV.courier { font-family: Courier, monospace; } 
P.arial { font-family : Arial, sans-serif; }

Font size

The text size is expressed in pixel:

SPAN.big { font-size: 24px; }

This is a <SPAN class="big">big</SPAN> word...

Font weight

The weight (thickness) of the font can be normal (thin) or bold (thick).

By default, the text font is normal and heading font is bold;
anyway, we can change the font weight if needed. For example:

H1.thin { font-weight: normal; }
P.thick { font-weight: bold; }

<H1 class="thin">A title...</H1>
<P class="thick">The font is bold.</P>

Font color

To set the font color, declare his name or RGB value.

Remember to declare also a background color or, at least, a transparent background.

H1 { background: transparent; color: rgb(51,102,204); }
DIV.color { background: rgb(255,255,153); color: rgb(0,255,102); }

<H1>A blue title...</H1>

<DIV class="color">A blue text on a yellow background.</DIV>

Italic font style

The italic font style can be declared this way:

BLOCKQUOTE { font-style: italic; }

This is a citation: <BLOCKQUOTE>using an italic font style..</BLOCKQUOTE>

Small caps

The small caps style display a kind of little uppercase letters.

It may be declared this way:

DIV.small { font-variant: small-caps; }

<DIV class="small">This is an important advice: read carefully.</DIV>

Text decoration

Text can be underlined or striked using the text-decoration properties:

DIV.underline { text-decoration: underline; }

<DIV class="underline">This is an important advice: read carefully.</DIV>

SPAN.strike { text-decoration: line-through; }

<SPAN class="strike">This is true...</SPAN>

Letter spacing

The distance between letters can be easily increased or reduced.
The default value is "normal".

H1.nor { letter-spacing: normal; }
H1.minus { letter-spacing: -3px; }
H1.plus { letter-spacing: +3px; }

<H1 class="nor">A normal spacing...</H1>
<H1 class="minus">A reduced spacing...</H1>
<H1 class="plus">A larger spacing...</H1>

Word spacing

The distance between word can be increased or reduced in the same way.
The default value is "normal".

.normal { word-spacing: normal; }
.narrow { word-spacing: -5px; }
.wide  { word-spacing: +10px; }

<DIV class="normal">A normal word spacing...</SPAN>
<DIV class="narrow">A narrow word spacing...</SPAN>
<DIV class="wide">A wide word spacing...</SPAN>

Next page :

how to align text or images.