CSS

CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir la présentation des éléments HTML sur une page web. Il permet aux développeurs web de contrôler la mise en page, les couleurs, les polices de caractères, les marges, les espacements, et d'autres aspects visuels d'une page web. La syntaxe de CSS est relativement simple et suit un modèle de règles qui permet de définir les styles pour les éléments HTML.

Source image

Les styles CSS sont généralement placés dans des fichiers distincts avec l'extension .css, comme par exemple main.css.

Ces fichiers sont ensuite liés aux pages HTML à l'aide de la balise <link> dans l'en-tête HTML (balise <head>).

<head>
  <meta charset="utf-8">
  <title>…</title>
  <link href="main.css" rel="stylesheet">
</head>

Source image

Note

Ne jamais écrire de code CSS directement dans un fichier HTML !

Mauvaise séparation entre la structure et la présentation
Difficulté de gestion
Réutilisation limitée

Syntaxe

En CSS, les propriétés sont des éléments fondamentaux qui permettent de définir les styles visuels d'un élément HTML. Les propriétés CSS déterminent comment un élément doit être affiché sur la page web. Chaque propriété est associée à une valeur qui spécifie comment l'élément doit être stylisé.

color : Permet de définir la couleur du texte à l'intérieur d'un élément.
font-size : Permet de définir la taille de la police de caractères.
font-family : Permet de spécifier la famille de polices de caractères à utiliser.
background-color : Permet de définir la couleur de fond d'un élément.
margin : Permet de définir les marges autour d'un élément, contrôlant l'espace entre l'élément et les éléments voisins.
padding : Permet de définir l'espacement à l'intérieur de l'élément, entre son contenu et sa bordure.
border : Permet de définir les bordures autour d'un élément, avec des sous-propriétés pour l'épaisseur, le style et la couleur de la bordure.
width et height : Permettent de définir la largeur et la hauteur d'un élément.
text-align : Permet de définir l'alignement horizontal du texte à l'intérieur de l'élément.
display : Permet de définir comment un élément est affiché, par exemple en bloc, en ligne, en tableau, etc.
…

Il existe un large éventail de propriétés qui permettent de personnaliser l'apparence, la disposition et d'autres aspects visuels des éléments HTML.

➡️ Liste des propriétés CSS

Les propriétés CSS sont groupées dans des blocs de déclaration. Chaque bloc commence par une accolade ouvrante { et se termine par une accolade fermante }. À l'intérieur de ces accolades, on trouve les propriétés CSS et leurs valeurs.

Les blocs sont précédés d'un sélecteur d'éléments HTML, qui définit à quelles balises vont s'appliquer les propriétés du bloc.

Source image

Il est possible d'inclure plusieurs sélecteurs dans un bloc de règles CSS (chacun séparé par une virgule ,), et il est permis de créer autant de blocs que nécessaire pour définir les styles requis.

body {
  background-color: #007cb7;
  color: #fff;
}

h1,
p {
  font-family: Webdings, serif;
}

<body>
  <h1>You know this font</h1>
  <p>Well… not really.</p>
</body>

Unités de mesure en CSS

En CSS, l'unité de base n'est pas strictement définie, car elle peut dépendre du contexte dans lequel vous travaillez. Toutefois, le "pixel" (px) est souvent considéré comme l'unité de base par de nombreux développeurs, en particulier pour spécifier des dimensions et des espacements nécessitant un contrôle précis.

Cependant, il existe d'autres unités en CSS, chacune adaptée à des situations différentes :

Pourcentages (%) : Utilisés pour la largeur, la hauteur, les marges, et les espacements intérieurs, pour créer un design réactif qui s'adapte à la taille de l'écran ou de l'élément parent.
em : Une unité relative à la taille de la police définie pour l'élément. Si la police de l'élément parent est de 16px, alors 1em pour un enfant équivaut à 16px.
rem : Semblable à em, mais toujours relative à la taille de la police définie sur l'élément racine (<html>), et non à l'élément parent.
vw/vh : Unités de largeur et hauteur de la fenêtre d'affichage. 1vw correspond à 1% de la largeur de la fenêtre d'affichage, et 1vh à 1% de la hauteur.
…

Chaque unité a des cas d'usage spécifiques et est choisie en fonction des besoins du design et de la fonctionnalité souhaitée. Pour un design web flexible et adaptatif, il est souvent recommandé d'utiliser des unités relatives comme rem, %, vw, et vh.

Couleurs en CSS

