1. Principe de base
Le but du CSS est de définir la présentation d'un contenu HTML.
Voici une analogie qu'on peut faire avec une maison. Une maison est composée de poutres pour les murs et le toit, de ciment, de briques et d'autres matériaux pour bâtir un squelette solide. Une fois que la structure est en place, on peut appliquer, selon les goûts du propriétaire, un fini de briques rouges aux murs extérieurs, peinturer les murs intérieurs blancs et poser une couche de bardeaux noirs sur la toiture. Avec une page Web, le HTML représente la structure de la maison et le CSS représente la finition de la maison.
En CSS, on applique sur une ou plusieurs balises un style d'affichage. Un style est un ensemble de propriétés CSS qui définit comment le contenu d'une balise est affichée. On peut définir ses couleurs, sa bordure, la police utilisée, ses marges, son espacement, sa position, etc.
On peut aussi faire la séparation entre HTML et CSS de cette façon: Le HTML explique le contenu à l'aide d'une structure, le CSS le présente. En effet, on indique à l'aide de balises HTML qu'un texte est le titre de la page (<title>), qu'un autre texte forme un paragraphe (<p>) ou que des renseignements forment une liste (<ul>). En CSS toutefois, on indique seulement la présentation. On indique comment l'utilisateur devrait voir le contenu.
Pour appliquer ces styles, il faut tout d'abord SÉLECTIONNER la balise. Il existe trois moyens pour appliquer des styles: le moyen spécifique à une balise, le moyen général à une page HTML et la moyen général à un site.
1.1 Les trois façons d'appliquer un style.
| 1.1.1 Avec l'attribut style | 1.1.2 Avec la balise <style> |
|---|---|
<body style="background: url(imagedefond.jpg) no-repeat;"> </body> |
<head>
<style type="text/css">
body { background: url(imagedefond.jpg) no-repeat; }
</style>
</head>
<body>
</body>
|
1.1.3 Avec un fichier .css
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> </body>
Fichier style.css:
body { background: url(imagedefond.jpg) no-repeat; }
Noter qu'il n'y a qu'un bref aperçu des fichiers. Ils ne possèdent pas de structure HTML complète. (doctype, balise head, title, définition de l'encodage...)
1.1.1 L'attribut HTML style : le moyen spécifique à la balise
Le moyen le plus simple, rapide et spécifique d'appliquer un style à une balise est de placer les propriétés CSS directement dans cette balise. On utilise l'attribut style. (<uneBalise style=""></uneBalise>)
Par exemple, pour appliquer une bordure noire, un fond jaune et une couleur de texte rouge sur une balise <p>, on doit écrire:
<p style="border:2px solid black;background:yellow;color:red;"> Un paragraphe en rouge, avec fond jaune et une bordure noire. </p>
Résultat:
Un paragraphe en rouge, avec fond jaune et une bordure noire.
L'attribut style="" peut être utiliser sur la majorité des balises HTML. (sauf les balises !DOCTYPE, html, head, base, meta, title)
1.1.2 La balise HTML style : le moyen général à la page
Dans la balise <style type="text/css"></style> placée à l'intérieur de la balise <head></head>. On utilise ce moyen lorsqu'on veut séparé notre code CSS de notre page sans créer un fichier supplémentaire.
1.1.3 Inclusion de fichier : le moyen général au site
Pour utiliser ce moyen, il faut écrire nos règles CSS dans un fichier avec l'extension .css. Ce fichier est de type texte tout comme le (X)HTML. On lie le fichier .css (appelé feuille de style) au document HTML avec deux types de commandes. On utilise ce moyen lorsqu'on veut séparer notre code CSS du fichier HTML ou lorsqu'on recherche une présentation uniforme à travers le site en entier (pour plusieurs pages HTML).
On peut inclure un fichier css à partir du code HTML avec la balise LINK ou à partir du code CSS avec la méthode @import.
<!-- Ceci est la méthode HTML --> <head> <link rel="stylesheet" type="text/css" href="repertoire/nomFichier.css"> </head>
/* Ceci est la méthode CSS qui ne fonctionne pas avec Netscape 4 */ @import "repertoire/nomFichier.css";
1.2 Les règles CSS
Une règle consiste en un ou des SÉLECTEURS CSS et un BLOC de PROPRIÉTÉS. Un bloc de propriétés est un ensemble de propriétés entourées d'accolades { et }.
On peut écrire des règles CSS dans les balises <style> d'un document HTML ou XHTML et dans des fichiers .css uniquement. On ne peut pas utiliser une règle CSS avec sélecteur dans l'attribut style="" d'une balise.
Voici la syntaxe d'une règle (les ... indiquent une suite) :
/* Le BLOC de propriétés est formé des accolades et des propriétés à l'intérieur des {} */
Selecteur { propriete : valeur; }
Selecteur1, Selecteur2, ... {
propriete1 : valeur;
propriete2 : valeur;
...
}
Voici des exemples de règles très simples.
p { color: red; }
td { border: 1px solid blue; }
div { background-color: yellow; }
Voici des exemples de règles plus complexes. Il s'agit seulement d'un aperçu pour vous donner une idée.
div#unId p.unclasse:hover, div#unId2 p.uneautreclasse { color:red;margin:0 1px 1em 3px;padding:1em;background:white; }
table.facture, table.paye { border-spacing:none; border:1px solid black; border-collapse: collapse; margin:0; }
table.facture td, table.paye tbody td { border:3px double #ddd; }
html > body { color: gray; }
1.3 Les sélecteurs
Les sélecteurs sont des expressions qui servent à sélectionner une ou plusieurs balises. Voici les 4 sélecteurs de base les plus utilisés.
1.3.1 Nom de balise : BALISE {}
Pour sélectionner toutes les balises avec le même nom, il suffit d'écrire le nom de la balise.
/* Sélectionne toutes les balises <img> */
img { }
/* Sélectionne toutes les balises <body>,
Seulement une en fait, puisqu'il doit y avoir qu'une seule balise body par document HTML */
body { }
/* Sélectionne toutes les balises H1, H2, H3 */
h1, h2, h3 { }
1.3.2 Attribut id : #ID {}
Lorsqu'un élément se retrouve une seule fois dans le document, il est unique et peut être définit par l'utilisation de l'attribut id="". Par exemple, si j'ai un document HTML avec ce code:
<p id="monParagraphe"> Ce paragraphe contient une image et est écrit en rouge. <img src="uneImage.gif" id="monImageUnique" alt=""> </p> <p>Ce paragraphe n'est pas en rouge</p>
Je peux les sélectionner avec ceci:
/* Sélection du paragraphe uniquement */
#monParagraphe {
color: red;
}
/* Sélection de l'image uniquement */
#monImageUnique {
border: 10px solid red;
}
1.3.3 Attribut class: .CLASS {}
Lorsqu'on veut sélectionner plusieurs balises et appliquer un style commun, on peut utiliser une classe. Il faut indiquer un nom dans l'attribut class="". Par exemple, si j'ai un document HTML avec ce code:
<p class="important"> Ce paragraphe contient une image et est écrit en rouge. <img src="uneImage.gif" class="sansBordure" alt=""> </p> <p class="important">Un autre paragraphe rouge</p> <p>Non rouge, <strong class="important">Rouge</strong>, non rouge</p>
Je peux les sélectionner avec ceci:
/* Sélection de toutes les balises avec l'attribut class="important" */
.important {
color: red;
}
/* Sélection de toutes les images avec l'attribut class="imageSansBordure" */
img.sansBordure {
border: 0px;
}
1.3.4 Balise enfant : A B {}
Ce sélecteur permet de sélectionner tous les classes qui sont sous une autre balise. Il suffit d'écrire deux sélecteurs séparés d'un espace.
/* Sélectionne toutes les balises <em> sous une balise <p> */
p em { color: red; }
/* Sélectionne toutes les balises <strong> sous une balise <div> */
div strong { color: yellow; }
/* Sélectionne toutes les balises <td> sous
une balise <table> qui possède un attribut id="idTable" */
#idTable td { color: blue; }
/* Sélectionne toutes les balises <th> sous
une balise <table> qui possède un attribut class="uneClasse" */
table.uneClasse th { color: green; }
Exemple de code HTML
<p> <em>Ce texte est rouge</em> <strong>Noir, <em>Rouge</em>, Noir</strong> </p> <div> <strong>jaune, <em>Jaune</em>, Jaune</strong> </div> <div> <p> <strong>Jaune</strong> <em>Rouge</em> </p> <em>Noir</em> </div> <table id="idTable"> <tr><th>Noir</th></tr> <tr><td>Bleu</td></tr> </table> <table class="uneClasse"> <tr><th>Vert</th></tr> <tr><td>Noir</td></tr> </table>
1.4 Glossaire
- CSS
- Cascaded Style Sheet: Feuille de style en cascade, appelé ainsi car les propriétés peuvent être définies en cascades. Exemples: body p{}, body p.unNom {}, body.unAutreNom p.unNom, c'est sélecteurs sont de plus en plus précis...
- Style
- Ensemble de propriétés CSS appliquées à une ou plusieurs balises
- Propriété
- Mot-clé pour identifier un attribut de présentation (color pour couleur, background-color pour la couleur de fond, position, pour la position d'un élément, ...)
- Valeurs d'une propriété
- Ensembles des valeurs permises pour une propriété
- Sélecteur
- Code permettant de sélectionner une ou plusieurs balises.
- Bloc de propriétés
- Ensemble de propriétés définies entre accolades à gauche d'un sélecteur.{ }.
- Règles
- Ensemble d'un ou de plusieurs sélecteurs avec un bloc de propriétés. Exemple:
div, p, img.special, #piedPage { margin: 0px; padding: 0px; }
Hyperliens sur le CSS en Français