Quick HTML


Font family

There are three family of fonts:
  • serif, using typefaces with serif (little graphic decoration)

  • sans-serif, using typefaces without serif

  • monospace, using a fixed-width typeface

These are the fonts common to all systems (Windows, Unix, Mac):

Times New Roman

Trebuchet MS

Courier New

To set a font, declare his name and, at least, an alternative (another font or a generic family):
DIV.courier { font-family: Courier, monospace; } 
P.arial { font-family : Arial, sans-serif; }
<DIV class="courier">This font is Courier.</DIV>
<P class="arial">This font is Arial.</P>
This font is Courier.

This font is Arial.

Font size

The text size is expressed in pixel:
SPAN.big { font-size: 24px; }
This is a <SPAN class="big">big</SPAN> word...
This is a big 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>

A title...

The font is bold.

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>

A blue title...

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

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>
This is a citation:
using an italic font style..

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>
This is an important advice: read carefully.

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>
This is an important advice: read carefully.
SPAN.strike { text-decoration: line-through; }
<SPAN class="strike">This is true...</SPAN>
This is true...

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>

A normal spacing...

A reduced spacing...

A larger spacing...

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>
A normal word spacing...
A narrow word spacing...
A wide word spacing...

Next page :

how to align text or images.

|   Back   |   Index   |   Next   |