En CSS, les couleurs peuvent être spécifiées en utilisant la notation hexadécimale, qui consiste en un hashtag # suivi de six caractères hexadécimaux. Ces caractères représentent la quantité de rouge, vert, et bleu dans la couleur. Bien qu'il existe d'autres notations pour définir les couleurs, il est recommandé d'utiliser celle-ci autant que possible, car elle est à la fois commune et lisible.

La notation hexadécimale pour définir les couleurs en CSS utilise trois paires de chiffres hexadécimaux pour représenter les composantes RGB (Red, Green, Blue) de la couleur. Chaque paire de chiffres hexadécimaux représente une valeur comprise entre 00 (zéro) et FF (255 en décimal) pour chaque composante de couleur.

Composante Rouge (R) : Les deux premiers chiffres hexadécimaux représentent la quantité de rouge dans la couleur, allant de 00 (absence de rouge) à FF (rouge à pleine intensité).
Composante Vert (G) : Les deux chiffres hexadécimaux suivants représentent la quantité de vert dans la couleur, allant de 00 (absence de vert) à FF (vert à pleine intensité).
Composante Bleu (B) : Les deux derniers chiffres hexadécimaux représentent la quantité de bleu dans la couleur, allant de 00 (absence de bleu) à FF (bleu à pleine intensité).

Avec la notation hexadécimale en CSS, il est possible de définir un total de 16'777'216 couleurs différentes. Cela s'explique par le fait que chaque composante RGB est représentée par 8 bits, offrant 256 valeurs possibles pour chaque composante (de 0 à 255 en décimal). En combinant ces 256 valeurs pour chaque composante, on obtient 256^3 = 16'777'216 combinaisons uniques de couleurs. L'humain est capable, dans le meilleur des cas, de distinguer environ 500'000 couleurs, incluant toutes les nuances possibles, soit environ 30 fois moins.

Source image

Note

Lorsque les trois composantes RGB ont deux chiffres identiques dans chacune d'entre elles, on peut utiliser une forme abrégée : #448800 ➡ #480.

#000 correspond à l'absence de couleurs, donc noir.

#fff correspond à toutes les couleurs, donc blanc.

Sélecteurs CSS

Les sélecteurs CSS sont des éléments utilisés pour cibler des balises HTML spécifiques dans une page web, afin d'appliquer des styles et des mises en forme à celles-ci.

Source image

Un sélecteur peut cibler plusieurs éléments HTML.

Source image

Plusieurs sélecteurs peuvent cibler un élément HTML.

Source image

Sélecteurs simples

Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires, souvent combinés pour créer d'autres sélecteurs plus complexes.

➡️ MDN - Basic selectors

Type selector

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur balise HTML.

h1 { … }

ID selectors

Un sélecteur d'identifiant permet de cibler un élément grâce à la valeur de son attribut id. À noter que chaque valeur d'un attribut id doit être unique dans un document HTML.

#error-msg { … }

Class selector

Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction de la valeur de l'attribut class de chaque élément.

.alert-box { … }

Exemple

h1 {
  color: #721c24;
}

#error-msg {
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-box {
  border: 2px solid transparent;
  border-radius: 5px;
}

<div class="alert-box" id="error-msg">
  <h1>This course is hard</h1>
  <p>But it doesn't have to be</p>
</div>

Attribute selector

Les sélecteurs d'attribut permettent de cibler un élément en fonction de la présence d'un attribut ou de la valeur spécifiée pour cet attribut.

[type] { … }
[type=text] { … }

Exemple

[for] {
  font-weight: bold;
}

[type=text] {
  /* green */
  background-color: #d4edda;
}

[type*=ssw] {
  /* yellow */
  background-color: #fff3cd;
}

<label for="user">Username</label>
<input id="user" type="text">
<br>
<label for="pwd">Name</label>
<input id="pwd" type="password">

Combinateurs

Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, comme "A est un enfant de B" ou "A est adjacent à B".

➡️ MDN - Combinators

Descendant combinator

Le combinateur de descendance, représenté par un espace blanc, permet de combiner deux sélecteurs pour cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre correspondant au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.

/* All <span> in a <div> */
div span { … }

Child combinator

Le combinateur d'enfants directs cible uniquement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

/* All <li> directly inside a <ul>  */
ul > li { … }

Next-sibling combinator

Le combinateur de voisin direct permet de sélectionner un élément uniquement si celui-ci suit immédiatement un élément donné, et que les deux éléments sont des enfants d'un même élément parent.

