Que sont les feuilles de style en cascade et à quoi sert CSS?

Hibou Gourou

CSS appartient à un triplet de technologies Web de base aux côtés de HTML et JavaScript. Avec une planification minutieuse, CSS contribue à une séparation des préoccupations. Des ressources indépendantes contrôlent la structure d'un contenu, sa présentation et son comportement.

Les feuilles de style jouent un rôle important dans l'accessibilité, l'évolutivité et même les performances Web. En tant qu'auteur de contenu ou concepteur Web, ils vous permettent de contrôler la manière dont les appareils affichent le contenu. De la mise en page à la taille et à la couleur de la police, CSS transforme le contenu en de belles pages.

À quoi ressemble CSS?

CSS est un grand langage – il y a beaucoup de choses différentes à styliser! Mais sa syntaxe est simple, avec seulement quelques règles à apprendre.

Les éléments HTML ont diverses propriétés que CSS peut styliser. La propriété color définit la couleur du premier plan (par exemple du texte). La taille de la police dépend de la propriété de la taille de la police .

Chaque propriété peut être définie sur une valeur prise en charge. L'affectation d'une valeur à une propriété est une «déclaration». Généralement, ils ressemblent à ceci:

 property: value

Par example:

 color: red

Les valeurs de différentes propriétés peuvent sembler très différentes, même les valeurs de la même propriété. Par exemple, voici deux autres façons d'écrire la déclaration précédente:

 color: #ff0000
 color: rgb(255, 0, 0)

Comment le HTML et les feuilles de style s'associent

Vous pouvez combiner HTML et CSS de différentes manières, chacune avec ses avantages.

Écriture de styles en ligne

La méthode la plus simple consiste à attacher des déclarations de style directement à un élément du fichier HTML. Vous pouvez le faire en utilisant l'attribut style comme ceci:

 <body style="color: red">
 <p>Most of this text is red …</p>
 <p style="color: blue">… but this isn't!</p>
 </body>

Bien que le style d'éléments en ligne comme celui-ci puisse être pratique, il présente plusieurs inconvénients. Pour commencer, cela complique le HTML, le rendant plus difficile à lire en un coup d'œil. C'est aussi gênant à maintenir: imaginez un long document dans lequel on souhaite définir la couleur de chaque paragraphe. Il s'agit de CSS, mais pas de "Feuilles de style".

Incorporer les styles dans la tête

Vous pouvez commencer à voir à quoi ressemble une feuille de style avec le deuxième mécanisme, l' incorporation . En utilisant cette approche, nous rassemblons toutes les déclarations de style dans un élément de style dans la tête de notre document. Cela ressemblera à quelque chose comme ceci:

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 /* style instructions go here */
 </style>
 </head>
 <body>
 ...

Cependant, nos instructions de style ont besoin d'un peu plus de détails qu'avant. Depuis que nous les avons déplacés vers la tête, chaque règle n'est plus associée à un élément. On aurait peut-être déclaré la couleur: le rouge , mais qu'est-ce qui devrait avoir cette couleur?

C'est là qu'interviennent les sélecteurs CSS . Ils nous permettent de cibler des parties spécifiques de la page et de définir leur style en un seul endroit, en utilisant cette syntaxe:

 selector {
 declaration1;
 declaration2;
 /* etc. */
 }

Par exemple, pour styliser le texte des paragraphes en bleu, nous pouvons spécifier les éléments suivants:

 p {
 color: blue;
 }

Dans cet exemple, le sélecteur est simplement p , qui correspond à tous les éléments de paragraphe de notre document. Il colorera tout le texte en bleu, à condition qu'il soit dans les balises <p> .

Lier une feuille de style externe

La dernière méthode à couvrir est la liaison. C'est, de loin, l'approche la plus utile et celle que vous devriez opter la plupart du temps. Au lieu d'incorporer des règles CSS dans l'élément de style directement dans votre document, vous pouvez les déplacer vers un fichier séparé.

 <link rel="stylesheet" href="styles.css" />

Collez ce code dans les balises <head> de votre fichier HTML pour lier votre feuille de style externe.

La puissance du CSS

