<!DOCTYPE html>
<html lang="fr" xml:lang="fr">
 <head>
 <title>Didacticiel pour le CSS</title>
 <meta
 http-equiv="content-type"
 content="text/html; charset=UTF-8" />
 <link rel= "stylesheet" 
 type = "text/css" 
 href="essai.css" /> <!-- Inclusion de la feuille de style externe -->
 </head>
 <body>
 <div id="menu"> <!-- Menu -->
 <ul>
 <li><a href="#1">Premier point</a></li>
 <li><a href="#2">Deuxième point</a></li>
 <li><a href="#3">Troisième point</a></li>
 </ul>
 </div>
<!-- Corps du texte -->
 <p>
 Ceci est un fichier <abbr title="Hypertext Markup Language">HTML</abbr>
 utilisant une feuille de style.
 </p>
 <h1><a name="1">Premier point</a></h1>
 <p>
 L'objet de ce fichier est de fournir
 un support au didacticiel <abbr title="Cascading Style Sheets">CSS</abbr>.
 </p>
 <p class="navigation">
 | <a href="#menu">menu</a> |
 </p>
 <h1><a name="2">Deuxième point</a></h1>
 <p>
 Outre mesure, ce fichier ne présente strictement
 <em>aucun</em> intérêt.
 </p>
 <p class="navigation">
 | <a href="#menu">menu</a> |
 </p>
 <h1><a name="3">Troisième point</a></h1>
 <p>
 Nous vous souhaitons une bonne journée.
 </p>
 <p class="navigation">
 | <a href="#menu">menu</a> |
 </p>
 </body>
</html>
En l'absence de feuille de style, le navigateur devrait l'afficher comme suit.
Ceci est un fichier HTML utilisant une feuille de style.
Premier point
L'objet de ce fichier est de fournir
un support au didacticiel CSS.
Deuxième point
Outre mesure, ce fichier ne présente strictement
"aucun" intérêt.
Troisième point
Nous vous souhaitons une bonne journée.
Balises spécifiques.
Par rapport à l'HTML sans feuille de style, on remarque :
Ceci est la syntaxe recommandée, mais au lieu de regrouper les styles dans un fichier .css il est aussi techniquement possible de :
Arbre du document.
On peut construire l'arbre du document : chaque "élément", c'est-à-dire portion du code comprise entre deux balises, se voit appliquer une mise en forme qui est soit la mise en forme par défaut, soit la mise en forme déclarée dans la feuille de style. Une balise est imbriquée dans une autre balise (elles sont toutes imbriquées dans la balise codice_10) ; si l'on représente ces imbrications sous la forme d'une arborescence, on voit qu'un élément a un seul parent (est inclus dans une seule balise, qui elle-même peut être incluse dans…).
L'arbre du document est donc ici :
 ______________|________________
 div id="menu" h1 _p_ p class="navigation"
 ul a abbr em a
 li
 a
L'astérisque « codice_11 » (la « racine » de l'arbre) désigne le document en entier.
Remarquez que nous n'avons considéré ici que le contenu des balises codice_10, puisque c'est ce qui va être influencé par la mise en forme. Au sens strict, l'arbre du document devrait commencer par :
 html
 _________________|__________________
 body head
 ____________|____________ _______|______
 div id="menu" h1 p p class="navigation" title meta link
Fichier CSS.
Copiez le code suivant dans un éditeur de texte (voir la section "Avec quoi écrire un document HTML ?" du wikilivre sur le HTML) et enregistrez-le dans le fichier codice_13. Ce fichier doit se trouver dans le même répertoire que le fichier HTML ci-dessus.
/* Déclaration 1 : jeu de caractères utilisable */
@charset "UTF-8"; /* ISO Latin-1 */
/* Déclaration 2 : style du menu */
div#menu {
 float:left; /* objet flottant à gauche (le reste du texte en fait le tour) */
 width: 10em; /* largeur : dix cadratins */
 margin: 0.5em; /* marge de 1/2 cadratin de chaque côté */
 background-color: #f0f8fc; /* fond bleu clair */
 border: solid blue 2px /* bordure bleue de 2 pixels tout le tour */