/* All <p> directly following a <div>  */
div + p { … }

Subsequent-sibling combinator

Le combinateur de voisins généraux permet de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément immédiatement) d'un autre élément correspondant au premier sélecteur, les deux éléments étant enfants d'un même parent.

/* All <span> following a <p> with the same parent  */
p ~ span { … }

Exemple

div span {
  font-weight: bold;
}

p > span {
  /* blue */
  color: #00f;
}

li + li {
  /* red */
  color: #f00;
}

p ~ span {
  text-decoration: underline;
}

<div>
  <p>
    This is a <span>list</span>.
  </p>
  <ul>
    <li>
      <span>Item 1</span>
    </li>
    <li>Item 2</li>
  </ul>
  <span>This is the end!</span>
</div>

Pseudo

Pseudo-classes

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit se trouver pour être ciblé par la déclaration.

/* Apply when mouse pointer hovers over a link */
a:hover { … }
/* Apply when a link has been visited (is in the browsing history) */
a:visited { … }

Pseudo-elements

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de styliser certaines parties spécifiques de l'élément ciblé par la règle.

/* Only the first letter of the text inside a <p> */
p::first-letter { … }
/* Create a new pseudo-element before a <li> */
li::before { … }

Exemple

p::first-letter {
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

li::before {
  content: '⦿ ';
}

a:hover {
  text-decoration: line-through;
}

a:visited {
  /* red */
  color: #f00;
}

<p>Some text</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<a href="https://apple.com">Apple</a>
<br>
<a href="https://google.ch">Google</a>

Conflit de règles

Un conflit de règles en CSS se produit lorsque deux ou plusieurs règles CSS définissent des styles pour le même élément HTML ou le même groupe d'éléments. Lorsqu'un conflit se produit, le navigateur web doit décider quelles règles appliquer pour styliser l'élément en question. Les conflits de règles CSS sont résolus en utilisant un ensemble de règles de spécificité et de priorité.

Spécificité : Chaque sélecteur CSS a une spécificité qui détermine son poids lors de la résolution des conflits. Plus la spécificité d'une règle est élevée, plus elle a de poids dans la décision du navigateur.
Priorité : En plus de la spécificité, la priorité des règles CSS peut également être influencée par l'ordre dans lequel elles sont déclarées dans le fichier CSS. Les règles qui apparaissent en dernier dans le fichier ont une priorité plus élevée.

Résolution

La règle avec la spécificité la plus élevée est appliquée, même si elle apparaît plus tôt dans le fichier CSS.
Si deux règles ont la même spécificité, la règle qui apparaît en dernier dans le fichier CSS est appliquée, car elle a une priorité plus élevée.

Tip

Il est important de comprendre comment fonctionne la résolution des conflits en CSS pour éviter des résultats inattendus dans la mise en forme de votre page web.

Spécificité

Le calcul de la spécificité en CSS est un processus qui détermine le poids relatif d'un sélecteur CSS par rapport à d'autres sélecteurs lorsque des conflits de règles se produisent. La spécificité est utilisée pour décider quelle règle doit être appliquée lorsqu'un élément HTML est ciblé par plusieurs sélecteurs différents. Elle est généralement calculée en utilisant un système de notation basé sur les types de sélecteurs présents dans une règle CSS.

La spécificité d'un sélecteur CSS est représentée par un nombre à quatre chiffres, par exemple, 0-0-0-0. Chacun des quatre chiffres représente un niveau de spécificité correspondant à un type de sélecteur spécifique.

Le premier chiffre (le plus à gauche) est utilisé pour les styles inline, c'est-à-dire les styles appliqués directement à un élément HTML à l'aide de l'attribut style. La plupart du temps, ce chiffre est égal à 0, car les styles inline sont à éviter !
Le deuxième chiffre représente le nombre de sélecteurs d'identifiant (#id) dans la règle. Par exemple, si une règle contient un sélecteur d'identifiant, ce chiffre est égal à 1 ; s'il n'y en a pas, il est égal à 0.
Le troisième chiffre représente le nombre de sélecteurs de classe (.class), de sélecteurs d'attributs ([attribut]), et de sélecteurs de pseudo-classes (:hover, :active, etc.) dans la règle.
Le quatrième chiffre représente le nombre de sélecteurs d'élément (par exemple, p, div, a) et de pseudo-éléments (::before, ::after, etc.) dans la règle.

Source image

Tip

Vous pouvez également utiliser des techniques spécifiques, telles que l'utilisation de l'importance (!important) dans une règle, pour forcer l'application d'une règle particulière en cas de conflit. Cependant, l'utilisation de !important n'est généralement pas recommandée, car elle peut rendre le code CSS difficile à maintenir.

Exemple

p#top {
  /* red */
  color: #f00;
}

