Passons à la pratique. Enfin, me direz-vous !
Nous allons commencer doucement en apprenant comment mettre en forme de pages tels qu'on les ferait en HTML.
Si vous avez déjà fait un site mais sans CSS, avec des balises font partout, des mises en italique ou en gras ou en souligné... vous verrez pourquoi je ne vous ai pas appris ces balises dépréciées sur la page HTML : on peut faire la même chose en CSS et ainsi, la forme et le contenu sont bien dissociés, et surtout, vous n'avez pas besoin de modifier toutes vos pages HTML au moindre changement de design : tout ce fera dans le CSS que vous définirez une seule fois.
Ensuite, dans les paragraphes suivants et une fois que vous aurez bien saisi que la mise en forme dans le HTML est inutile, nous verrons que le CSS permet bien plus : il permet de magnifiques effets que le HTML ne permettait pas. Et là vous vous régalerez, et je vous promets que vous n'aurez pas appris le HTML Strict plus le CSS pour rien.

Je vous conseille d'ouvrir un nouvel onglet dans votre navigateur, si votre navigateur le permet (clique du milieu sous Firefox, Maj+clic pour ouvrir une nouvelle fenêtre dans Internet Explorer) avec la page d'aide-mémoire CSS, ainsi vous pourrez vous documenter sur les propriétés utilisées.

IDEA: Voici ce qui est possible en HTML ; version CSS. Ensuite, on verra les mêmes balises, mais stylées de façon autrement intéressantes : possible uniquement en CSS.

MIEUX: Nous allons maintenant suivre la progression du tutoriel HTML : nous allons styler chaque balise une par une, et identifier les choses qui sont possibles de faire : à vous d'appliquer les styles que vous souhaitez avoir et à les modifier pour avoir une présentation unique et originale. À la fin de cette page vous aurez un site fonctionnel !

Avant de commencer la lecture, et pour vous donner l'envie d'apprendre,
Découvrez Snaky 360, le jeu de serpent addictif réalisé par l'auteur de ce tutoriel...

Créé entièrement en HTML, CSS et JavaScript, sans Flash
(sauf pour les musiques et effets sonores, en attendant HTML 5)
Bientôt, vous pourrez en faire de même !
Ou alors, jouez à sa version Android :

Pendant qu'on y est, je peux aussi vous présenter la carte du monde que j'ai réalisé :
en très grand format pour vos murs, au design naturel et artistique :

Le code HTML de la page

La page

La page entière est définie par le sélecteur body.

• Nous allons commencer par donner une couleur de fond à la page : c'est la propriété background-color. Si vous voulez une image de fond, utilisez background-image en donnant une URL.
  Si vous définissez une image de fond, il est conseillé de définir aussi une couleur de fond en même temps, grâce à la propriété background. Choisissez la couleur de fond la plus proche de celle de l'image. En effet, lors du chargement de l'image, c'est la couleur qui est utilisée (par exemple si vous utilisez une image très noire et un texte blanc, vous avez intérêt à choisir noir comme couleur de fond, sinon avant que l'image soit affichée le visiteur verra un texte blanc sur fond blanc !!
• Nous pouvons aussi spécifier des marges afin que le texte ne soit pas collé contre les bordures de la fenêtre : propriété margin à 1em par exemple !

Jusque là, ce n'est pas bien compliqué, voici un exemple de page :

body {
  background-color: #BADBFF; /* Fond de page bleu clair */
  margin: 0; /* Supprimer toute marge à la page : le texte colle les bordures */
}

Et un second :

body {
  background: #D5DEEC url('fond.png'); /* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */
  font: 14px sans-serif;               /* Style et taille de la police de la page */
  margin: 1em;                         /* Marge du document HTML */
}

Puis un dernier :

body {
  background: white url('katie.jpg') no-repeat 50% 50%; /* Fond blanc *non répété* et centré */
  background-attachment: fixed; /* Même si la page défille, l'image reste au centre de l'écran.
                                   Vous pouvez tester sans : dans ce cas (et avec de grandes pages)
                                   l'image restera collée au bord/centre de la page et pas de l'écran */
}

Le code HTML des paragraphes

Les paragraphes

Les navigateurs n'utilisent pas tous la même police de caractères. Généralement, c'est celle définie par l'utilisateur (ou plus souvent celle par défaut). Si vous désirez changer la police de caractères, c'est font-family, et la taille font-size ! Les deux peuvent être regroupés en font. Pour l'écran, une police sans-serif (Arial or Helvetica...) est plus lisible (sur papier, une police serif (Times New Roman, par exemple) est préférable).

