Bienvenue les cadettes et le cadets ! Avec ce premier cours sur le CSS, nous allons voir ensemble comme fonctionne ce langage qui donne des frissons à tous les développeurs back. Vous comprendrez tous ses secrets pour l'utiliser à son plein potentiel et devenir des pro du design.
Origines de CSS
CSS a été créé à une époque où le HTML devait porter toutes les responsabilités : la structure de la page et son design (qui était quelque peu limité à l'époque). La décision a donc été prise de séparer le sens des balises dans le HTML, de leur décoration dans le CSS.
Intégrer du CSS
Il existe trois manières d'intégrer le CSS. Dans ces trois exemples, les paragraphes sélectionnés seront écrits en rouge avec une police de caractères à 16px de haut :
L'attribut HTML style
<p style="color: red; font-size: 16px;">Mon paragraphe</p>
La balise HTML style
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Titre</title>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>Mon paragraphe</p>
</body>
</html>
<head></head>Un fichier *.css séparé
Fichier style.css :
p {
color: red;
font-size: 16px;
}
Dans le fichier index.html, à nouveau entre les balises <head></head>, on ajoute la balise <link> :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Titre</title>
<link rel="stylesheet" href="/asssstyle.css"/>
</head>
<body>
<p>Mon paragraphe</p>
</body>
</html>
CSS = Cascading Style Sheets = Feuilles de style en cascade
Pourquoi dit-on que le CSS est un langage en "cascade" ? 🤔💧⛲
C'est parce qu'il y a un ordre pour l'écriture des éléments. En effet, tout ce qui est écrit après, va réécrire ce qui est avant, un peu comme de l'eau qui s'écoule dans une cascade. Exemple avec le code suivant :
p {
color: red;
font-size: 16px;
}
p {
color: blue;
}...les textes dans les paragraphes seront écrits en bleu ! Le fait d'avoir écrit la propriété color une seconde fois en-dessous va surcharger ce qui a été défini la première fois au-dessus. Attention, quand vous ajoutez plusieurs fichiers CSS :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Titre</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="style2.css"/>
</head>
<body>
<p>Mon paragraphe</p>
</body>
</html>
...le fichier style2.css est considéré "en-dessous" de style.css, le code à l'intérieur peut donc potentiellement surcharger le code de style.css. C'est pourquoi quand vous ajoutez des librairies de CSS externes (par exemple Bootstrap), il faut toujours les mettre avant les vôtres, pour éviter qu'un élément de CSS de cette librairie ne modifie l'un des vôtres.
Les priorités dans le CSS
Pour gérer quelle propriété va remplacer quelle propriété, CSS a un système de priorisation basé sur la précision des sélecteurs. Plus un sélecteur est précis, plus il aura la préséance sur les autres.
Voici un ordre des sélecteurs, du moins prioritaire au plus prioritaire :
Tous les éléments
* {
color: red;
}Ici tous les éléments sont sélectionnés. C'est donc le sélecteur le moins prioritaire que vous pourrez trouver.
Nom de la balise
p {
color: red;
}
p {
color: blue;
}Ici pas de priorisation, on a le même sélecteur, le texte de tous les paragraphes sera bleu, car, comme vu précédemment, ce qui est plus bas réécrit ce qui est plus haut !
Profondeur de sélection
section p {
color: yellow;
}
p {
color: blue;
}
* {
color: red;
}Le texte de tous les paragraphes qui sont descendants d'une section sera jaune, pour les autres il sera bleu, car, même si la déclaration p { ... } est en-dessous, le fait de préciser "les paragraphes dans les section" est plus précis que juste "les paragraphes".
Si on est encore plus précis :
section header p {
color: orange;
}
section p {
color: yellow;
}
p {
color: blue;
}
* {
color: red;
}...on est encore plus prioritaire, car on a précisé un niveau de profondeur supplémentaire, donc les paragraphes qui sont descendants d'un header qui est lui-même descendant d'une section seront en orange.
section p peut s'écrire comme ceci :section {
& p {
color: yellow;
}
}...syntaxe qui, à l'heure où j'écris ce cours, n'est pas encore très utilisée, car elle n'est disponible que depuis septembre 2023 sur Firefox, dans sa version 117. Cette version du navigateur n'étant pas encore très répandue, pour éviter d'avoir des sites non fonctionnels sur Firefox, on doit utiliser l'ancienne version.
Cette syntaxe permet de mimer l'imbrication qu'on retrouve en HTML afin de s'y retrouver plus rapidement dans notre CSS, car on va pouvoir faire le parallèle entre le CSS et le HTML.
class
.p-class {
color: purple;
}
p {
color: blue;
}Quand on veut sélectionner une class, on met un point + le nom de la classe : .p-class. Ici, les éléments avec cette classe seront en violet, même si ce sont des paragraphes.
id
#p-id {
color: green;
}
.p-class {
color: purple;
}
p {
color: blue;
}Quand on veut sélectionner un id, on met un dièse + le nom de l'id : #p-id. Ici, l'élément avec cet id sera écrit en vert, même si c'est un paragraphe et même s'il a la classe .p-class.
id est forcément unique sur la page. C'est pourquoi il est plus précis qu'une class, qui peuvent être multiples, ou que le nom de la balise qui lui est générique.La priorité de l'attribut HTML style
<p style="color: red; font-size: 16px;">Mon paragraphe</p>
Ici, comme on sélectionne directement un élément par son attribut style, quelles que soient les couleurs définies dans les fichiers CSS pour ce paragraphe, celui-ci sera écrit en rouge.
Un mot pour les gouverner tous : !important
#p-id {
color: green;
}
.p-id {
color: purple;
}
p {
color: blue !important;
}Même si un paragraphe a la classe .p-class et même s'il a l'id #p-id, il sera écrit en bleu ! Parce que le mot-clé !important dépasse toutes les priorités des sélecteurs !
Par contre, si un autre élément porte aussi ce mot-clé, on reprend l'ordre des priorités qu'on vient de voir pour les propriétés le portant.
#p-id {
color: green;
}
.p-class {
color: purple !important;
}
p {
color: blue !important;
}Ici, les éléments portant la classe sont à nouveau en violet, le reste des paragraphes en bleu.