p + p {
  /* green */
  color: #0f0;
}

p {
  /* blue */
  color: #00f;
}

<p>1st paragraph</p>
<p id="top">Paragraph with an ID</p>
<p>Last paragraph</p>

Modèle de boîte

Le modèle de boîte en CSS est un concept fondamental qui définit comment chaque élément HTML est rendu sur une page web en termes de dimensions et de disposition. Il s'agit d'un modèle de calcul qui détermine la manière dont un élément est affiché, en prenant en compte ses dimensions (largeur, hauteur), son contenu, ses marges, ses bordures, et ses espaces internes (padding).

Contenu (Content) : Représente le contenu de l'élément lui-même, tel que le texte, les images, les vidéos, etc. La largeur et la hauteur du contenu sont généralement déterminées par les propriétés width (largeur) et height (hauteur) en CSS.
Espace interne (Padding) : Le padding est l'espace entre le contenu de l'élément et sa bordure. Il est défini par les propriétés padding-top, padding-right, padding-bottom, et padding-left en CSS, et il peut être utilisé pour créer un espace interne autour du contenu.
Bordure (Border) : La bordure est une ligne autour de l'élément qui délimite visuellement ses limites. Elle est définie par les propriétés border-width, border-style, et border-color en CSS.
Marge (Margin) : La marge est l'espace entre la bordure de l'élément et les éléments adjacents. Elle est définie par les propriétés margin-top, margin-right, margin-bottom, et margin-left en CSS, et elle permet de créer de l'espace entre les éléments.

source image

Block vs Inline

En CSS, les éléments HTML sont classés en deux catégories principales en fonction de leur comportement de mise en page : les éléments en bloc (block-level elements) et les éléments en ligne (inline elements). Cette classification détermine comment les éléments sont affichés et comment ils interagissent avec d'autres éléments sur une page web.

Source image

Éléments en bloc (block-level elements) :

Les éléments en bloc occupent toute la largeur disponible de leur conteneur parent par défaut.
Ils commencent généralement sur une nouvelle ligne et s'étendent autant que possible horizontalement.
Les éléments en bloc permettent de définir des dimensions (largeur et hauteur) personnalisées.
Ils acceptent généralement les propriétés CSS liées à la mise en forme comme width, height, margin, padding, et border.
Exemples courants d'éléments en bloc : <h1>, <div>, <p>, <ul>, <form>, <main>, <article>, <aside>, <section>, <nav>, <header>, <footer>, etc.

Exemple

h1 {
  /* red */
  background-color: #f00;
}

div {
  /* green */
  background-color: #0f0;
}

p {
  /* blue */
  background-color: #00f;
}

<h1>Titles are block-level elements</h1>
<div>
  A DIV is a block-level element.
  <p>A paragraph is also a block-level element.</p>
  Another text...
</div>

Éléments en ligne (inline elements) :

Les éléments en ligne ne commencent pas sur une nouvelle ligne.
Ils s'alignent horizontalement les uns à côté des autres à l'intérieur de leur conteneur parent.
Ils ne permettent généralement pas de définir des dimensions personnalisées (largeur et hauteur), leur taille est déterminée par leur contenu.
Les propriétés CSS liées à la mise en forme, telles que width, height, margin-top, margin-bottom, padding-top, padding-bottom, et border sont généralement ignorées ou ont un effet limité sur les éléments en ligne.
Exemples courants d'éléments en ligne : <span>, <a>, <strong>, <em>, <img>, etc.

Exemple

span {
  /* red */
  background-color: #f00;
}

a {
  /* green */
  background-color: #0f0;
}

strong {
  /* blue */
  background-color: #00f;
}

<span>SPAN are inline elements.</span>
<a href="#">Link too</a>
<strong>STRONG also !</strong>

Tip

Il est possible de changer le "type" de boîte (block ou inline) de n'importe quel élément HTML avec la propriété CSS display.

Content box vs Border box

L'utilisation de box-sizing: border-box; plutôt que la valeur par défaut (box-sizing: content-box;) en CSS est souvent préférée dans de nombreux cas pratiques, car elle simplifie la gestion des dimensions et de la mise en page des éléments HTML, en particulier pour calculer les dimensions réelles d'un élément, notamment sa largeur et sa hauteur.

