CSS : les bases

Plan du chapitre

• Introduction au CSS
• Lier une feuille de style à une page HTML
• Les sélecteurs CSS
• La cascade et la spécificité
• Le modèle de boîte (box model)
• Les propriétés CSS essentielles

Introduction

Le CSS, ou Cascading Style Sheets, permet de définir du style aux éléments HTML. Il permet de définir des règles différentes en fonction de la taille de l’écran ou du support (écran ou papier pour l’impression).

Un style CSS s’écrit en commençant par un sélecteur qui englobe une liste de règles. Exemple

p {
    color: #0c0c0e;
    background-color: #f5f5f5;
    border: 1px solid black
}

.annonce {
    margin: 4px;
    text-align: center;
}

#banner {
    position: sticky;
    top: 0;
}

Certains sélecteurs permettent également de définir le style de certaines interactions que vous avez avec le navigateur tels que la souris qui survole un élément, un champ de formulaire qui est sélectionné, un lien qui a été clicqué … Cela se fait grâce à des pseudo-classes.

Lier une feuille de style

Comme vu précédemment, CSS permet de donner un style à la structure de notre document. Il y a en pratique 3 façons de définir du CSS :

• Directement dans les fichiers HTML via une balise style
• Directement sur un élément HTML via un attribut style sur une balise
• Dans des fichiers séparés qu’on va charger dans notre page via une balise link

On va préférer la dernière méthode pour plusieurs raisons :

• Dans une application, on a souvent plusieurs pages et on veut souvent inclure le style sur toutes les pages. Définir le CSS dans une balise style impliquerait qu’on doive dupliquer du code sur toutes les pages.
• C’est le même principe en ce qui concerne l’attribut style, le problème ne serait que décuplé : on devrait définir le même style sur tous les éléments qui doivent se ressembler.

Pour charger un fichier style, on va utiliser la balise link de la manière suivante :

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="form.css">

On peut charger autant de fichiers CSS que nécessaire, c’est parfois pratique quand certains styles ne s’appliquent qu’à certaines pages. Attention toutefois à l’ordre de chargement : si du style est défini plusieurs fois pour le même élément, le style appliqué est un agrégat de tous les styles trouvés et les conflits sont résolus avec un calcul de pondération. À pondération égale, le dernier style est choisi.

Exemple

/* Défini dans main.css */
div {
    color: red;
    background-color: blue;
    font-size: 12px;
}

/* Défini dans form.css */
div {
    color: blue;
    background-color: blue;
    border: 1px solid black
}

/* Résultat appliqué sur une div */
div {
    color: blue;
    background-color: blue;
    font-size: 12px;
    border: 1px solid black
}

Pour identifier les problèmes de surcharge de style, l’inspecteur web est un outil très précieux car il indique quel style est appliqué et quel style est surchargé.

Les sélecteurs CSS

Pour cibler un ou plusieurs éléments sur lesquels on veut appliquer des styles, on utilise des sélecteurs. Ils permettent de cibler des éléments, des classes, des identifiants, des attributs spécifiques ou encore des pseudo-classes. Il est aussi possible de les combiner pour cibler certaines structures HTML (parents, enfants, frères, …).

Sélecteur universel

Il existe un sélecteur qui permet de sélectionner tous les élements : *. Il est très rarement utilisé tout seul, on l’utilise surtout dans des sélecteurs avec des enfants/frères.

Sélecteur d’élément

Toutes les balises HTML peuvent être utilisées comme sélecteur. Si vous utilisez un sélecteur d’élément, le style que vous définirez pour cet élément sera appliqué à tous les éléments présents sur la page.

En général, on va combiner un sélecteur d’élément avec un sélecteur de classe ou d’attribut.

Exemple

p {
    font-size: 12px;
    font-family: "Times New Roman",sans-serif;
}

Sélecteur de classes

Ce sont les sélecteurs les plus utilisés. Ils permettent de cibler tous les éléments sur lesquels vous ajouterez la class spécifiée. Ils commencent toujours par un . suivi du nom de la classe défini dans l’HTML.

Les classes peuvent avoir le nom que vous désirez, mais il est conseillé d’utiliser des noms indicatifs et qui ne contiennent pas d’indication de style. Par exemple, on préférera nommer une classe bouton-validation plutôt que bouton-vert. Si le style change, le nom de la classe peut ne plus correspondre au style défini, alors que bouton-validation sera probablement toujours correct.

