• Indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on risque parfois d'indiquer une taille trop petite pour certains lecteurs.
• Indiquer une taille relative : en pourcentage, "em" ou "ex", cette technique a l'avantage d'être plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.

Une taille absolue

1

font-size: 16px;

1
2
3
4
5
6
7
8

p
{
    font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
    font-size: 40px; /* Titres de 40 pixels */
}

Essayer !

Une valeur relative

• xx-small : minuscule
• x-small : très petit
• small : petit
• medium : moyen
• large : grand
• x-large : très grand
• xx-large : euh... gigantesque.

1
2
3
4
5
6
7
8

p
{
    font-size: small;
}
h1
{
    font-size: large;
}

• Si vous écrivez 1em, le texte a une taille normale.
• Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em.
• Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em.

1
2
3
4
5
6
7
8

p
{
    font-size: 0.8em;
}
h1
{
    font-size: 1.3em;
}

Modifier la police utilisée

1
2
3
4

balise
{
    font-family: police;
}

1
2
3
4

balise
{
    font-family: police1, police2, police3, police4;
}

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Essayer !

1
2
3
4

p
{
    font-family: Impact, "Arial Black", Arial, Verdana, serif;
}

Utiliser une police personnalisée avec @font-face

• Il faudra que le navigateur de vos visiteurs télécharge automatiquement le fichier de la police, qui peut peser parfois 1 Mo voire plus...
• La plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur son site. Heureusement, il existe des sites comme fontsquirrel.com et dafont.com qui en proposent un certain nombre libres de droit à télécharger. Je recommande en particulier fontsquirrel.com car il permet de télécharger des packs prêts à l'emploi pour CSS 3. A noter aussi le service Google Web Fonts qui est très bien fait.
• Il existe plusieurs formats de fichier de police, et ils ne fonctionnent pas sur tous les navigateurs.

• .ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
• .eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire de Microsoft.
• .otf : OpenType Font. Ne fonctionne pas sur Internet Explorer
• .svg : SVG Font. Le seul format reconnu sur les iPhone et iPad pour le moment.
• .woff : Web Open Font Format. Nouveau format conçu pour le Web qui fonctionne sur IE9 et tous les autres navigateurs.

1
2
3
4

@font-face {
    font-family: 'MaSuperPolice';
    src: url('MaSuperPolice.eot');
}

1
2
3
4
5
6
7

@font-face {
    font-family: 'MaSuperPolice';
    src: url('MaSuperPolice.eot') format('eot'),
         url('MaSuperPolice.woff') format('woff'),
         url('MaSuperPolice.ttf') format('truetype'),
         url('MaSuperPolice.svg') format('svg');
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

@font-face { /* Définition d'une nouvelle police nommée LearningCurveProRegular */
    font-family: 'LearningCurveProRegular';
    src: url('LearningCurve_OT-webfont.eot');
    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
         url('LearningCurve_OT-webfont.woff') format('woff'),
         url('LearningCurve_OT-webfont.ttf') format('truetype'),
         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
}

h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
    font-family: 'LearningCurveProRegular', Arial, serif;
}

Essayer !

Sommaire

Mettre en italique

• italic : le texte sera mis en italique.
• oblique : le texte sera aussi mis en italique (en penchant les lettres).
• normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :
  
  Code : CSS - Sélectionner

  1 2 3 4

  em { font-style: normal; }

  
  

1
2
3
4

h2
{
    font-style: italic;
}

Mettre en gras

• bold : le texte sera en gras.
• normal : le texte sera écrit normalement (par défaut).

1
2
3
4

h1
{
    font-weight: bold;
}

Soulignement et autres décorations

• underline : souligné.
• line-through : barré.
• overline : ligne au-dessus.
• blink : clignotant. Ne marche pas sur tous les navigateurs (Internet Explorer et Google Chrome notamment).
• none : normal (par défaut).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

h1
{
    text-decoration: blink;
}
.souligne
{
    text-decoration: underline;
}
.barre
{
    text-decoration: line-through;
}
.ligne_dessus
{
    text-decoration: overline;
}

Essayer !

Sommaire

• left : le texte sera aligné à gauche (c'est le réglage par défaut).
• center : le texte sera centré.
• right : le texte sera aligné à droite.
• justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

h1
{
    text-align: center;
}

p
{
    text-align: justify;
}

.signature
{
    text-align: right;
}

Essayer !

Une image flottant à gauche


Une image flottant à droite

• left : l'élément flottera à gauche.
• right : l'élément flottera... à droite ! Oui bravo.

1. Vous appliquez un float à une balise.
2. Puis vous continuez à écrire du texte à la suite normalement.

Faire flotter une image

1

<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /> Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.</p>

1
2
3
4

.imageflottante
{
    float: left;
}

Stopper un flottant

• left : le texte se poursuit en-dessous après un float: left;
• right : le texte se poursuit en-dessous après un float: right;
• both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;

1
2
3

<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p>
<p>Ce texte est écrit à côté de l'image flottante.</p>
<p class="dessous">Ce texte est écrit sous l'image flottante.</p>

1
2
3
4
5
6
7
8

.imageflottante
{
   float: left;
}
.dessous
{
   clear: both;
}

Et voilà le travail.
On applique un clear: both; au paragraphe que l'on veut voir continuer sous l'image flottante, et le tour est joué !

Sommaire