L'utilisation de box-sizing: border-box; est plus intuitive et est considérée comme une bonne pratique par beaucoup de développeurs web.

Source image | Source image

🚨 On peut appliquer box-sizing: border-box; à tous les éléments avec le code ci-dessous :

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

Source

Feuille de style par défaut

Les navigateurs web ont des feuilles de style par défaut, également appelées feuilles de style de l'agent utilisateur (user agent stylesheets en anglais). Ces feuilles de style sont intégrées au navigateur et sont utilisées pour définir le rendu par défaut des éléments HTML, tels que les polices, les couleurs, les marges, les paddings, les bordures, les alignements, etc.

L'utilisation de ces feuilles de style par défaut garantit une certaine cohérence dans la manière dont les pages web sont rendues sur différents navigateurs. Cependant, les styles par défaut peuvent varier légèrement d'un navigateur à l'autre, ce qui peut entraîner des différences dans l'apparence des pages web sur différentes plateformes.

➡️ Chromium - Default style sheet

➡️ WebKit - Default style sheet

Pour réinitialiser complètement les styles par défaut du navigateur et commencer avec une toile vierge, de nombreux développeurs utilisent une feuille de style de réinitialisation (reset stylesheet) ou une feuille de style de normalisation (normalize stylesheet) qui harmonise les styles de base pour les rendre plus cohérents d'un navigateur à l'autre.

🚨 Il est recommandé de normaliser plutôt que de réinitialiser :

Lorsque vous réinitialisez les styles par défaut, vous devez ensuite définir manuellement chaque élément avec les styles souhaités, ce qui peut entraîner une augmentation de la taille des fichiers CSS.
L'utilisation de feuilles de style CSS de réinitialisation peut poser des problèmes si vous supprimez les styles par défaut d'un élément, mais oubliez ensuite de les redéfinir correctement.
Certaines feuilles de style de réinitialisation peuvent avoir un impact négatif sur l'accessibilité pour les utilisateurs naviguant à l'aide du clavier, car elles peuvent altérer le comportement par défaut des éléments interactifs.

➡️ modern-normalize

Polices de caractères

Il existe diverses familles de polices de caractères, chacune présentant des styles et des apparences uniques. En général, on peut classer ces polices en cinq familles principales, chacune ayant des applications spécifiques en fonction de son style et de son design distincts.

Serif (avec empattements) : Les polices serif ont de petits détails (appelés "empattements") à la base des caractères. Elles sont souvent considérées comme plus traditionnelles et formelles. Les polices serif sont couramment utilisées dans les textes imprimés longs tels que les livres, les magazines, et les journaux, ainsi que dans le contenu en ligne lorsque la lisibilité est essentielle. Leurs empattements aident à guider les yeux le long du texte. Exemples de polices serif : Times New Roman, Georgia, et Garamond.
Sans-serif (sans empattements) : Les polices sans-serif n'ont pas d'empattements et ont un aspect plus moderne et épuré. Elles sont couramment utilisées pour une lisibilité optimale sur les écrans numériques. Exemples de polices sans-serif : Arial, Helvetica, et Verdana.
Monospace (à largeur fixe) : Les polices monospace ont une largeur fixe pour chaque caractère, ce qui signifie que chaque caractère occupe le même espace horizontal. Elles sont souvent utilisées pour afficher du code source ou du texte tabulaire. Exemples de polices monospace : Courier New, Consolas, et Monaco.
Script (manuscrites) : Les polices de script imitent l'écriture manuscrite et ont un aspect élégant. Elles sont souvent utilisées pour des invitations et des éléments de design artistique. Exemples de polices de script : Comic Neue, Pacifico, et Lobster.
Fantaisie (ou décoratives) : Les polices fantaisie sont créatives et conçues pour attirer l'attention. Elles varient considérablement en termes de style et sont souvent utilisées pour des titres ou des logos. Exemples de polices fantaisie : Papyrus, Nanum Brush Script, et Tengwar Annatar.

Utilisation en CSS

Pour utiliser une police de caractères dans une page web avec CSS, plusieurs étapes sont nécessaires.

