Les feuilles de styles
Imaginez le pire
Nous savons maintenant que pour ajouter une mise en forme à notre page, il nous suffit de choisir les bonnes propriétés CSS et de les appliquer aux balises concernées à l'aide de l'attribut style.
Si le processus s'arrêtait ici, nous serions forcés de répéter chaque propriété dans chaque balise dans chaque page. Par exemple, nous devrions ajouter l'attribut style="font-family:verdana;" dans chaque balise p, dans chaque h1, dans chaque h2, chaque li etc. de la page index.html, de la page profil.html, la page faq.html, etc. uniquement pour changer la police de caractères.
Évidemment, il existe une manière beaucoup plus efficace de procéder.
Comment utiliser les propriétés CSS
La façon d'utiliser les propriétés CSS dépend de l'impact que l'on veut donner à la mise en page.
- Certaines mises en page ne s'appliquent qu'à un seul élément d'une seule page du site.
- C'est le cas par exemple pour le positionnement particulier d'une image.
- À ce moment, il sera possible de mettre cette propriété particulière à l'intérieur même de la balise visée.
- On utilisera alors l'attribut
style.
- Certaines mises en page se retrouvent seulement sur une page.
- C'est le cas par exemple de la mise en page des cellules d'un tableau spécifique à une page.
- À ce moment, il faudra mettre la propriété dans le contenu de la balise
<head></head>
- On utilisera alors la balise
<style></style>.
- Comme la propriété se retrouve alors loin de la/les balises qu'elle doit colorer, nous devons utiliser une règle CSS et un sélecteur pour pointer les bons éléments.
- Certaines mises en page se retrouvent sur toutes les pages d'un site.
- C'est le cas par exemple de l'entête du site.
- Il serait peu commode de devoir mettre la propriété
background-color:red; dans chacune de nos pages.
- Il serait encore plus navrant de devoir changer cette propriété sur chacune de nos pages à la demande du client.
- Nous allons dans ce cas mettre la propriété dans un fichier externe et faire référence à ce fichier dans chacune de nos pages. Un peu comme le logo du site, qui n'est pas réellement dans chacune des pages, mais dans un fichier séparé.
- Nous aurons à ce moment-là encore besoin d'une règle CSS.
Attention! Dans un site Web, on ne peut pas se contenter de choisir une seule de ces trois méthodes. Il s'agit de composer un savant mélange de chacune d'elles.
Une règle pour habiller nos éléments
- Une règle CSS est le regroupement de propriétés CSS appelés par un sélecteur. (démo)
- On peut placer une règle CSS dans une balise
<style></style> dans le <head></head> de la page.
- On peut également les placer dans un fichier texte qui porte l'extension
.css. Ex.: monsite.css. Le fichier CSS pourra être appelé par la page à l'aide de la balise <link/>
- L'ensemble des règles d'une balise
<style></style> ou d'un fichier CSS s'appelle feuille de styles.
- On peut appliquer plusieurs feuilles de styles à une page Web;
- Une règle CSS à l'air de ceci :selecteur{proprietes_css}
- Le sélecteur sert à indiquer à quels éléments s'appliqueront les propriétés CSS que contient la règle CSS. Pour l'instant, le sélecteur n'est que le nom d'une balise
h1 {...} ou le nom d'une classe précédé d'un point .intro {...}.
Où placer une propriété CSS
Pour affecter tout un site
Pour affecter une seule page
Pour affecter un seul élément
