Qu'est-ce que le CSS ?

Styles par défaut du navigateur

Dans le module Structurer le contenu avec HTML, nous avons expliqué ce qu'est le HTML et comment il est utilisé pour baliser les documents. Ces documents sont lisibles dans un navigateur web. Les titres apparaissent plus grands que le texte normal, les paragraphes passent à une nouvelle ligne et ont un espace entre eux. Les liens sont colorés et soulignés pour les distinguer du reste du texte.

Ce que vous voyez, ce sont les styles par défaut du navigateur — une mise en forme très basique que le navigateur applique au code HTML afin de garantir la lisibilité de la page, même si l'auteur·ice de celle-ci n'a pas définit de style explicite. Ces styles sont définis dans des feuilles de style CSS par défaut intégrées au navigateur — ils n'ont rien à voir avec le code HTML.

Le web serait un endroit ennuyeux si tous les sites web ressemblaient à ça. C'est pourquoi vous devez apprendre le CSS.

À quoi sert le CSS ?

En utilisant le CSS, vous pouvez contrôler exactement l'apparence des éléments HTML dans le navigateur, présentant vos documents à vos utilisateur·ice·s avec le design et la mise en page que vous souhaitez.

• Un document est généralement un fichier texte structuré à l'aide d'un langage de balisage, le plus couramment HTML (ces fichiers sont appelés documents HTML). Vous pouvez également rencontrer des documents écrits dans d'autres langages de balisage tels que SVG ou XML. Un document HTML contient le contenu d'une page web et en définit la structure.
• Présenter un document à un·e utilisateur·ice signifie le convertir en une forme utilisable par votre audience. Les navigateurs comme Firefox, Chrome, Safari et Edge sont conçus pour présenter visuellement les documents, par exemple sur un écran d'ordinateur, un projecteur, un appareil mobile ou une imprimante. Dans un contexte web, c'est généralement appelé rendu ; nous avons fourni une description simplifiée du processus par lequel une page web est rendue dans Comment les navigateurs chargent les sites web.

CSS peut être utilisé à de nombreuses fins liées à l'apparence et à la convivialité de votre page web, par exemple :

• Mise en forme du texte, y compris le changement de la couleur et de la taille des titres et des liens.
• Création de mises en page, telles que des grilles ou des mises en page à colonnes multiples.
• Effets spéciaux tels que l'animation.

Le langage CSS est organisé en modules qui contiennent des fonctionnalités liées. Par exemple, jetez un œil aux pages de référence MDN pour le module Arrière-plans et bordures pour découvrir son objectif et les propriétés et fonctionnalités qu'il contient. Dans nos pages de module, vous trouverez également des liens vers les Spécifications qui définissent les technologies.

Bases de la syntaxe CSS

CSS est un langage basé sur des règles — vous définissez des règles en définissant des groupes de styles qui doivent être appliqués à un élément particulier ou à des groupes d'éléments sur votre page web.

Par exemple, vous pouvez décider de mettre en forme le titre principal de votre page en texte rouge et de grande taille. Le code suivant montre une règle CSS très simple qui permet d'obtenir ce résultat :

h1 {
  color: red;
  font-size: 2.5em;
}

• Dans l'exemple ci-dessus, la règle CSS commence par un sélecteur. Cela sélectionne les éléments HTML que nous allons mettre en forme. Dans ce cas, nous stylisons les titres de niveau un (<h1>).
• Nous incluons ensuite un ensemble d'accolades — { }.
• Les accolades contiennent une ou plusieurs déclarations, qui prennent la forme de paires propriété et valeur. Nous spécifions la propriété (par exemple, color dans l'exemple ci-dessus) avant les deux-points, et nous spécifions la valeur de la propriété après les deux-points (red est la valeur définie pour la propriété color).
• Cet exemple contient deux déclarations, une pour color et une autre pour font-size.

Les différentes propriétés CSS ont des valeurs autorisées différentes. Dans notre exemple, nous avons la propriété color, qui peut prendre différentes valeurs de couleur. Nous avons également la propriété font-size. Cette propriété peut prendre différentes unités de taille comme valeur.

Une feuille de style CSS contient de nombreuses règles de ce type, écrites les unes après les autres.

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

Vous pouvez constater que vous apprenez rapidement certaines valeurs, tandis que d'autres nécessitent une recherche. Les pages de propriétés individuelles sur MDN vous offrent un moyen rapide de rechercher des propriétés et leurs valeurs.

Comment le CSS est-il appliqué au HTML ?

Comme expliqué dans Comment les navigateurs chargent les sites web, lorsque vous naviguez vers une page web, le navigateur reçoit d'abord le document HTML contenant le contenu de la page web et le convertit en un arbre DOM.

Ensuite, toutes les règles CSS trouvées dans la page web (soit insérées directement dans le HTML, soit dans des fichiers .css externes référencés) sont triées dans différents « groupes », en fonction des différents éléments auxquels elles sont appliquées (comme défini par leurs sélecteurs). Les règles CSS sont ensuite appliquées à l'arbre DOM, ce qui donne une arborescence de rendu, qui est ensuite peinte dans la fenêtre du navigateur.

Regardons un exemple. Tout d'abord, définissons un extrait HTML auquel le CSS peut être appliqué :

<h1>CSS est génial</h1>

<p>Vous pouvez mettre en forme le texte.</p>

<p>Et créer des mises en page et des effets spéciaux.</p>

Maintenant, notre CSS, répété de la section précédente :

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

Ce CSS :

• Sélectionne tous les éléments <h1> de la page, coloriant leur texte en rouge et les agrandissant par rapport à leur taille par défaut. Comme il n'y a qu'un seul <h1> dans notre exemple HTML, seul cet élément reçoit le style.
• Sélectionne tous les éléments <p> de la page, leur donnant une couleur de texte et de fond personnalisée ainsi qu'un peu d'espace autour du texte. Il y a deux éléments <p> dans notre exemple HTML, et ils reçoivent tous les deux le style.

Quand le CSS est appliqué au HTML, le rendu est le suivant :

Jouez avec un peu de CSS

Essayez de jouer avec l'exemple ci-dessus. Pour ce faire, appuyez sur le bouton « Exécuter » dans le coin supérieur droit pour le charger dans notre éditeur MDN Playground.

Faites ce qui suit :

1. Ajoutez un autre paragraphe de texte sous les deux existants, et notez comment la deuxième règle CSS est automatiquement appliquée au nouveau paragraphe.
2. Ajoutez un sous-titre <h2> quelque part sous le <h1>, peut-être après l'un des paragraphes.
3. Essayez de donner aux éléments <h2> une couleur différente en ajoutant une nouvelle règle CSS. Faites une copie de la règle h1, changez le sélecteur en h2 et changez la valeur de color de red à purple, par exemple.
4. Si vous vous sentez aventureux, essayez de rechercher de nouvelles propriétés et valeurs CSS dans la référence CSS de MDN pour les ajouter à vos règles !

Pour un peu de pratique supplémentaire avec les bases du CSS, consultez Écrivez vos premières lignes de CSS&nbs! ^(angl.) de Scrimba ^{Partenaire d'apprentissage MDN}. Ce cours fournit un aperçu utile de la syntaxe de base du CSS et propose un défi interactif où vous pouvez vous exercer davantage à écrire des déclarations CSS.

Résumé

Maintenant que vous avez une certaine compréhension de ce qu'est le CSS et de son fonctionnement, passons à la pratique en écrivant vous-même du CSS et en expliquant la syntaxe plus en détail.

• Aperçu : Bases de la mise en forme CSS
• Suivant