Sélection de la police de caractères
- Si la police est disponible sur l'ordinateur de l'utilisateur, elle peut être directement référencée dans le CSS.
Source image
- Si une police spécifique est requise, elle doit d'abord être intégrée dans le site web. Cela se fait habituellement en incluant directement le fichier de la police de caractères localement ou avec un lien vers un service en ligne de polices de caractères.
Source image
Inclusion de la police
- Pour une police hébergée localement ou sur le serveur, la règle @font-face est utilisée dans le CSS pour déclarer la police et spécifier l'URL du fichier de la police.
```
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url(roboto.woff2) format('woff2');
}
```
- Pour une police en ligne, on suit les instructions fournies par le service de polices, qui incluent généralement un lien à insérer dans le HTML ou un bloc de code CSS à copier.
```
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
```
```
@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
```
Déclaration de la police dans le CSS
- Une fois la police incluse ou référencée, elle est appliquée à des éléments HTML spécifiques en utilisant la propriété font-family dans les règles CSS. Il est possible de spécifier une liste de polices par ordre de préférence, en séparant chaque nom de police par une virgule.
```
body {
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
```

Note

La spécification d'une liste de polices par ordre de préférence dans une déclaration CSS sert de système de secours pour le rendu des textes sur une page web. Cela garantit que, si la première police choisie n'est pas disponible sur le système de l'utilisateur, le navigateur tentera de rendre le texte avec la police suivante dans la liste, et ainsi de suite. Cette approche est appelée la "pile de polices" (font stack en anglais).

Tip

Il est judicieux d'utiliser une pile de polices (font stack) avec au moins une police de secours (fallback) pour assurer que votre texte reste lisible et esthétiquement conforme à votre design, même si la police principale ne se charge pas. Un fallback est une police alternative utilisée lorsque la police principale n'est pas disponible, garantissant une expérience utilisateur cohérente sur divers systèmes et navigateurs.

Il est conseillé d'inclure dans votre pile de polices un type de police générique comme fallback, tel que sans-serif ou serif.

Cela sert de dernier recours si aucune des polices spécifiées n'est disponible, garantissant ainsi la lisibilité du texte sur tous les systèmes d'exploitation et navigateurs.

➡️ CSS Font Stack (font stack pour certaines polices courantes)

➡️ Google Fonts (service d'hébergement de polices)

➡️ Google Web Fonts Helper (site web pour télécharger facilement les polices de Google Fonts)

Graisse et style

En règle générale, pour les polices téléchargées localement ou hébergées sur un serveur, il est nécessaire de définir une règle @font-face distincte pour chaque graisse (weight) et style (normal ou italique) de la police que vous souhaitez utiliser. Chaque déclaration @font-face spécifie le chemin vers le fichier de police approprié et déclare la graisse (font-weight) et le style (font-style) qui lui correspondent.

/* Regular */
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url(roboto-400.woff2) format('woff2');
}

/* Regular + italic */
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: italic;
  font-weight: 400;
  src: url(roboto-400-italic.woff2) format('woff2');
}

/* Bold */
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: url(roboto-700-bold.woff2) format('woff2');
}

/* Bold + italic */
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: italic;
  font-weight: 700;
  src: url(roboto-700-italic.woff2) format('woff2');
}

Source image

Positionnement

Le positionnement en CSS est un concept fondamental qui permet de contrôler la disposition des éléments HTML sur une page web. CSS offre plusieurs propriétés de positionnement, chacune ayant un comportement différent.

Source image

static

C'est la valeur par défaut pour tout élément HTML.
Les éléments sont positionnés selon le flux normal de la page.
Les propriétés top, right, bottom et left n'ont aucun effet sur un élément avec position: static;.

relative

L'élément est positionné relativement à sa position initiale dans le flux normal de la page.
Vous pouvez utiliser top, right, bottom et left pour déplacer l'élément par rapport à sa position d'origine.
L'espace occupé par l'élément reste le même que s'il était en position static.

absolute

L'élément est retiré du flux normal de la page, ce qui signifie que les autres éléments se comportent comme s'il n'existait pas.
Il est positionné par rapport à son ancêtre le plus proche non-static (par exemple, un élément avec position: relative, absolute, ou fixed).
Si un tel ancêtre n'existe pas, il se positionne par rapport au corps du document (<body>).
Utilisez top, right, bottom et left pour le positionner par rapport à cet ancêtre.

fixed

L'élément est positionné par rapport à la fenêtre du navigateur et reste à la même place même lors du défilement de la page.
Semblable à absolute, il est retiré du flux normal de la page.
top, right, bottom et left sont utilisés pour le positionner par rapport à la fenêtre du navigateur.

