Les CSS permettent de définir des styles d'écriture personnels, et de les réutiliser à l'infini.
Dans l'exemple qui suit, nous allons redéfinir des styles existants (tels que BODY, P, H2 et UL), et nous allons en créer deux nouveaux (.titre et .auteur)
Lorsque nous les utiliserons, plutôt que d'utilisiser les valeurs par défaut, votre navigateur va extraire les mises en forme définies dans le HEAD de votre document HTML
Exemple :
<html>
<HEAD>
<title>Premier exemple CSS</title>
<STYLE type="text/css">
BODY {font-family:comic sans ms}
P {font-size:12pt; text-indent:60px; text-align:justify}
H2 {font-family:courier new; text-align:center; color:blue; border-width:0 0 8px o; border-style:solid}
UL {list-style-type:circle; text-indent:80px; color:#FFFF00}
.titre {color:red; text-align:right; line-height:5%; font-family:Arial; font-variant:small-caps}
.auteur {color:green; text-align:right; line-height:100%; font-family:arial; font-style:italic; border-width:0 0 2px 0; border-style:solid}
</STYLE>
<HEAD>
<BODY>
<H2>
Les opéras modernes
</H2>
<P>
De temps à autre, les opéras sont bien, d'autres fois, ils sont nuls
</P>
<UL>
<LI> Les opéras sans musique
<LI> Les opéras qui bougent
<LI> Les opéras de Rossini
</UL>
<P>
Finalement, il n'y a pas beaucoup d'opéras...
</P>
<P CLASS=titre>
C'était une critique constructive et moderne
</P>
<P CLASS=auteur>
Michel Defawes
</P>
</body>
</html>
cliquez ici pour voir le résultat de ce code HTML, et faites AFfichage/Source pour visualiser le code HTML, qui sera le même que celui-ci