Avec la méthode liée, nous exploitons une puissance fondamentale du CSS: la séparation des préoccupations. Toutes les informations sémantiques – ce que signifie le contenu – sont contenues dans le document HTML. Le style – à quoi il ressemble – se trouve dans un fichier séparé, la feuille de style.

Voici quelques avantages de cette séparation:

  • Vous pouvez changer une feuille de style simplement en modifiant la référence de fichier. Cela peut même se produire de manière dynamique. En une seule étape, vous pouvez modifier l'apparence et la convivialité d'une page.
  • De nombreuses pages peuvent partager les mêmes feuilles de style selon les besoins. En modifiant un seul fichier, vous pouvez mettre à jour l'aspect et la convivialité d'un site Web entier.
  • La division d'une page en «contenu» et «style» présente des avantages techniques. Les proxys et les navigateurs peuvent mettre en cache des fichiers individuels séparément. Cela signifie qu'un site peut envoyer ses informations de style une fois, plutôt que de les inclure dans chaque page.
  • Lors de la collaboration, différentes équipes peuvent exploiter leurs atouts, en créant et en modifiant des fichiers séparés sans s’affecter mutuellement.

Expliquer la cascade

Vous avez beaucoup appris sur les styles et les feuilles de style, mais qu'en est-il de la partie «en cascade» du CSS?

La cascade est ce qui décide des styles à utiliser lorsque plusieurs feuilles de style sont présentes. Vous avez vu comment un auteur peut spécifier des styles pour son contenu. Mais une autre caractéristique du CSS est qu'il donne également aux lecteurs et aux fabricants de navigateurs leur mot à dire en la matière.

Vous vous êtes peut-être déjà interrogé sur les styles par défaut. Par exemple, comment un élément H1 apparaît-il gros et gras, même sans aucune feuille de style d'auteur? C'est grâce à un ensemble de règles spéciales qui composent la feuille de style de l'agent utilisateur. Ces règles sont initialement appliquées par votre navigateur Web à chaque page que vous visitez.

La cascade spécifie qu'une feuille de style d'auteur s'applique après les styles d'agent utilisateur. Si notre navigateur dit «les titres sont en gras» mais que l'auteur de la page déclare «les titres de cette page sont légers», ils finiront par être légers.

Il existe une autre source de feuille de style qui confie un certain contrôle au lecteur. Tout utilisateur Web peut, en théorie, maintenir une feuille de style utilisateur avec des règles personnalisées. Celles-ci se trouvent au milieu: les règles utilisateur remplaceront les paramètres par défaut du navigateur, mais seront elles-mêmes remplacées par les styles d'auteur. Malheureusement, la prise en charge des feuilles de style utilisateur n'a jamais été répandue.

Cibler différents médias

Vous pouvez utiliser les feuilles de style dans différents contextes, au-delà de l'écran. L'attribut media de l'élément link définit les types de supports auxquels la feuille de style s'applique. Par exemple, vous pouvez définir une feuille de style pour l'impression à l' aide d'un balisage comme suit:

 <link rel="stylesheet" href="print.css" media="print" />

Vous pouvez regrouper les styles communs dans une seule feuille de style globale et les styles spécifiques aux supports dans des fichiers séparés. Il existe même des types de supports pour les présentations sonores ou en braille de votre contenu. CSS est un outil essentiel pour améliorer l'accessibilité.

Connexes: Comment naviguer sur le Web si vous êtes aveugle ou malvoyant

Des sites tels que Wikipedia utilisent CSS pour contrôler leur style d'impression, masquer les éléments indésirables et simplifier la mise en page.

CSS donne une bonne apparence au HTML

Les feuilles de style en cascade couvrent beaucoup: la cascade, l'héritage, les sélecteurs, les sources, les médias, etc. Mais leur puissance permet au Web moderne. Il s'agit d'un support qui offre des fonctionnalités intégrées de réutilisabilité, de flexibilité et d'accessibilité.

Pour voir toute la puissance du CSS et tout ce qu'il a à offrir, consultez notre aide-mémoire couvrant toutes les propriétés CSS3 essentielles.