sticky

Il s'agit d'un mélange entre relative et fixed.
L'élément est positionné selon le flux normal de la page jusqu'à ce qu'il atteigne une certaine position lors du défilement ; à ce moment-là, il devient fixe.
Pour que sticky fonctionne, vous devez spécifier au moins un des quatre décalages (top, right, bottom, left).

Exemple

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

div:first-child {
  /* red */
  background-color: #f00;
  bottom: 0;
  position: absolute;
  right: 0;
}

div:last-child {
  /* blue */
  background-color: #00f;
}

div + div:not(:last-child) {
  /* green */
  background-color: #0f0;
  left: 50px;
  position: relative;
  top: 50px;
}

<body>
  <div>RED</div>
  <div>GREEN</div>
  <div>BLUE</div>
</body>

Note

float

La propriété float en CSS est utilisée pour positionner un élément à gauche ou à droite dans son conteneur, permettant ainsi au texte et aux éléments en ligne de s'écouler autour de lui. C'était une technique couramment utilisée pour la mise en page avant l'avènement de Flexbox et Grid, qui offrent plus de flexibilité et de contrôle.

L'utilisation de float peut créer des problèmes complexes de mise en page, notamment parce que les éléments flottants ne contribuent pas à la taille de leur conteneur. Cela peut entraîner un comportement où le conteneur ne "contient" pas correctement les éléments flottants, un problème souvent résolu par une technique connue sous le nom de "clearfix".

Donc, à ne plus utiliser !

Flexbox

Flexbox est un module de mise en page unidimensionnelle en CSS qui offre une façon plus efficace de distribuer l'espace entre les éléments d'une interface, même quand leurs tailles sont inconnues ou dynamiques. Contrairement aux anciennes méthodes de mise en page (comme les tableaux, le positionnement ou les flottants), Flexbox est conçu pour les applications web modernes et simplifie la création de mises en page complexes et réactives.

Flexbox offre un contrôle complet sur l'alignement, la direction, l'ordre et la taille des éléments dans un conteneur (sur une seule dimension).

Source image

➡️ A Complete Guide to Flexbox

Grid

CSS Grid Layout, ou simplement Grid, est un système de mise en page bidimensionnel pour le web. Contrairement à Flexbox, qui est principalement destiné à aligner les éléments dans une seule dimension (horizontalement ou verticalement), Grid est conçu pour travailler avec deux dimensions à la fois (colonnes et lignes). Cela le rend particulièrement puissant pour construire des mises en page complexes et des designs nécessitant un alignement précis à la fois horizontalement et verticalement.

Avec Grid, vous pouvez définir des grilles à l'intérieur des conteneurs HTML en spécifiant des colonnes, des lignes et des espaces entre les éléments (gutters). Les éléments peuvent ensuite être placés et alignés dans cette grille de manière très contrôlée.

➡️ A Complete Guide to CSS Grid

Exemple

<body>
  <header>HEADER</header>
  <nav>NAV</nav>
  <article>ARTICLE</article>
  <aside>ASIDE</aside>
  <footer>FOOTER</footer>
</body>

body {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 1fr 1fr 100px;
}

header {
  /* green */
  background-color: #a2d263;
  grid-column: 1 / 4;
}

nav {
  /* blue */
  background-color: #79a1da;
  grid-row: 2 / 5;
}

article {
  /* yellow */
  background-color: #eee467;
  grid-row: 2 / 5;
}

aside {
  /* orange */
  background-color: #e4b561;
  grid-row: 2 / 5;
}

footer {
  /* red */
  background-color: #c2444e;
  grid-column: 1 / 4;
}

body {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 1fr 1fr 100px;
}

header {
  background-color: #a2d263;
  grid-column: 1 / 4;
}

nav {
  background-color: #79a1da;
}

article {
  background-color: #eee467;
  grid-column: 2 / 4;
  grid-row: 2 / 5;
}

aside {
  background-color: #e4b561;
  grid-row: 3 / 5;
}

footer {
  background-color: #c2444e;
  grid-column: 1 / 4;
}

body {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 1fr 1fr 100px;
}

header {
  background-color: #a2d263;
  grid-column: 1 / 4;
}

nav {
  background-color: #79a1da;
  grid-column: 1 / 4;
}

article {
  background-color: #eee467;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
}

