Les feuilles de style en cascade, ou « CSS » n’existaient pas quand les premiers navigateurs ont fait leur apparition. Malgré que les CSS soient apparues quelques années plus tard, les CSS ont tellement amélioré la conception Web que leur utilisation est rapidement devenue à grande échelle (ceci, lorsque le support de navigateur deviendra quasi universel). Aujourd'hui, tous les bons concepteurs Web utilisent les feuilles de styles pour créer un site Web. .
Un gros avantage offert par CSS est de permettre l’utilisation d’un style homogène dans tout le site Web. Il n'est pas nécessaire de répéter le style en copiant et collant. Il suffit d'attribuer une «classe» à un élément et de définir l'apparence de cet élément dans la feuille de style. Chaque élément réutilisera par la suite le même style.
Vous avez peut être remarqué dans le tutoriel HTML l'attribut de la balise SPAN était class = "spanExample". Le nom "spanExample" a été choisi pour ce tutoriel, mais il pourrait bien avoir été "myBoldText" ou "superAwesomeFont"; le nom du fichier n'a aucune importance en autant qu'il correspond à une classe dans le fichier CSS.
Le nom devient alors ce qu'on appelle un « sélecteur », mais un nom de classe est juste un type de sélecteur. Nous allons examiner 4 types de sélecteurs courants, mais toutes les définitions de style suivent cette structure de base:
selector {
property: value;
}
Pour une liste complète des sélecteurs, visitez le site W3C.
|
Ligne #
|
Collez le contenu de cette colonne dans le fichier style.css et sauvegardez
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
html {
background-color: #1E77AE;
}
body {
margin: 30px;
padding: 20px;
background-color: white;
}
.spanExample {
font-weight: bold;
}
#lnkAdeo {
color: red;
}
#lnkAdeo:hover {
background-color: #C3D4DF;
}
|
Non seulement il y a beaucoup plus de sélecteurs, mais il y a beaucoup plus de propriétés biens au-delà des couleurs de base et de l'espacement examinées brièvement ici. W3Schools offre une liste plus complète des propriétés CSS.