No history yet

Introduction à CSS

Donner du style à votre HTML

Jusqu'à présent, nous avons utilisé le HTML pour structurer le contenu. Mais les pages web ne sont pas seulement du texte brut. Elles ont des couleurs, des polices et des mises en page spécifiques. C'est là que les Feuilles de Style en Cascade, ou CSS, entrent en jeu.

CSS (Cascading Style Sheets) defines the styling/presentation of a web page and the elements on it

Le CSS est le langage que nous utilisons pour styliser un document HTML. Il s'occupe de toute la présentation visuelle. Pensez-y de cette façon : si le HTML est le squelette d'une page web, le CSS en est les vêtements, la coiffure et le maquillage. Il donne du style et de la personnalité à la structure.

Le principe clé ici est la séparation des préoccupations. Le HTML gère la structure (quels sont les éléments ?), tandis que le CSS gère la présentation (à quoi ressemblent ces éléments ?). Cette séparation rend votre code beaucoup plus propre, plus facile à lire et plus simple à maintenir. Au lieu de mettre des instructions de style directement dans votre HTML, vous les conservez dans un fichier séparé.

Lesson image

La syntaxe de base

Pour dire au navigateur comment styliser un élément, vous écrivez des règles en CSS. Chaque règle est composée de quelques parties essentielles.

Décomposons cela :

  • Sélecteur (p) : C'est la partie qui cible l'élément HTML que vous voulez styliser. Dans ce cas, nous ciblons tous les éléments de paragraphe (<p>).
  • Bloc de déclaration ({ ... }) : Il est entouré d'accolades et contient une ou plusieurs déclarations.
  • Déclaration (color: blue;) : C'est la règle de style réelle. Elle est composée d'une propriété et d'une valeur, séparées par un deux-points et se terminant par un point-virgule.
  • Propriété (color) : C'est la propriété de style que vous voulez changer, comme la couleur, la taille de la police ou la marge.
  • Valeur (blue) : C'est la valeur que vous assignez à la propriété.
/* Un autre exemple avec plusieurs déclarations */
h1 {
  color: navy;
  font-size: 24px;
  text-align: center;
}

Cette règle cible toutes les balises <h1> et les rend de couleur bleu marine, avec une taille de police de 24 pixels, et centrées sur la page.

Trois façons d'appliquer le CSS

Il existe trois manières d'ajouter des styles CSS à un document HTML. Chacune a ses propres cas d'utilisation, mais l'une d'entre elles est fortement recommandée par rapport aux autres.

  1. Styles en ligne

Vous pouvez appliquer des styles directement à un élément HTML en utilisant l'attribut style. C'est rapide pour des ajustements ponctuels, mais cela mélange la présentation avec la structure, ce qui rend la maintenance difficile.

<p style="color: red; font-size: 16px;">Ce paragraphe est rouge.</p>
  1. Feuille de style interne

Vous pouvez placer vos règles CSS à l'intérieur d'une balise <style> dans la section <head> de votre document HTML. Cela garde les styles séparés du contenu principal, mais ils ne s'appliquent qu'à cette seule page.

<!DOCTYPE html>
<html>
<head>
  <title>Ma Page</title>
  <style>
    body {
      background-color: lightblue;
    }
    p {
      color: navy;
    }
  </style>
</head>
<body>
  <p>Ce paragraphe est bleu marine sur un fond bleu clair.</p>
</body>
</html>
  1. Feuille de style externe

C'est la méthode la plus courante et la plus recommandée. Vous créez un fichier séparé avec une extension .css (par exemple, styles.css) et y placez toutes vos règles CSS. Ensuite, vous le liez à votre document HTML en utilisant une balise <link> dans la section <head>.

Cette approche est la meilleure car elle sépare complètement la structure et le style. Un seul fichier CSS peut être utilisé pour styliser un site web entier, ce qui rend les mises à jour et la maintenance beaucoup plus simples. Si vous voulez changer la couleur de tous les liens sur votre site de 100 pages, vous n'avez qu'à modifier une seule ligne dans votre fichier CSS.

<!-- Dans votre fichier HTML (index.html) -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>


/* Dans votre fichier CSS (styles.css) */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
}

Maintenant que nous comprenons ce qu'est le CSS et comment l'inclure, nous pouvons commencer à explorer les sélecteurs et les propriétés plus en détail.

Quiz Questions 1/5

Quel est le rôle principal du CSS (Cascading Style Sheets) dans le développement web ?

Quiz Questions 2/5

Dans la règle CSS p { color: blue; }, que représente p ?