Exemples CSS




  1. A propos de cette page !

Vous trouverez ici des exemples de feuilles de styles, ainsi que leur résultat. Le code présent correspond à celui que l'on trouverait dans une feuille de style externe. Le trait sépare la partie du codage de feuille de style du code HTML qui permet de voir le résultat...



  2. Modifier les styles des titres

Ce code permet de modifier le style par défaut des balises H1 et H2. Ces balises sont utilisées en standard pour définir des titres. Le style standard est en taille de caractère grande, en noire, non soulignée...
Tous ces paramètres peuvent être modifiés, et voila comment faire :

CodeRésultat
h1 {color:red;border-bottom-width:1;text-indent:25px}
h2 {color:green}


<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
Titre de niveau 1
Titre de niveau 2


  3. Supprimer le soulignement des liens

Cette exemple permet de supprimer le soulignement (option text-decoration:none). L'affichage du texte en rouge n'est fait que pour la lisibilité dans la page.

CodeRésultat
a {text-decoration:none;color:red}

<a href="index.php">Index Informatique</a>
Index Informatique


  4. Différents types de police de caractère

Les types par défaut sont donc : serif, sans-serif, cursive, fancy et monospace.

Voici un exemple pour chaque cas :
CodeRésultat
<p style="font-family:serif">Test de serif</p>
<p style="font-family:sans-serif">Test de sans-serif</p>
<p style="font-family:cursive">Test de cursive</p>
<p style="font-family:fancy">Test de fancy</p>
<p style="font-family:monospace">Test de monospace</p>

Test de serif


Test de sans-serif


Test de cursive


Test de fancy


Test de monospace






Page modifiée le : 14/01/2003
Site modifié le : 16/05/2016


Valid XHTML 1.0 Transitional