Enfin, pour faire plus joli, vous pouvez demander à justifier les paragraphes, via text-align: justify;.
Vous pouvez même vous permettre un format particulier pour la première lettre des paragraphes avec le sélecteur p:first-letter. Nous n'allons pas nous gêner :-)

Tout ceci nous donne cette règle CSS (avec un résultat un peu fantaisiste mais le principal y est) :

body {
  background: #D5DEEC url('fond.png'); /* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */
  font: 14px serif;                    /* Style et taille de la police de la page */
  margin: 1em;                         /* Marge du document HTML */
}
p, li {
  text-align: justify;                 /* Justifier le texte des paragraphes et des lignes de listes */
}
p:first-letter {                       /* Pour la première lettre de chaque paragraphes : */
  font-size: x-large;                  /* Utiliser une police large */
  font-weight: bold;                   /* Et grasse                 */
  color: #0000AA;                      /* De couleur bleu foncée    */
}

Le code HTML des titres

Les titres

Après la page et les paragraphes, nous voici maintenant arrivé aux titres !
C'est ici que vous pouvez être le plus fantaisiste : on va s'amuser :-) Mais on va aussi utiliser beaucoup de propriétés !
Pour personnaliser le look des titres, nous avons aussi besoin de la propriété color pour la couleur du texte. Vous pouvez aussi vous amuser avec background-color ou border pour entourer les titres (plus particulièrement le titre de niveau 1). text-decoration: underline; est aussi intéressant pour les souligner, et text-align pour centrer le titre de page, par exemple...
C'est parti :

h1 { /** gros titre */
  font-family: serif;         /* On se permet un changement de police : pas plus de deux par page, et à utiliser avec parcimonie (c'est le cas) */
  background: #0066CC none;   /* Fond du titre bleu (et sans image de fond) */
  color: white;               /*  Donc on utilise une police blanche pour que le texte soit visible */
  border: 3px dotted #9999FF; /* On encadre le titre d'un bleu clair de 3 pixels de largeur */
  padding: 0.3em;             /* Espacement intérieur non nul pour que le texte ne colle pas à la bordure du cadre */
  text-align: center;         /* Le titre doit être centré ! */
  letter-spacing: 0.3em;      /* On espace les caractères pour que ce soit joli :-) */
}
h2 { /** Les titres de paragraphes */
  text-decoration: underline; /* On souligne ces titres */
  font-variant : small-caps   /* Et on les met en majuscules (les minuscules sont remplacées par des petites majuscules) */
  color: #000077;             /* Texte de couleur bleu très foncé, presque noir (donc lisible) */
}
h2 { /** Les sous-titres (titres de niveau 3) */
  color: #2222CC;             /* Texte de couleur bleu, plus clair que le titre h2 */
  font-style: italic;         /* Texte en italique */
  text-indent: 1em;           /* Et indenté par rapport aux autres titres et paragraphes, pour montrer la hierarchie */
}