Exemple

<p class="article">
Hello world
</p>
<p>
Lorem Ipsum
</p>

.article {
    font-size: 12px;
    margin: 4px;
}

Ici, le style ne sera appliqué qu’au premier p et pas au deuxième c’est le seul qui a class="article"

Sélecteur d’id

Il est possible de cibler un seul élément en particulier grâce à son identifiant. Pour rappel, l’identifiant d’un élément HTML doit être unique sur la page. S’il est ciblé par une règle CSS, cette règle ne s’appliquera donc qu’à cet élément.

Un sélecteur d’identifiant commence toujours par # suivi de l’identifiant défini sur la balise HTML. Exemple :

<table id="user-table">
</table>

#user-table {
    border: 1px dotted #1d4ed8;
}

S’il y a plusieurs tables sur la page, seulement celle avec l’id user-table verra son style modifié par la règle CSS.

Étant-donné qu’ils ne ciblent qu’un élément à la fois, les sélecteurs d’identifiant sont moins utilisés que les sélecteurs de classe.

Sélecteur d’attribut

Plus rarement utilisé en CSS, il est également possible de sélectionner des éléments en se basant sur leurs attributs et leurs valeurs. Récemment, on commence tout de même à les utiliser pour lier certains attributs d’accessibilité (aria-) à du style spécifique.

Les sélecteurs d’attribut sont “encadrés” par des crochets [ et ]. Il est également possible de les cibler en fonction de leur valeur qu’on peut définir avec = après le nom de l’attribut. Exemple :

<button disabled>Click Me!</button>

<div aria-selected="true">
Lorem Ipsum
</div>

[disabled] {
    cursor: not-allowed;
}

[aria-selected="true"] {
    border-color: #1d4ed8;
}

Cumul de classes

La plupart du temps, un sélecteur qui ne cible qu’une classe ou un élément ne suffit pas pour construire le style de tout un site. Il arrive souvent qu’on définisse des classes bien spécifiques (loading, disabled, active, …) et qu’on combine le style de ces classes sur un seul élément. Exemple :

.action-btn {
    background-color: #1d4ed8;
    color: white;
}

.disabled {
    opacity: .8;
    cursor: not-allowed;
    pointer-events: none;
}

<button class="action-btn disabled">Click Me!</button>

Le bouton aura le style de action-btn et de disabled car il possède les deux classes.

Groupement de sélecteurs

On peut également définir le même style pour plusieurs sélecteurs, on va alors les séparer par des virgules. Exemple :

.style-a, .style-b {
    font-size: 12px
}

<p class="style-a">Hello</p>
<p class="style-b">World</p>

Les deux p auront le même style.

Sélecteur hiérarchique

On va souvent aussi cibler des élements en fonction de leur parent (direct ou indirect) ou leur frère (sibling). On peut par exemple cibler toutes les classes qui sont enfant de div qui ont une classe précise. Exemple :

.main p {
    font-size: 12px;
    font-weight: bold;
}

<div class="main">
    <p>Hello world</p>
</div>
<div>
    <p>Lorem Ipsum</p>
</div>

Dans l’exemple, le style sera appliqué uniquement sur hello world car p est dans une div qui a la classe main, alors que lorem ipsum n’aura aucun style appliqué.

Il est possible de faire la distinction entre un enfant direct et un enfant indirect en utilisant >. Exemple :

.main > p {
    font-size: 12px;
    font-weight: bold;
}

<div class="main">
    <p>Hello world</p>
    <div>
        <p>Lorem Ipsum</p>
    </div>
</div>

Dans l’exemple ici, étant donné que le sélecteur cible les p qui sont directement enfant de .main, le style ne sera applique que sur Hello world et pas sur Lorem ipsum.

On peut aussi avoir besoin de cibler un élément en fonction de l’élément qui le précède grâce à +. Exemple :

p + p {
   font-size: 12px;
}

<p>Hello world</p>
<p>Lorem ipsum</p>

Dans cet exemple, le style ne sera appliqué que sur Lorem ipsum

Pseudo-classes

Les pseudo-classes permettent de cibler des éléments en se basant sur des informations qui ne sont pas dans le document HTML. Parmi les plus utilisées, on peut retrouver des pseudo-classes d’état d’un élément ou de la structure du document.

Il existe plusieurs dizaines de pseudo-classes, voici les plus courantes :