aside {
  background-color: #e4b561;
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

footer {
  background-color: #c2444e;
  grid-column: 1 / 4;
}

Conseils d'utilisation

CSS Grid et Flexbox sont deux outils puissants pour la mise en page en CSS, et chacun a ses points forts. Le choix entre les deux dépend de la complexité et du type de mise en page que vous voulez réaliser.

Utilisez Flexbox quand

Vous avez une mise en page unidimensionnelle : Lorsque vous devez gérer l'espace entre des éléments soit sur une ligne horizontale, soit sur une colonne verticale, Flexbox est souvent suffisant et le plus simple à utiliser.
Vous voulez un conteneur pour aligner des éléments : Si vous avez besoin de centrer des éléments ou de les aligner à gauche, à droite, en haut ou en bas, Flexbox peut le faire rapidement et facilement.
Les tailles d'éléments doivent être flexibles : Flexbox est conçu pour permettre aux éléments de s'adapter à la taille du conteneur en utilisant des proportions plutôt que des mesures fixes, ce qui est idéal pour les composants d'interface utilisateur comme les barres de navigation et les boutons.
Vous créez une mise en page responsive : Flexbox est très pratique pour les mises en page réactives, car il permet aux éléments de s'adapter à différents écrans sans nécessiter de media queries complexes.

Utilisez Grid quand

Vous avez une mise en page bidimensionnelle : Si votre conception nécessite un contrôle à la fois sur les colonnes et les lignes, Grid est le meilleur choix. Il est idéal pour les mises en page ayant de nombreux éléments s'alignant strictement en termes de colonnes et de rangées.
Vous travaillez avec des mises en page complexes : Pour des designs complexes, comme les mises en page de magazines, les dashboards, et les applications avec des sections variées, Grid est plus approprié.
Vous avez besoin de contrôle précis sur les positions des éléments : Grid vous permet de positionner et d'aligner des éléments dans des endroits précis et de les étendre sur des espaces traversant plusieurs colonnes ou lignes.
Vous créez des mises en page qui ne sont pas fluides : Si vous avez besoin d'une grille avec des pistes fixes où les éléments peuvent s'aligner, même lorsque le conteneur change de taille, Grid est un outil puissant.

Source image

Combinaison des deux

Il est également courant et parfois recommandé de combiner les deux. Par exemple, vous pourriez avoir une mise en page globale créée avec Grid pour bénéficier de son contrôle bidimensionnel, puis utiliser Flexbox pour les composants au sein de cette grille, surtout si ces composants nécessitent moins de structure rigide et plus de fluidité.

Source image

Z-index

z-index est une propriété CSS qui permet de contrôler la superposition d'éléments sur un axe Z perpendiculaire à l'écran. Elle détermine quel élément se trouve au-dessus ou en dessous d'un autre dans la pile des éléments affichés sur la page.

Contexte d'empilement

z-index fonctionne uniquement sur les éléments positionnés, c'est-à-dire ceux dont la propriété position est définie à autre chose que static (les valeurs possibles sont relative, absolute, fixed, ou sticky).
Lorsqu'on applique un z-index à un élément, celui-ci crée ce qu'on appelle un "contexte d'empilement". Cela signifie que cet élément et tous ses descendants auront leur propre contexte de superposition.

Valeurs

La propriété z-index peut prendre des valeurs entières (positives ou négatives), et par défaut, les éléments ont un z-index de 0.
Plus la valeur de z-index est élevée, plus l'élément sera en haut de la pile et pourra donc se superposer aux éléments avec un indice plus bas.
Un élément avec un z-index négatif sera placé derrière les éléments avec un z-index positif ou égal à zéro.

Comparaison de niveaux

Il est important de noter que z-index ne compare les valeurs qu'au sein du même contexte d'empilement. Cela signifie que si vous avez deux contextes d'empilement séparés, un élément avec un z-index de 1000 dans un contexte ne se superposera pas nécessairement à un élément avec un z-index de 1 dans un autre contexte.

Problèmes courants

Des erreurs de superposition peuvent survenir si les valeurs de z-index ne sont pas correctement gérées, menant à des éléments qui apparaissent derrière d'autres de manière inattendue.
L'abus de z-index peut conduire à un CSS compliqué et difficile à maintenir, où l'ordre de superposition devient difficile à déchiffrer.

Source image

Liens utiles

Validation du code CSS

➡️ W3C - CSS Validation Service

Spécifications et documentation

➡️ W3C - CSS Specifications

➡️ MDN - CSS Documentation

Sites de référence

➡️ Stack Overflow

➡️ CSS-Tricks