À titre d'exemple, nous allons reprendre la mini-page utilisée dans le tutoriel HTML : c'est déjà plus beau (même si ça manque de goût, ce n'est là que pour illustrer le plus de balises possibles) :

Après, si vous trouvez les blocs trop espacés, je vous laisse jouer avec les différentes marges (margin-*) et espacements intérieurs (padding-*) pour coller les sous-titres aux paragraphes, avoir un titre h1 moins large...

Il peut arriver que vous souhaitiez des titres qui collent aux paragraphes. Pas de problèmes : il suffit de jouer sur les marges (margin) et / ou les espacements (padding). Ce que vous souhaitez c'est qu'il n'y quasiment pas de marge basse pour le titre et de marge haute pour le paragraphe.
Voici un exemple :

h2 {
  margin-bottom: 0; /* Pas de marge en bas pour coller le titre au paragraphe */
  padding: 0;       /* Sinon le titre a aussi un léger espacement à gauche : on veut l'aligner */
                    /*   avec le paragraphe, qui n'a pas d'espacement. */
  color: blue;                /* Classique : couleur... */
  font: bold 14px sans-serif; /* ... et police          */
}
p {
  margin-top: 0;    /* Là aussi, pas de marge au dessus du paragraphe */
  font: 12px serif; /* Là aussi, classique */
}

Comme vous pouvez le voir dans le premier exemple, le titre H1 ("Tutoriel HTML et CSS") est encadré par des bordures sur toute la longueur de la page.
Que faire si vous souhaitez n'encadrer que le texte ? Ceci n'est à priori possible qu'avec des balises en ligne, tel que les liens et les balises em et strong...
Il faut soit trouver un élément en ligne à styler, soit faire en sorte que le titre devienne un élément en ligne.
Voici les deux solutions : on entoure le texte du titre à l'intérieur d'un span et on applique le style à ce span plutôt qu'au titre H1 ou H2. Cette solution a le désavantage de nécessiter d'ajouter une balise sans sémantique, pour des fins de présentation. Abuser de ce genre de technique pourrait alourdir et compliquer le code HTML de façon conséquente. La seconde solution consiste à utiliser la propriété display pour forcer le titre à s'afficher comme un élément en ligne.

<h2 class="titre1"><span>Titre avec un span</span></h2>
<p>Paragraphe suivant le premier titre, qui utilisait un span.</p>
<h2 class="titre2">Titre brut</h2>
<p>Paragraphe suivant le second titre, qui utilisait la technique du display inline.</p>

h2.titre1 span {
  padding: 2px 10px 2px 5px; /* Dans l'ordre: padding-top padding-right padding-bottom padding-left */
  margin-left: 10px; /* Décaler le titre par rapport aux paragraphes normaux */
  border-left: 5px solid #458EFF;
  border-bottom: 2px dotted #458EFF;
  color: #804000;
}
h2.titre2 {
  display: inline; /* Ne plus considérer le titre comme un bloc */
  /* Après, c'est la même chose que pour titre1 : */
  margin-left: 10px;
  padding: 2px 10px 2px 5px;
  border-left: 5px solid #458EFF;
  border-bottom: 2px dotted #458EFF;
  color: #804000;
}

Le code HTML des listes

Les listes

On arrive à quelque chose plus intéressant. En effet, beaucoup de personnes utilisent de vulgaires images à côté d'un texte pour simuler des listes. Si vous avez suivit mes conseils, vous avez bien utilisé la balise <ul> pour créer des listes.
Vous voulez sûrement avoir autre chose qu'un simple rond noir ! Pas de problèmes :

li {
  list-style-image: url("dossier.png");
}

À noter qu'il n'est pas possible d'avoir une puce d'une autre couleur que celle du texte. Il y a deux astuces pour y arriver :

• Soit mettre tout le texte de chaque li dans un span et : utiliser color: black pour ce span et la couleur de la puce pour les balises li,
• Soit utiliser une image qui représentera cette puce en couleur, c'est l'astuce utilisé par ce site et ça ne nécessite pas de modifier tout le site pour rajouter les span à chaque ligne de liste (meilleur séparation du contenu et de la forme).

C'est finit : vous utilisez du vrai HTML pour faire des listes, vous ne polluez pas vos pages avec des images et celles-ci sont visibles si un visiteur les désactive (il verra des ronds noirs, mais c'est son choix : nous le respectons très bien ici) et les lecteurs d'écran ou navigateurs braille sauront rendre le fait qu'il s'agit d'une liste. N'est-ce pas joli ? ;-)

TODO: Sous listes (à part entière) et plus de styles : li, li.dossiers
Nous verrons bientôt comment styler les menus, qui sont des listes particulières, et les afficher différemment !

Le code HTML des listes de définitions

Les listes de définitions

