Syntaxe CSS et sélecteurs de base

Première leçon du cours CSS fondamentaux, en accès libre : environ 15 minutes, 3 exercices et 3 questions de quiz. C'est la leçon de base du catalogue ; dans l'espace étudiant, elle est réécrite pour ton profil.

Objectifs

Relier une feuille de style à une page HTML
Écrire une règle CSS (sélecteur, propriété, valeur)
Cibler des éléments par type, classe, id et combinateurs simples

Syntaxe d'une règle CSS Sélecteurs de base

CSS (Cascading Style Sheets) décrit l’apparence d’une page : couleurs, polices, espacements, mise en page. HTML garde la structure, CSS s’occupe de la présentation. Cette séparation permet de changer tout le design d’un site sans toucher au contenu.

Relier CSS à une page

La méthode recommandée est un fichier externe, partagé par toutes les pages :

<head>
  <meta charset="UTF-8">
  <title>Mon site</title>
  <link rel="stylesheet" href="css/style.css">  <!-- feuille de style externe -->
</head>

Deux autres méthodes existent : une balise <style> dans le <head> (pratique pour tester) et l’attribut style="..." sur un élément (à éviter : difficile à maintenir et très prioritaire).

Anatomie d’une règle

/* sélecteur : QUI on cible */
h1 {
  color: darkslateblue;   /* propriété: valeur; */
  font-size: 2rem;        /* chaque déclaration finit par ; */
}

Un oubli de point-virgule ou d’accolade invalide souvent la déclaration suivante, sans message d’erreur. Les outils de développement du navigateur (clic droit, Inspecter) affichent les déclarations ignorées barrées ou signalées.

Les sélecteurs de base

p { line-height: 1.6; }          /* type : tous les <p> */

.carte { border: 1px solid #ccc; }  /* classe : tous les éléments class="carte" */

#panier { position: sticky; }    /* id : l'unique élément id="panier" */

* { box-sizing: border-box; }    /* universel : tous les éléments */

En HTML, un élément peut avoir plusieurs classes séparées par des espaces :

<article class="carte carte--promo">...</article>

.carte--promo { border-color: crimson; }
.carte.carte--promo { /* élément ayant LES DEUX classes (pas d'espace) */ }

Préférez les classes pour styliser : elles sont réutilisables et de faible priorité, donc faciles à surcharger. Gardez les id pour les ancres et JavaScript.

Combiner les sélecteurs

nav a { text-decoration: none; }     /* descendant : tout <a> dans un <nav> */
ul > li { margin-bottom: .5rem; }    /* enfant direct uniquement */
h2 + p { font-weight: bold; }        /* le <p> qui suit immédiatement un <h2> */
h1, h2, h3 { font-family: Georgia, serif; }  /* groupe : même style pour les trois */

La différence entre espace et > est importante : nav a cible aussi un lien dans une liste imbriquée, nav > a seulement les liens directement enfants de nav.

Sélecteurs d’attribut

a[href^="https"] { color: green; }   /* href commence par https */
input[type="email"] { width: 100%; }

Méthode de travail

Écrivez d’abord le HTML sémantique.
Ajoutez des classes là où vous avez besoin de styles spécifiques.
Inspectez dans le navigateur : vous pouvez modifier le CSS en direct pour tester, puis reporter les changements dans votre fichier.

Exercices

Les solutions et les tests restent sur le serveur. Dans l'espace étudiant, ton code est exécuté et corrigé, et le tuteur donne des indices avant la solution.

CodeDifficulté 1Page HTML dans le navigateur2 indices

Premières règles

Dans la balise <style>, écrivez trois règles : tous les <h1> en couleur rebeccapurple ; les éléments de classe intro en font-size: 20px ; l’élément d’id note en font-style: italic.

<style>
  /* vos règles */
</style>
<h1>Titre</h1>
<p class="intro">Introduction</p>
<p id="note">Remarque</p>

CodeDifficulté 2Page HTML dans le navigateur2 indices

Cibler avec les combinateurs

Sans ajouter de classe dans le HTML : retirez le soulignement (text-decoration: none) des liens dans le nav uniquement, et mettez en gras (font-weight: bold) les <li> enfants directs de .menu (pas ceux de la sous-liste).

<style>
  /* vos règles */
</style>
<nav>
  <ul class="menu">
    <li><a href="/">Accueil</a></li>
    <li>Produits
      <ul class="sous-menu">
        <li><a href="/sacs">Sacs</a></li>
      </ul>
    </li>
  </ul>
</nav>
<p><a href="/cgv">CGV</a></p>

QCMDifficulté 21 indice

Lire un sélecteur

Que cible .carte.promo ?

Les éléments .promo situés dans un .carte
Les éléments ayant à la fois la classe carte et la classe promo
Les éléments ayant la classe carte ou la classe promo

Quiz de fin de leçon

Quelle est la méthode recommandée pour ajouter du CSS à un site ?

L'attribut style sur chaque élément
Un fichier externe relié par <link>
Une balise <style> dans chaque page

Quel sélecteur cible les

enfants directs d’un

ul li
ul > li
ul + li

Combien d’éléments peuvent avoir le même id dans une page ?

Un seul
Deux
Illimité