Qu'est-ce que CSS?

Les feuilles de style en cascade (CSS) sont un langage de styles utilisé pour décrire la présentation d’un document écrit dans un langage de balisage (HTML, XHTML, SVG, XML).

Fonctions principales du CSS :

Séparer la présentation du contenu : Permet de modifier l’apparence d’une page web sans changer sa structure.
Styliser les éléments : Contrôler les couleurs, les polices, les tailles, les marges, les bordures et autres propriétés visuelles des éléments.
Créer un design adaptatif : Avec des media queries, appliquer différents styles selon les caractéristiques de l’appareil de l’utilisateur (résolution d’écran, orientation, etc.).
Animations et transitions : Créer des effets visuels pour l’interactivité et améliorer l’expérience utilisateur.
Gérer la mise en page : Positionner les éléments sur la page en utilisant diverses techniques (Flexbox, Grid, floats, etc.).

Structure d’une règle CSS :

/* Sélecteur */
h1 {
  /* Déclarations */
  color: blue; /* Propriété : valeur ; */
  font-size: 24px;
}

Principales méthodes pour relier le CSS au document HTML :

Fichier externe (<link>): La méthode la plus courante et recommandée. Les styles sont stockés dans un fichier .css séparé.
```
<link rel="stylesheet" href="styles.css">
```
Dans la balise <style> : Les styles sont définis directement dans le document HTML, généralement dans la section <head>. Convient pour de petits styles ou des tests rapides.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Styles en ligne (style attribut) : Les styles sont appliqués à un élément HTML spécifique via l’attribut style. A une priorité élevée, mais complique la maintenance et la scalabilité.
```
<div style="border: 1px solid black;">
  Ce div a un style en ligne.
</div>
```

La cascade détermine comment le navigateur applique les styles lorsqu’il y a plusieurs règles en conflit pour un même élément. Elle prend en compte :

Priorité des sélecteurs : Les sélecteurs plus spécifiques ont une priorité plus élevée.
Ordre d’apparition : Les règles déclarées plus tard écrasent celles déclarées plus tôt avec la même priorité.
Importance (!important) : La déclaration avec !important a la priorité la plus haute (à utiliser avec précaution).
Source des styles : Les styles de l’auteur ont une priorité plus grande que ceux de l’utilisateur ou ceux par défaut du navigateur.