C'est encore autre chose que les listes "simples" !
Par défaut, les navigateurs n'ajoutent qu'un retrait aux définitions, or il est possible de distinguer mieux les termes des définitions. Par exemple en mettant les termes en gras, ou en les formatant (couleurs, transformations... et j'en passe). C'est ce que nous allons faire.
Il est aussi possible d'afficher les termes et leurs définitions sur une seule ligne, moyennant petite astuce. Allons-y ! Encore une fois nous reprenons l'exemple donné sur la page traitant du HTML sans changer une ligne de code HTML :

dt {
  font-weight: bold;
  display: compact;
}
dd {
  margin-left: 20%;
  text-align: left;
}

Le code HTML des liens

Les liens

Viennent ensuite la personnalisation des liens : c'est le sélecteur a pour les liens normaux, a:visited pour les liens déjà visités, a:hover pour le lien actuellement sous la souris et a:active pour le lien actif (sélectionné en utilisant les touches de tabulation).

Un exemple assez simple qui ne modifie que les couleurs :

a                 { color: #0066CC; } /* Liens en bleu (entre clair et foncé) */
a:visited         { color: black;   } /* et en noir (comme le texte normal, mais souligné) si déjà visités */
a:hover, a:active { color: white;                /* Lors du passage de la souris ou activation, */
                    background-color: #0066CC; } /* couleur blanc sur fond bleu                 */

Le soulignement est toujours de la même couleur que le texte souligné. Il n'y a pas de propriété CSS pour la changer. Mais il y a une petite astuce : utiliser la bordure basse du lien pour simuler un soulignement. À partir de là, il est même possible d'aller plus loin en soulignant en pointillés ou en double, comme le montre cet exemple :

a.lien1 {
  color: #0066cc;
  text-decoration: none;            /* Suppression du soulignement normal */
  border-bottom: 1px solid #ff8000; /* Simulation d'un soulignement dans une couleur différente */
}
a.lien2 {
  color: #8000ff;
  text-decoration: none;             /* Suppression du soulignement normal */
  border-bottom: 2px dotted #8000ff; /* Plus l'épaisseur est grande, plus les points seront gros */
}
a.lien3 {
  color: #0066cc;
  text-decoration: none;             /* Suppression du soulignement normal */
  border-bottom: 3px double #0066cc; /* Trois pixels minimum, pour voir les deux lignes */
}
a.lien1:hover,  a.lien2:hover,  a.lien3:hover,
a.lien1:active, a.lien2:active, a.lien3:active  {
  color: white;
  border-color: white; /* Seule la couleur change, la forme et la taille de la bordure ne changent pas */
  background-color: #0066cc;
}
a.lien4 {
  text-decoration: none;
  color: #34558A;
  border: 1px solid transparent;     /* Les bordures droites et gauches qui apparaîtront au passage de la souris déplaceraient   */
  border-bottom: 1px dotted #458EFF; /*   le texte de deux pixels vers la droite. C'est pourquoi on les définit tout le temps à  */
}                                    /*   1 pixel mais invisibles au repos. Note : "transparent" ne fonctionne pas sous IE < 7.  */
a.lien4:hover {
  border: 1px solid #FFA713;
}

Le code HTML des images

Les images

Vous avez sûrement remarqué que si vous avez une image à l'intérieur d'un lien (typiquement <a href="adresse"><img src="adresse"></a>) les navigateurs ajouterons une bordure (souvent bleue, de deux ou trois pixels de largeur) autour de l'image.
La majorité des visiteurs, et moi le premier, ne trouve pas ça joli ! Qu'à cela ne tienne, nous allons rajouter une règle CSS pour faire disparaître cela (ceux qui connaissaient déjà le HTML avaient sûrement recours à l'attribut border, à chaque balise img : ce temps est révolu) :

Il est à noter que vous pouvez aussi spécifier la propriété vertical-align pour aligner verticalement vos images par rapport au texte qui les entourent.

img {
  border: none;           /* Ne pas entourer les images, même s'ils contiennent des liens */
  vertical-align: middle; /* Dans le cas d'une icône suivie d'un texte, par exemple       */
}

TODO: Un exemple "Voici un image cliquable. Sans le style précédent, elle serait entourée d'une grosse bordure bleue moche pour montrer que c'est un lien.
Conseil graphique : assurez-vous qu'il est évident que l'image est cliquable.

Le code HTML des tableaux

Les tableaux

Nous voici arrivés aux tableaux, ces structures qui vous permettent de structurer des données tabulaires.
Il y a beaucoup de choses à mettre en forme dans les tableaux ; voici ce qui peut être fait :

• <table></table> : Tableau : vous pouvez faire à peu près tout ce qui est possible de faire sur un paragraphe : fond, bordures, format du texte...,
• <caption></caption> : Légende de tableau : idem, tout ce que vous voulez,
• <thead></thead> : En-tête de tableau : ici c'est assez restreins, vous pouvez jouer sur le fond de chaque cases qui les compose, le formatage du texte, mais pas de bordures,
• <tbody></tbody> : corps du tableau : pareil qu'au dessus,
• <tfoot></tfoot> : Pied de tableau : idem,
• <tr></tr> : Ligne de tableau : encore pareil,
• <td></td> : Cellule de tableau : là vous pouvez jouer sur les bordures des cases, les espacements et marges ! Vous pouvez aussi renseigner la propriété vertical-align pour aligner le contenu des cases en haut, au centre, ou en bas de celles-ci,
• <th></th> : Cellules d'en-tête pour tableaux, pareil que pour les cases.

table {
  width: 50%; /* La largeur c'est pour le test, mais ça montre qu'il est aussi possible de la spécifier en CSS */
  border: 1px dashed gray; /* Et on met une jolie bordure originale autour du tableau */
}
caption {
  text-align: center; /* Classique : texte centré */
  font-style: italic; /*             en italique  */
  font-weight: bold;  /*             en gras      */
  color: #0066CC;     /*             et en bleu   */
}
th { /* Préférable à thead car offre plus de possibilités */
  background-color: #D3E2ED; /* Chaque case d'en-tête aura un fond bleu */
  color: #666666;             /* Et un gris un peu plus foncé que la moyenne */
}
td {
  /*border: 1px inset gray;*/ /* Vous pouvez essayer de dé-commenter : cela produit un affichage classique des cases */
}

Là encore j'ai repris le tableau qui avait été vu dans le tutoriel HTML : c'est déjà plus beau, et sans avoir modifié (et donc alourdi, autant du point de vue téléchargement que visuel) une ligne du HTML !!!
Je vous laisse jouer avec les images de fond (sans abuser !)...

Le code HTML des balises de sémantique bloc

Les filets de séparation horizontaux

Deux solutions : soit garder l'aspect filet simple et jouer sur les couleurs et la taille, soit carrément utiliser une image (et oui : pas besoin de "tricher" en utilisant une image HTML, un "vrai" filet suffit et on va juste le styler). C'est parti pour les deux solutions :

hr.f1 { /* Premier filet bleu clair */
  border: none;              /* On supprime la bordure (inset par défaut)... */
  background-color: #66A8E7; /* ... que l'on remplace par un fond bleu uni   */
  height: 1px;               /* On définit la hauteur de 1 pixel pour que le fond soit visible ! */
  width: 70%;                /* Et on précise que l'on désire un filet de longueur 70%... */
  align: center;             /* ... et centré, par exemple */
}
hr.f2 { /* Second filet bleu foncé, en pointillés */
  border: none;                   /* Idem : on ne veut pas des bordures... */
  border-top: 6px dashed #000099; /* ... on en veut juste UNE en pointillés, de hauteur 6 pixels */
  height: 0px;                    /* Le filet est rendu grâce à la bordure haute : pas besoin du "contenu" (si on peut dire) */
  width: 80%;
  align: center;
}
hr.f3 { /* Troisième type de filet, avec une image de fond, cette fois */
  border: none;                         /* Encore une fois, pas de bordures */
  background-image: url('travaux.png'); /* L'image à répéter... */
  height: 4px;                          /* ... sur une hauteur de 4 pixels */
  width: 90%;
  align: center;
}
hr.f4 { /* Dernier filet */
  border: none;
  background: url('hr_gradiant.png') #89B5FF; /* Cette fois on veut une image (dégradé blanc vers bleu), */
  background-repeat: no-repeat;               /* non répétée, et on poursuit avec la couleur bleu une fois l'image terminée */
  height: 2px;
}

Le code HTML des balises de sémantique en ligne

Les balises abbr et acronym

Pour finir de styler nos pages, encore quelques astuces.
La première concerne les abbrev et acronym : certains navigateurs (dont Internet Explorer) ne signalent pas leurs présences !
Nous allons remédier à cela avec ces quelques lignes :

abbr, acronym, .aide {
  border-bottom: 1px dotted #333;
  cursor: help;
}

On ajoute une bordure pixellisées pour souligner ces termes "à la Mozilla" et on modifie le curseur pour qu'il prenne la forme d'un point d'interrogation lors de leur survol. Petit exemple :

Le code HTML des balises de sémantique en ligne

Les balises em et strong

Peu de choses à dire concernant ces deux balises. Il est généralement préféré de ne pas en modifier l'apparence.

Pour des besoins pédagogiques, au lieu de formater le texte strong en gras, nous allons spécifier de le mettre en majuscule.

En ce qui concerne les balises em, souvenez-vous de votre enfance : on vous faisait souligner les titres en rouge. Sur le WEB, il peut être intéressant de souligner un texte important en rouge, ou d'avoir cet effet pour une autre utilisation.
Malheureusement la couleur de soulignement est la même que cette du texte (propriété color).
Pour palier à ce manque, on peut utiliser la bordure du bas : elle doit être solide, de un pixel de hauteur, et bien évidemment rouge.

em {
  font-style: normal; /* Suppression de l'italique */
  text-transform: uppercase;
}
strong {
  font-weight: normal; /* Suppression du gras */
  border-bottom: 1px solid red;
} /* Attention : un texte souligné est trop facilement confondu avec un lien. Ce style est à éviter autant que possible */

<p>Hey, vous <em>déconnez trop</em> là ! On <strong>ne déconne pas</strong> dans un atelier.</p>

J'attribue une mention spéciale aux valeureuses personnes ayant saisi la citation utilisée dans cet exemple ;-)
Il s'agissait bien sûr de South Park. Saison 3, épisode 4, à 2 minutes et 17 secondes !

Le code HTML des balises de sémantique en ligne

Les balises ins et del

Suggestion pour <ins></ins> et <del></del> :

ins { color: green; }
del { color: red; }

Vous pouvez aussi enlever le formatage des textes et cacher les parties supprimées ; voici le même texte (voyez le code source) mais stylé de façon à avoir la "version finale" à l'écran (ou à l'impression, comme nous le verrons bientôt) :

Le code HTML des balises de code

Les balises code, kbd, samp et var

Si vous regardez le code source de cette page, les parties de code CSS sont entourées des balises <code></code>, mais les petits passages dans les paragraphes sont aussi entourées de ces même balises. Je différencie les deux parties avec pre qui est utilisé lors de gros passages de code, et les balises code qui sont situées à l'intérieur d'un paragraphe, ou de listes. Il existe d'autres façons de procéder, mais en voici une.
Une façon de formater ces parties de code est d'avoir une ligne verticale à gauche des gros passages (avec éventuellement un fond de couleur, éventuellement noir, avec écriture verte ou blanche :-) à vous de voir), et de juste colorer le fond des petits passages de code "en ligne" :

pre { /* Des gros passages de code */
  margin-left: 1em;             /* Petite marge à gauche */
  padding-left: 1em;            /* Et un espacement à gauche pour... espacer le texte de la bordure... */
  border-left: 1em solid green; /* ... que nous définissons justement là (un peu gros, d'ailleurs)    */
  background-color: black;      /* Vive l'effet Matrix... */
  color: green;
  font-weight: bold;            /* Faut que ce soit visible quand même ;-) */
}
p code, li code { /* Et des petites balises, fonctions, etc... dans le texte de la page */
  background-color: #FFE9BB; /* Rien de bien secret : fond saumon (pour illustrer la possibilité d'avoir des styles différents) */
  font-weight: bold;         /*                       et texte gras */
}

<code><pre>Ceci est un bout de code,
Ben oui ça ne se voit pas !</pre></code>

Vous pouvez aussi vous resservir de ce que nous venons de faire pour code (les définir ensemble) pour styler les sample...
Le même genre de format peut être appliqué aux balises blockquote pour imiter le style des clients e-mail : appliquer une bordure bleue fine à gauche, avec éventuellement un retrait !
Un petit dernier pour la route : pour montrer qu'il s'agit bien d'entrées au clavier, nous allons styler la balise kbd en imitant les touches d'un clavier :

kbd {
  border: 2px outset;
  padding: 2px;
  background-color: #E5E5E5;
}

Du plus bel effet ! Et sans utiliser d'image, donc léger.

Le code HTML des balises de sémantique bloc

Les citations

Pour styler blockquote, il n'y a pas grand chose de neuf par rapport à code. En effet, certains navigateurs ou clients de courriels formatent ces blocs avec une petite ligne bleue à gauche du texte. Je vous laisse définir les règles qui ne seront pas dures.
Pour ce qui est de cite ou q, les équivalents en ligne, il peut être intéressant de les mettre entre guillemets et, plus avancé : selon leur nature, et donc leur classe, les souligner (pour les titres de livres) ou les mettre en italique ou en gras. Je vous laisse également ces petits bouts de codes assez simples à mettre en place.
Nous allons juste voir comment ajouter des guillemets, nous ne l'avons pas encore vu :

/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }

/* Insert quotes before and after Q element content */
Q:before { content: open-quote }
Q:after  { content: close-quote }

Faites une pause, vous l'avez bien mérité :
Découvrez Snaky 360, le jeu de serpent addictif réalisé par l'auteur de ce tutoriel...

Créé entièrement en HTML, CSS et JavaScript, sans Flash
(sauf pour les musiques et effets sonores, en attendant HTML 5)
Bientôt, vous pourrez en faire de même !
Ou alors, jouez à sa version Android :

Pendant qu'on y est, je peux aussi vous présenter la carte du monde que j'ai réalisé :
en très grand format pour vos murs, au design naturel et artistique :