La définition d'un style s'opère en précisant après une balise HTML (comme <H1>, <P>, etc.) une liste de propriétés encadrées par des accolades. Par exemple:
    H2 { font-size: 11pt;
color:white;
text-align: center;
}		  
  Ci-dessus, on assigne à la balise <H2> une taille de police spécifique, une couleur de caractères et un alignement du texte au centre. On peut définir un nombre quelconque de styles, et les placer en tête de page HTML (embed) ou dans un fichier séparé (link).


  Cette méthode est la plus couramment employée à l'heure actuelle, pour des raisons variées. Elle consiste à insérer les définitions de style dans l'entête de la page HTML, entre deux balises <STYLE> et </STYLE>, et entre commentaires pour que les navigateurs anciens n'affiche pas le tout comme un simple texte.
    <HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY { background: URL(neige.gif);
background: white;
}
H1 {font 25pt/28pt "Helvetica" bold; color:maroon }
H2 {font 13pt/15pt "Times"; font-style: italic }
...
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>		  
  Cette manière de procéder est nettement celle qui présente le plus d'intérêt. En effet, elle permet de donner à un grand nombre de pages un aspect rigoureusement identique, et surtout d'apporter toutes les modifications utiles dans un seul fichier commun, lesquelles seront alors immédiatement prises en compte par les pages qui y font référence.
    <HTML>
<HEAD>
<TITLE>Titre de ma jolie page</TITLE>
<LINK REL=STYLESHEET HREF="[unarchived-link]" TYPE="text/css">
</HEAD>
...		  

 

Enfin, il existe une dernière méthode, qui consiste à insérer des définitions locales, qui affecteront seulement des portions de texte HTML. Il faut ajouter aux tags concernés les arguments supplémentaires à l'aide du mot clef STYLE.   ...
<P STYLE = "font-family: Verdana; font-size: 24pt">
Ce paragraphe utilisera la police Verdana
<P>Mais pas celui-ci !
...