Après avoir appris le fonctionnement général des feuilles de style, passons à la pratique. Tout d'abord, nous alons voir comment styler vos pages HTML de façon simple : nous verrons que la séparation du contenu et de la forme, et plus précisément n'utilise "que" le HTML Strict, n'est pas faite au détriment de la présentation (ceux connaissant déjà le HTML avant ce tutoriel verront que toute leur présentation peut être faite en CSS : s'ils changent il gagneront de la bande passante et pourront redéfinir leur style plus aisément en modifiant un seul fichier).
Fort de ceci, nous verrons alors comment tirer pleinnement parti du CSS pour définir des effets impossibles en HTML Transitionnal (autorisant encore les balises et attribues de mise en forme) : c'est la partie amusante de tout le tutoriel !.
Enfin, nous verrons comment contenter les plus exigents, et notament comment se passer de tableaux HTML purement présentationnels en définissant plusieures colonnes, et d'autres structures inévitables pour les sites avancés.
Passons à la pratique. Enfin ! me direz-vous.
Nous allons commencer doucement en apprenant comment mettre en forme des pages tel qu'on le fairait 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 :depreciated: 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 saisit 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églerez, et je vous promet 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 interessantes : 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 !
La page entière est définie par le selecteur body
background-color. Si vous voulez une image de fond, utilisez background-image en donnant une URL.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 affichiée le visiteur verra un texte blanc sur fond blanc !!margin à 1em par exemple !Jusque là, ce n'est pas bien compliqué, voici deux exemples de pages :
body {
background-color: #BADBFF; /* Fond de page bleu clair */
margin: 0; /* Supprimer toute marge à la page : le texte colle les bordures */
}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 */
}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 scroll, 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 */
}Voici maintenant une image non répétée et centrée dans la fenêtre du navigateur.
Essayez de redimentionner la fenêtre de votre navigateur pour tester.
Il est également possible de placer l'image dans un coin (en bas à droite, au milieu et à 75% en bas...).
Je vous laisse découvrir les autres valeur de background-position.
Et comme il faut bien avoir une heuteur suffisante pour tester l'image de fond, je rajoute du texte.
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 formattage 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 fantésiste 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 pararaphes 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 */
}Ceci est un paragraphe montrant le style général de la page (l'image est un simple dégradé créé avec The Gimp). Vous pouvez aussi vous rendre compte de la justification du paragraphe ! Dans le cas contraire, redimentionnez la fenêtre de votre navigateur afin de faire tenir ce paragraphe sur plusieures lignes. En espérant que cela suffira, mais ce n'est pas bien grave.
« Le code HTML des paragraphes
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 beacoup 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) :
Ces languages sont les standards du WEB et sont reconnus par tous les navigateurs
Apprenons-les donc !
Et vous ne le connaissez pas déjà ? Tant pis, ce n'est qu'un exemple !
Pareil : nous le verrons plus tard
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 souahitez 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 */
}Et le paragraphe qui lui est associé.
On voit bien qu'ils sont collés.
Par contre, voici un deuxième paragraphe : il faut faire attention que les deux paragraphes ne soient pas collés, par contre (comme par exemple en annulant aussi la marge basse des paragraphes).
On arrive à quelque chose plus intéressant. En effet, beaucoup de personnes utilisent de vulgères 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 surement avoir autre chose qu'un simple rond noir ! Pas de problèmes :
li {
list-style-image: url("dossier.png");
}<li class="ouvert"></li> et d'associer l'image "dossier_ouvert.png" à une telle ligne (li.ouvert) pour créer une arborescence :-) Voir même associer l'image "fichier.png" à la règle ul li pour affecter (styler) les sous-listes (ul li est plus précis que li donc il l'emporte)...À 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 :
li dans un span et : utiliser color: black pour ce span et la couleur de la puce pour les li,C'est finit : vous utilisez du vrai HTML pour faire des listes, vous ne poluez pas vos pages avec des images et celles-ci sont visibles si un visiteur désactive les images (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. C'est 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 !
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 formattant (couleurs, transformations... et j'en passe). C'est ce que nous allons faire.
Il est aussi possible d'afficher les termes et leur définitions sur une seule ligne, moyennant petite astuce. Let's go (encore une fois nous reprenons l'exemple donné sur la page traitant du HTMl sans changer une ligne de code HTML) :
TODO: Bon apparemment ça marche pas : on verra plus tard.
« Le code HTML des listes de définitions
Viennent ensuite la personnalisation des liens : c'est le selecteur 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éléctionné 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 */
Voici un paragaphe avec des liens, et encore des liens, et toujours de nouveaux liens ! De quoi tester le rendu des liens en CSS, comme par hasard ;-)
Ceci n'est qu'un petit éventail des possibilités du CSS : regardez l'aide mémoire fourni en annexe et testez d'autres solutions avec d'autres propriétés... Vous pouvez mettre en gras les liens lors de leur survol, en italique ou le désouligner... Vous pouvez aussi le désouligner mais mettre en gras (pour le distinguer du texte normal)...
Vous avez surement 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 surement recours à l'attribue border, à chaque image : ce temps est révolu) :
Il est à noter que vous pouvez aussi spécifier la propriété vertical-align pour aligner verticallement 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 */
}Nous voici arrivés aux tableaux, ces structures qui vous permettent de structurer des données tabulaires.
Il y a beaucoup de choses stylables 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, formattage 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 restrain, 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 desssus,<tfoot></tfoot> : Pied de tableau : idem,<tr></tr> : Ligne de tableau : encore pareil,<td></td> : Celulle de tableau : là vous pouvez jouer sur les bordures des cases, les paddings et margins ! 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: gray40; /* 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 */
}| Nom | Symbole |
|---|---|
| mètre | m |
| kilograme | kg |
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 !)...
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 grace à 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 (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;
}Un paragraphe quelquonque.
Comme par hazard on sépare celui-ci d'un filet.
Des pointillets, maintenants.
Et celui-là d'un autre un peu plus joli :-)
Ce n'est qu'un exemple, hein !
« Le code HTML des balises de sémantique bloc
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 leur 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 pixelisé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 :
Voici un petit texte d'exemple qui va vous parler du BAC et des études que l'on peut faire après : le DUT, par exemple.
Finalement je n'ai pas envi de continuer. Reprenons le CSS !
« Le code HTML des balises de sémantique en ligne
Pas grand chose à dire, si ce n'est que si vous le préférez, au lieu de formatter le texte e italique ou en gras, vous pouvez spécifier de le mettre en majuscule (soit tout le temps, soit pour certaines classes, voire même avec un classe qui laisse le gras de strong et en plus met les caractères en majuscule).
em{ /* Dans le cas des balises em : */
font-style: normal; /* Plus d'italique */
text-transform: uppercase;
}
strong { /* Et si vous souhaitez appliquer ce style aux balises strong : */
font-weight: normal; /* Plus de gras */
text-transform: uppercase;
} /* Évitez les deux en même temps : il faut quand même reconnaitre le "degrès d'importance" de ces deux balises */
/* Par contre, vous pouvez laisser en majuscule, mais garder le gras et l'italique */<p>Je vous prévient : <em>n'en abusez pas</em>, ou sinon, <strong>ça irra très mal</strong> !</p>Je vous prévient : n'en abusez pas, ou sinon, ça irra très mal !
« Le code HTML des balises de sémantique en ligne
Suggestion pour <ins></ins> et <del></del> :
ins { color: green; }
del { color: red; }Brouillon de papierdocument top secret
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) :
Brouillon de papierdocument top secret
« Le code HTML des balises de sémantique en ligne
Si vous regardez le 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 existed'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... epacer le texte de la bordure... */
border-left: 1em solid green; /* ... que nous définissons justement là (un peu gros, d'ailleurs) */
background-color: black; /* On ne se gène pas : Matrix rullezzzzzzzz..... */
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 */
}Paragraphe introductif sur la balise <code></code> (remarquez le code en ligne ! ) :
<code><pre>Ceci est un bout de code,
Ben oui ça ne se voit pas !</pre></code>Vous pouvez aussi vous resrvir de ce que nous venons de faire pour code (les définir ensemble) pour styler les sample...
Le même genre de formatage 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 immitant les touches d'un clavier :
kbd {
border: 2px outset;
padding: 2px;
background-color: #E5E5E5;
}Pour copier un texte, utilisez Ctrl+C, si vous voulez le couper, c'est Ctrl+X. Et pour le coller, utilisez la combinaison Ctrl+V ! C'est simple, rapide, et efficace.
Du plus bel effet ! Et sans utiliser d'image (important).
« Le code HTML des balises de code
Pour styler blockquote, il n'y a pas grand chose de neuf par rapport à code. En effet, certains navigateurs ou clients d'e-mails formattent ces blocks 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 bout 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 }