/* Déclaration 3 : style de abbr */
abbr {
 border-bottom: dotted red 1px /* bordure de 1 pixel en pointillé en-dessous */
/* Déclaration 4 : style de navigation */
p.navigation {
 border-top: solid gray 1px /* bordure grise de 1 pixel au dessus */
Une fois enregistré, mettez à jour l'affichage de la page HTML dans le navigateur, et regardez la différence.
Les portion de code comprises entre les chaînes codice_14 sont des commentaires qui ne sont pas interprétés.
L'exemple devrait ressembler à ce qui suit.
Ceci est un fichier HTML utilisant une feuille de style.
Premier point
L'objet de ce fichier est de fournir
un support au didacticiel CSS.
Deuxième point
Outre mesure, ce fichier ne présente strictement
"aucun" intérêt.
Troisième point
Nous vous souhaitons une bonne journée.
Déclarations, règles, sélecteurs et attributs.
Le fichier CSS ci-dessus est constitué de quatre déclarations. Une déclaration est de la forme :
Les espaces et retours de ligne n'ont pas d'importance en CSS, on peut donc écrire de même :
 "sélecteur" {
 "règle-1";
 "règle-2";
La première déclaration, celle définissant le jeu de caractères disponibles dans le fichier CSS, n'obéit pas à cette syntaxe. On parle de « pseudo-règle ».
Le sélecteur est ce qui désigne l'élément du fichier HTML auquel s'applique la déclaration. Par exemple :
On note que les éléments codice_15 disposent déjà d'une mise en forme par défaut, et que l'on redéfinit celle-ci. À l'inverse, les éléments de classe « navigation » ou d'identifiant « menu » sont spécifique à ce fichier HTML.
La description de la mise en forme est comprise entre une accolade ouvrante « codice_27 » et une accolade fermante « codice_28 ». Elle est constituée d'une série de règles.
Chaque règle est de la forme codice_29 :
Les attributs que l'on a utilisés ici sont des attributs de boîte : l'objet (le texte ici) est compris dans une boîte, qui peut être invisible (cas général) ou être visible (cas du menu) :
Imaginons que l'on veuille redéfinir le formatage des éléments codice_38 (texte en emphase, compris entre les balises codice_59), pour avoir du texte souligné au lieu d'en italique. On aurait écrit une déclaration
em {
 font-style: normal; /* pas d'italique */
 text-decoration: underline /* soulignement */
Ajoutez cette ligne au fichier CSS, enregistrez-le et mettez à jour l'affichage de la page HTML pour voir l'effet.
Priorités, cascade et sélecteurs.
Comme indiqué, les éléments sont imbriqués les uns dans les autres. Chaque élément fils hérite des propriétés de son parent (l'élément dans lequel il est imbriqué), et ses propriétés propres s'y substituent. Les styles s'appliquent donc en cascade (d'où le nom de CSS, "cascading style sheets").
La définition du sélecteur est donc capitale : c'est elle qui indique dans quelles conditions un style s'applique ou pas. Ceci est largement évoqué dans le chapitre "../Les sélecteurs/", voici toutefois quelques considérations de base.
q {quotes: '\00ab\00a0' '\00a0\00bb'} /* guillemets français et espace insécable : s'applique à tous */
q > q > q {font-style: italic} /* 3e niveau en italiques */
q > q > q > em {font-style: normal} /* emphase en lettre droites */
<p>
 <q> premier niveau, l'<em>emphase</em> est classique, puis 
 <q> deuxième niveau, et
 <q> troisième niveau <em>avec emphase</em> au milieu.
 </q></q></q>
</p>
« premier niveau, l"'emphase" est classique, puis « deuxième niveau, et "« troisième niveau "avec emphase" au milieu. »" » »

KDE/Première approche
Première approche.
Voici KDE, l'un des environnements de bureau de Linux les plus utilisés avec Gnome.