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

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 rendent 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. le Couleur La propriété définit la couleur de premier plan (par exemple le texte). La taille de la police dépend de la taille de police propriété.

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 HTML et 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 le style attribut 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, incorporer. En utilisant cette approche, nous rassemblons toutes les déclarations de style dans un style élément dans le diriger 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ées vers la tête, chaque règle n’est plus associée à un élément. Nous aurions pu déclarer La couleur rouge, mais qu’est-ce qui devrait avoir cette couleur?

C’est ici que Sélecteurs CSS Entrez. 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 ce qui suit:

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, tant qu’il est dans

Mots clés.

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 le style élément directement dans votre document, vous pouvez les déplacer vers un fichier séparé.

<link rel="stylesheet" href="https://www.makeuseof.com/what-is-css-used-for/styles.css" />

Collez ce code dans le balises 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 H1 L’élément semble grand et audacieux, 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 situent 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.

Vous pouvez utiliser les feuilles de style dans différents contextes, au-delà de l’écran. le médias attribut du relier L’élément définit les types de supports auxquels la feuille de style s’applique. Par exemple, vous pouvez définir un feuille de style pour impression en utilisant un balisage comme celui-ci:

<link rel="stylesheet" href="https://www.makeuseof.com/what-is-css-used-for/print.css" media="print" />

Vous pouvez rassembler des styles communs dans une seule feuille de style globale et des styles spécifiques au support 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é.

En rapport: 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 belle 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.

Capture d'écran d'exemples de propriétés CSS utilisées dans un extrait de code

Aide-mémoire sur les propriétés CSS3 essentielles

Maîtrisez la syntaxe CSS essentielle avec notre feuille de triche sur les propriétés CSS3.

A propos de l’auteur

Bobby Jack
(42 articles publiés)

Bobby est un passionné de technologie qui a travaillé comme développeur de logiciels pendant la majeure partie de deux décennies. Il est passionné de jeux vidéo, travaille en tant que rédacteur de critiques chez Switch Player Magazine et est immergé dans tous les aspects de la publication en ligne et du développement Web.

Plus de Bobby Jack