Comment utiliser le CSS pour styliser une page web
CSS signifie Cascading Style Sheets (feuilles de style en cascade). Il définit comment les éléments d’une page web doivent être affichés. Sa syntaxe est simple et directe. Le CSS n’est pas un langage de programmation : il n’inclut ni conditions, ni boucles, ni fonctions. Il s’agit simplement d’un texte structuré qui indique au navigateur comment présenter les éléments à l’utilisateur.
Avant de commencer, assurez-vous d’avoir complété les sections précédentes, en particulier 1. Premiers pas 🧑🎓, 2. Aller plus loin 🚀, ainsi que la leçon sur le HTML.
Installation
Vous n’avez rien à installer pour cette leçon. Il vous suffit d’ouvrir un dossier vide dans VS Code, de créer un fichier index.html, puis d’y copier et coller le code de la leçon précédente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Alma Mater</title>
</head>
<body>
<h1>My Alma Mater: UQAM</h1>
<p>I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
<img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
<p>The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
</body>
</html>
CSS en ligne (inline styles)
Vous pouvez styliser directement des éléments HTML spécifiques en utilisant l’attribut style. La syntaxe CSS est composée de propriétés associées à des valeurs.
Par exemple, nous pouvons définir la color du premier paragraphe en blue et celle du second en red. Nous pouvons également modifier le font-weight pour le mettre en bold.
Notez qu’il existe de nombreuses façons de définir les couleurs en code. Ici, nous utilisons des noms de couleurs. Il existe environ 140 noms de couleurs reconnus que les navigateurs comprennent. Si vous souhaitez en savoir plus sur les couleurs, consultez ce tutoriel.
Dans l’attribut style, chaque paire propriété-valeur doit être séparée par un ;.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Alma Mater</title>
</head>
<body>
<h1>My Alma Mater: UQAM</h1>
<p style="color:blue; font-weight: bold;">I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
<img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
<p style="color:red; font-weight: bold;">The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
</body>
</html>
VS Code reconnaît certaines propriétés et valeurs CSS de base, comme les couleurs. Ici, il a ajouté un petit carré affichant la couleur sélectionnée. Cependant, cela ne fait pas partie du code : c’est simplement un guide visuel fourni par l’éditeur de code.
Utilisation de l’élément style
Sélectionner des éléments
Le CSS en ligne peut être utile pour des projets simples et rapides, mais il devient difficile à maintenir pour des projets plus complexes ou à long terme. Si vous souhaitez conserver votre CSS dans le fichier HTML, il est préférable de tout regrouper dans une balise style.
Avec le CSS en ligne, le navigateur sait exactement quel élément est stylisé. Cependant, lorsque l’on utilise l’élément style, il faut employer des sélecteurs pour indiquer quels éléments doivent être stylisés et comment.
La syntaxe suit cette structure : le sélecteur est défini en premier, suivi des paires propriété-valeur, placées entre des accolades. Les paires doivent être séparées par un ;. Par exemple, le code ci-dessous indique au navigateur d’appliquer un style en gras à tous les éléments p de la page.
p {
font-weight: bold;
}L’indentation ci-dessus sert uniquement à rendre le CSS plus lisible pour nous, les humains. Les navigateurs n’en ont pas besoin et se basent uniquement sur la structure du code. De nombreux développeurs utilisent des outils pour minifier leur CSS en supprimant les espaces et les retours à la ligne afin de créer des fichiers plus légers, qui se chargent plus rapidement et consomment moins de bande passante. Nous aborderons ce sujet dans une autre leçon.
Sélecteurs id
Mettons à jour notre code précédent pour utiliser l’élément style. Comme il sert uniquement à indiquer au navigateur comment afficher les éléments, nous le plaçons dans l’élément head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Alma Mater</title>
<style>
p {
font-weight: bold;
}
#first-paragraph {
color: blue;
}
#second-paragraph {
color: red;
}
</style>
</head>
<body>
<h1>My Alma Mater: UQAM</h1>
<p id="first-paragraph">I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
<img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
<p id="second-paragraph">The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
</body>
</html>
Avez-vous remarqué les sélecteurs #first-paragraph (ligne 12) et #second-paragraph (ligne 16) ? Et les attributs id dans le code HTML (lignes 23 et 25) ?
Puisque nous voulons que tous les éléments p soient en gras, nous utilisons le sélecteur p avec font-weight: bold. Cependant, nous voulons également que le premier paragraphe soit bleu et le second rouge, donc nous utilisons des id.
Dans le HTML, nous attribuons les id first-paragraph et second-paragraph. Cela nous permet de cibler ces paragraphes spécifiques en CSS à l’aide des sélecteurs #first-paragraph et #second-paragraph (notez le symbole #).
Gardez à l’esprit qu’un id doit être unique. Il ne doit apparaître qu’une seule fois par page.
Sélecteurs class
Les sélecteurs d’éléments (comme p) ciblent tous les éléments correspondants sur la page. Par exemple, tous les éléments p peuvent être stylisés en gras.
À l’inverse, les id sont utiles pour cibler un seul élément spécifique.
Mais que faire si vous souhaitez styliser plusieurs éléments sans affecter tous les autres ? La solution est d’utiliser les sélecteurs class.
Par exemple, ajoutons un troisième paragraphe et supposons que nous voulons que les deux derniers paragraphes soient rouges.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Alma Mater</title>
<style>
p {
font-weight: bold;
}
#first-paragraph {
color: blue;
}
.red-text {
color: red;
}
</style>
</head>
<body>
<h1>My Alma Mater: UQAM</h1>
<p id="first-paragraph">I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
<img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
<p class="red-text">The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
<p class="red-text">Montreal is a wonderful city. You should visit it!</p>
</body>
</html>
Dans le code ci-dessus, nous avons remplacé l’attribut id et la propriété second-paragraph par un attribut class avec la valeur red-text.
Nous pouvons maintenant utiliser le sélecteur de classe .red-text (notez le .) pour modifier le style de tous les éléments ayant cette class (ici, les deux derniers paragraphes).
Vous pouvez attribuer une classe à autant d’éléments que nécessaire.
En savoir plus sur les sélecteurs
Si vous souhaitez remplacer la valeur d’une propriété, il est important de comprendre la hiérarchie des sélecteurs :
- Les styles en ligne remplacent les styles définis par d’autres sélecteurs.
- Les sélecteurs
idremplacent les styles définis par les sélecteurs declasset d’éléments. - Les sélecteurs de
classremplacent les styles définis par les sélecteurs d’éléments. - Les sélecteurs d’éléments sont les moins spécifiques.
De plus, vous pouvez combiner plusieurs sélecteurs pour un style plus précis. En savoir plus ici.
Utilisation d’un fichier .css
À mesure qu’un projet web se développe, ses styles peuvent devenir assez complexes. Pour garder le code organisé et plus facile à maintenir, il est préférable de séparer le CSS dans un fichier dédié et de le lier au fichier HTML.
Dans cet exemple, nous avons créé un nouveau fichier appelé style.css et déplacé tout ce qui se trouvait auparavant entre les balises <style> et </style> vers ce fichier.
p {
font-weight: bold;
}
#first-paragraph {
color: blue;
}
.red-text {
color: red;
}Dans le fichier HTML, nous avons supprimé les balises <style> et </style> et ajouté un lien vers le nouveau fichier .css. Cela indique au navigateur d’appliquer les styles depuis le fichier externe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Alma Mater</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Alma Mater: UQAM</h1>
<p id="first-paragraph">I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
<img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
<p class="red-text">The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
<p class="red-text">Montreal is a wonderful city. You should visit it!</p>
</body>
</html>
Comme vous pouvez le voir, les styles sont toujours appliqués. Notez que vous pouvez lier plusieurs fichiers .css si nécessaire.
Utiliser un modèle .css
Vous pouvez également utiliser des fichiers CSS disponibles publiquement sur Internet. C’est particulièrement utile lorsque vous souhaitez utiliser des modèles CSS en code ouvert.
Un que je trouve particulièrement bien fait est Simple.css. Il s’occupe de styliser chaque élément de votre page.
Pour l’utiliser, il suffit de le lier dans votre fichier HTML. Lorsque vous ouvrirez votre fichier dans un navigateur web, le fichier CSS sera récupéré et appliqué.
Ci-dessous, j’ai également supprimé les attributs id et class pour simplifier les choses.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Alma Mater</title>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
</head>
<body>
<h1>My Alma Mater: UQAM</h1>
<p>I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
<img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
<p>The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
<p>Montreal is a wonderful city. You should visit it!</p>
</body>
</html>
Dans le code ci-dessus, simple.min.css est une version minimisée du fichier CSS. Si vous l’ouvrez, vous verrez du code CSS très difficile à lire. Il a été optimisé pour être aussi petit que possible. Comparée au CSS original, plus facile à lire pour les humains, la version minimisée est environ 30 % plus légère. Elle se charge plus rapidement et offre une meilleure expérience à l’utilisateur. Elle utilise aussi moins de bande passante serveur, ce qui peut réduire les coûts pour les grands projets avec beaucoup de trafic.
Conclusion
Il y a encore beaucoup à apprendre sur le CSS et ses 200+ propriétés, qui, combinées, permettent de créer des visuels impressionnants et même des animations.
Cependant, cette leçon n’était qu’une introduction. Avec ces bases, vous pourrez explorer davantage par vous-même, et nous continuerons à utiliser le CSS dans les prochaines leçons et projets.
Maintenant que nous savons structurer une page web avec HTML et la styliser avec CSS, il est temps d’apprendre à ajouter de l’interactivité ! 🥳