Sur le web "moderne", il est conseillé de séparer les informations (ce que l'on dit) de la mise en forme (comment c'est présenté)
et des traitements (ce qui se passe quand on clique ici ou là).
Cette manière de procéder offre plusieurs avantages parmi lesquels
Le principe est simple. Dans une page à part, on va définir un style pour chaque type de balise. Par exemple, on voudra que tous les paragraphes (<p> ...</p>)
de notre page seront écrits avec une police Times New Roman, de taille 12, en marron foncé, avec un espace avant et après de 0,25cm et un retrait à gauche de 0,5cm.
A partir de là, tous les textes compris entre les balises <p> ...</p> sur toutes les pages de notre site auront le même aspect. Si un jour, je décide que je préfère
le bleu foncé au marron, il me suffira de transformer marron en bleu pour que tous les paragraphes de mon site changent de couleur.
Pour simplifier cette mise en forme, nous ferons quatre parties
Mais nous commencerons par voir comment on écrit une feuille de style et comment on la lie à nos pages.
A nouveau, il s'agit d'une page ne comprenant que du texte, que l'on peut donc écrire avec un éditeur de texte, un traitement de texte ou un éditeur spécialisé.
Cette page commencera par la ligne suivante
"@charset "iso-8859-1";"
(On se rappelle que dans l'entête de notre page html on avait déclaré le même charset qui permet de lire les caractères français.)
Ensuite il suffira de taper le nom d'une balise et on mettra toutes les caractéristiques que l'on veut attacher à cette balise entre une accolade ouvrante ( { ) et une accolade fermante ( } ). Ces accolades se font respectivement en tapant AltGr 4 et AltGr + . Pour rendre la lecture d'une feuille de style plus lisible, on la présentera de la sorte :
@charset "iso-8859-1";"
p {
...
...
...
}
Les feuilles de style devront être enregistrées (sauvegardées) en texte brut (comme nous l'avons vu pour les pages html) mais avec une extension ".css". Notre feuille de style s'appellera donc par exemple "ma_feuille_style.css".
Il suffira d'insérer dans l'entête de chaque page de notre site la balise suivante :
<link rel="stylesheet" type="text/css" href="ma_feuille_style.css" / >
balise dans laquelle on indique un lien (link) vers une feuille de style (stylesheet) de type css (text/css), lien dont on donne le nom (ma_feuille_style.css) et éventuellement le chemin (s'il est dans un sous dossier).
Attention : cette ligne devra être insérée dans l'entête de chacune des pages qui constituent notre site.
On va travailler sur la police de caractères, police qui se dit "font" en anglais. On va définir les attributs de la police, notamment, son nom, sa taille, sa graisse, son style... le tout étant ... en anglais.
Chaque attribut sera suivi de ":" et de la valeur qu'on veut lui donner entre guillemets suivis d'un-point virgule.
| nom de police | font-family:"Times New Roman"; | Il est conseillé de mettre des noms de police "classique" que l'on trouve sur tous les ordinateurs. |
| taille de police | font-size:"12pt"; | On peut aller de 5 ou 6 points (très petit) à 20 ou 30 points (très gros)(l'unité "point" s'écrit "pt"). |
| Graisse de la police | font-weight:"400"; | La graisse est normalement exprimée en centaine. A partir de 700, on a du "gras" |
| Style de la police | font-style:italic; | Pour écrire en italique |
| Style de caractères | font-variant:"small-caps"; | Pour écrire en petites majuscules. |
Avant de commencer, on va regarder comment le navigateur fonctionne. Chaque balise définit une boite (aussi appelée "conteneur" ou "bloc"). Toutes les boites sont rectangulaires et comprennent 4 parties illustrées sur le dessin ci-dessous.
Le contenu (ce que l'on écrit) est entouré d'un intervalle (padding), cerné par une bordure (border) autour de laquelle se trouve une marge (margin).
Les trois éléments (padding, border, margin) peuvent se décomposer suivant leur 4 côtés -- haut, droite, bas et gauche (dans le sens des aiguilles d'une montre) -- avec
malheureusement des noms anglais comme on le voit dans le dessin ci-dessous:
On peut donner la même valeur à ces 4 éléments en indiquant par exemple "padding:10px" (où "px" est le symbole de l'unité pixel)
ou bien on peut donner à chacun une valeur différente comme par exemple "padding-top:10px;padding-right:15px;padding-bottom:5px;padding-left:30px;"
L'élément bordure (border) peut lui aussi se décomposer en top, right, bottom et left mais il a trois paramètres:
On pourra donc avoir "border: 2px, dotted, red" pour avoir l'ensemble du conteneur entouré par une bordure en pointillés rouges de 2 pixels d'épais ou
"border-bottom: 1px, solid, blue;" pour avoir le contenu souligné d'un trait continu bleu de 1 pixel d'épais.
En plus des couleurs de bordure, on peut modifier la couleur du texte (color) et la couleur de fond (background-color) de chaque conteneur.
Il y a trois manières d'indiquer la couleur:
Une couleur en synthèse additive est obtenue par le mélange de trois couleurs fondamentales, le rouge (red), le vert (green) et le bleu (blue) d'où l'abréviation rgb.
Pour chaque couleur, on a un "pot" de 255 unités. Si je mets 255 unités de rouge, 255 unités de vert et 255 unités de bleu j'obtiendrai un blanc pur. Si à l'inverse je mets 0 unité de chaque couleur, j'obtiendrai du noir pur.
255 unités de rouge, 0 de vert et 0 de bleu me donneront du rouge pur... Il y a 64 millions de combinaisons possibles! Pas facile de s'y retrouver. Le meilleur moyen est de se servir d'un logiciel de dessin (ou de photo) qui vous donne la composition de
chaque couleur. Lorsqu'on a cette composition, on peut en passer la valeur à l'attribut color ou à l'attribut background-color de la manière suivante:
color:rgb(140,0,0) pour des caractères (ou bordure) marron foncé.
background-color:rgb(255,255,200) pour un fond jaune pâle
On risque certainement, sur un site de plusieurs pages, de vouloir des paragraphes présentés différemment des autres, par exemple un paragraphe important que je voudrais mettre en valeur par du gras, ou une couleur différente.
Ceci est bien évidemment possible. On va adjoindre à ce paragraphe une "classe" dont on définira le style. Pratiquement, cette opération va se faire en deux temps:
1. Dans la page html, on ajoutera dans la balise ouvrante du paragraphe que l'on veut modifier class="nom_de_la_classe"de la manière suivante:
<p class="nom_de_ma_classe">
...
</p>
Cette classe pourra bien sûr être utilisée pour plusieurs paragraphes auquel je voudrais donner l'aspect particulier propre à cette classe.
2. Dans la feuille de style, on définira les caractéristiques de la classe de la même manière qu'on l'avait fait pour les balises, mais en faisant précéder le nom de la classe d'un point. On aura donc par exemple:
.nom_de_ma_classe {
font-weight:800;
font-color:rgb(255,50,255);
}
Remarque : Comme on les a définies ci-dessus, les classes ne sont pas liées à une balise en particulier mais peuvent être utilisées avec toutes les balises. Je pourrai très bien avoir une balise <h4> à laquelle j'attacherai la classe "nom_de_ma_classe"; je taperai donc <h4 class="nom_de_ma_classe" >Mon titre </h4> ce qui me donnera pour résultat:
c'est à dire un titre de niveau 4, en gras et en rose/mauve. Je pourrai obtenir le même effet pour une liste, un tableau...
Les balises héritent des propriétés de la balise parente.
Une balise <p> </p> se trouve forcément à l'intérieur d'une balise <body> </body>. Si je ne définis pas une police particulière pour mes balises
<p> </p>, elles utiliseront la police définie dans la balise <body> qui les englobe
Il est donc intéressant de définir pour la balise <body> une police, une couleur, une couleur de fond... qui seront reprises dans toutes les balises si je n'en décide pas autrement.