Les feuilles de styles en cascades ou cascading style sheets (CSS), permettent de définir l'apparence d'un site web globalement, à partir d'un seul fichier, au format .css. Cela apporte l'avantage d'alléger les fichiers HTML du site, et de mettre à jour le site en ne modifiant qu'un seul fichier.
Il est possible de modifier le style d'une balise générale, comme <h1> </h1>, dans le fichier .css ou de créer des classes de styles, et d'appliquer ces classes aux balises. Cela se fait dans le fichier de style du site, que l'on nommera "styles.css" dans ce qui suit.
Il existe deux solutions pour appliquer des styles CSS, les feuilles de styles internes et externes.
On peut les définir pour une page donnée dans l'en-tête, avec le tag <style></style>:, par exemple, on peut définir la couleur de fond aqua (bleu mer) et la couleur des lettrages green (vert) comme ci-dessous, pour toute la page:
| <style type="text/css" media="screen"><!-- body { color: green; background-color: aqua } --></style> |
On peut également créer une seule feuille de style pour plusieurs page. Dans tous les fichiers où l'on veut appliquer le style CSS, il faudra mettre la référence à la feuille de style dans l'en-tête du document, avec la ligne:
| <link href="styles.css" rel="stylesheet" media="screen"> |
en prenant garde à mettre la référence complète vers styles.css dans l'option href. L'intérêt de cette technique est de pouvoir changer l'apparence de plusieurs pages en ne modifiant qu'une page!
La synthaxe générale d'une feuille de style CSS (interne ou externe) est la suivante:
| tag 1 {option1: value1; ...; optionN: valueN} ... tag M {option1: value1; ...; optionN: valueN} .class1 {option1: value1; ...; optionN: valueN} |
Les options définies pour des balises (<tag>) s'appliqueront à toutes les balises (<tag>) de la page, alors que les options définies pour des classes (.class) s'appliqueront aux balises affectées de la classe comme ceci:
| <tag class="classK">...</tag> |
2) appliquer la classe code à du texte:
| Salut <span class="code">D2P2</span>! | Salut D2P2! |