• :hover : Cible un élément qui est survolé par la souris.

button:hover {
    border: 1px solid #1d4ed8;
}

• :focus: Cible un élément qui a le focus (input, …).

input:focus {
    border: 1px solid black;
}

• :first-child : Cible un élément qui est le premier de ses frères. Dans cet exemple, seul le premier li aura une bordure.

li:first-child {
  border: 1px solid #1d4ed8;
}

<ul>
<li>Hello world</li>
<li>Lorem ipsum</li>
</ul>

• :nth-child: Permet de cibler un ou plusieurs des enfants en fonction de leurs index dans la chiane hiérarchique. Il y a énormément de cas possibles pour ce sélecteur, il est plus simple de l’expliquer avec une représentation visuelle

• :has: Permet de sélectionner un élément qui possède au moins un des sélecteurs passé en paramètre. On l’utilise en général pour cibler des éléments en fonction de leur parent ou frère. Dans l’exemple qui suit, le style s’appliquera sur la div parce qu’elle a un enfant direct ul.

div:has( > ul) {
    margin: 4px;
}

<div>
    <p>Hello world</p>
    <ul>
        <li>Hello world</li>
        <li>Lorem Ipsum</li>
    </ul>
</div>

• :link: Permet de cibler un lien qui n’a pas encore été visité. :visited permet de cibler un lien qui a été visité

a:link {
    color: #1d4ed8;
    text-decoration-color: #1e40af;
}
a:visited {
    color: lightgreen;
    text-decoration-color: green;
}

Il en existe de nombreux autres que vous pouvez retrouver sur la documentation dédiée de MDN

La cascade et la spécificité

Lorsque le navigateur va afficher une page il va devoir identifier quel style s’applique à chaque élément. Pour cela, il se base sur 2 choses : l’ordre dans lequel le CSS est défini et la spécificité du sélecteur. Ce mécanisme de détermination du style est appelé cascade.

L’ordre d’importance.

La première chose à laquelle il faut penser pour savoir quel style est appliqué en premier est l’importance du style. Cette importance dépend d’ôu est défini le style. Il sera appliqué dans cet ordre :

• Style du navigateur : chaque navigateur a un style par défaut, c’est le premier style qu’il essaye d’appliquer à un élément.
• Fichier CSS / CSS dans les balises style : après le style par défaut, le navigateur va aller voir le style défini par l’utilisateur. Comme vu plus tôt, s’il existe plusieurs styles définis pour le même sélecteur, c’est le dernier qui sera appliqué.
• Style inline : le style inline est celui qui est défini dans l’attribut style d’une balise HTML. Ce style est plus important que le style défini par l’utilisateur.
• !important : il est possible de définir une règle comme importante. Si c’est le cas, elle sera toujours appliquée (sauf si elle est surchargée ultérieurement)

Spécificité

La spécificité est le poid que le navigateur utilise dans l’algorithme de cascade pour déterminer quel style appliquer à une balise. L’algorithme de spécificité calcule ce poid à partir du sélecteur et de règles définie pour chaque partie d’un sélecteur (élément, identifiant, classe, attribut, …) Plus une partie de sélecteur est précise, plus elle a de poid. L’algorithme est trop complexe pour être étudié ici, vous trouverez plus d’informations sur la page officile de la cascade et la page officielle de la spécificité

Héritage

Il est important de savoir que certaines propriété CSS se transmettent de parent à enfant. C’est généralement le cas pour les styles qui touchent au texte : taille, couleur et style de police.

Le modèle de boîte (box model)

Contenu à rédiger.

Points à couvrir :

• Chaque élément HTML est une boîte rectangulaire
• Les 4 zones : content → padding → border → margin
• box-sizing: border-box — et pourquoi on l’applique toujours en premier
• width et height : comportement avec et sans border-box
• Inspecter le box model dans les DevTools

Les propriétés CSS essentielles

Contenu à rédiger.

Points à couvrir :

• Couleurs : noms (red), hexadécimal (#ff0000), rgb(), hsl()
• Typographie : font-family, font-size, font-weight, line-height, text-align
• Arrière-plan : background-color, background-image, background-size
• Bordures : border, border-radius
• Dimensions : width, height, max-width, min-height
• Opacité et visibilité : opacity, display: none vs visibility: hidden

Pour aller plus loin

• MDN Web Docs : référence des propriétés CSS
• CSS Tricks : guide du box model