Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Introduction : vos premiers styles | SovranCode

Contenu du coursCSS — Introduction · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS43 min

CSS — Introduction

Understand the role of CSS and connect a stylesheet to a meaningful HTML document.

CSS décrit la présentation à l’aide de règles. Un sélecteur désigne les éléments concernés ; chaque déclaration associe une propriété à une valeur. En gardant la structure dans HTML et l’apparence dans CSS, il devient plus facile de comprendre ce que fait chaque partie du code.

Lire une première règle CSS

Dans cet exemple, repérez d’abord les éléments visés, puis les propriétés et leurs valeurs. Avant de modifier le code, demandez-vous ce qui devrait changer à l’écran.

/* styles.css */
body {
  margin: 0;
  color: #10231f;
  background: #f8f6ef;
  font-family: system-ui, sans-serif;
}

h1 {
  max-width: 14ch;
  line-height: 1;
}

Les bons réflexes pour commencer

Reliez la feuille de style au document depuis head.
Posez des styles de base lisibles avant de travailler les composants.
Utilisez les outils de développement du navigateur pour examiner les règles appliquées.

L’erreur à éviter

CSS ne remplace pas le sens du HTML. Une div qui ressemble à un bouton reste une div : choisissez d’abord l’élément adapté au contenu ou à l’action.

ATELIER CSS · ENVIRON 25 MIN

Mettre en forme une invitation à un atelier

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Vérifier le chargement de la feuille de style

Une feuille de style externe est un fichier distinct, chargé grâce à un élément link placé dans head. Son href est résolu à partir de l’adresse du document HTML. Un fichier absent, une différence de majuscules dans le nom ou une réponse qui contient du HTML au lieu de CSS peut laisser la page avec les styles par défaut. Avant de changer les sélecteurs, ouvrez l’onglet Réseau des outils de développement, rechargez la page et examinez la réponse du fichier CSS. Dans cet exercice, les règles sont placées dans style pour que l’exemple fonctionne dans un seul document. Pour un véritable site de plusieurs pages, regroupez-les dans une feuille de style partagée.

Comprendre ce qu’une règle cible et ce qu’elle change

Dans .invitation { padding: 2rem; }, le sélecteur cible une classe, les accolades regroupent les déclarations et les deux-points séparent la propriété de sa valeur. Les points-virgules séparent les déclarations. En général, une propriété incorrecte ou une valeur non prise en charge est ignorée sans arrêter toute la feuille de style. Commencez par un changement visible, inspectez la règle appliquée, puis ajoutez la suivante. Les styles par défaut restent actifs là où vos règles ne les remplacent pas : un titre garde son rôle et un lien reste utilisable au clavier même si leur apparence change.

Changez seulement le padding de l’invitation. Prévoyez quel espace va augmenter, puis comparez avec une modification du padding de body.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { margin: 0; padding: 2rem; font: 1rem/1.7 system-ui; background: #edf2f7; color: #172b40; }
.invitation { max-width: 40rem; margin-inline: auto; padding: 2rem; background: white; border-top: 6px solid #254fc0; }
h1 { line-height: 1.15; }
a { color: #254fc0; }
</style>
</head>
<body>
<main class="invitation"><h1>Atelier CSS du samedi</h1><p>Venez avec votre curiosité et un navigateur. Nous allons rendre une invitation plus agréable à lire.</p><a href="#details">Consulter les détails</a><p id="details">Début à 10 h. Les débutants sont les bienvenus.</p></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { margin: 0; padding: 2rem; font: 1rem/1.7 system-ui; background: #edf2f7; color: #172b40; }
.invitation { max-width: 40rem; margin-inline: auto; padding: 2rem; background: white; border-top: 6px solid #254fc0; }
h1 { line-height: 1.15; }
a { color: #254fc0; }
</style>
</head>
<body>
<main class="invitation"><h1>Atelier CSS du samedi</h1><p>Venez avec votre curiosité et un navigateur. Nous allons rendre une invitation plus agréable à lire.</p><a href="#details">Consulter les détails</a><p id="details">Début à 10 h. Les débutants sont les bienvenus.</p></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.invitation { color #172b40; padding: 20; }

Voir la correction et son explication

.invitation { color: #172b40; padding: 20px; }

Il manque les deux-points dans la déclaration color. Pour padding, cette longueur non nulle demande une unité ; la valeur zéro peut s’écrire sans unité. Examinez chaque déclaration séparément au lieu de conclure que tout le fichier ne fonctionne pas.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez un petit site d’événement avec deux pages HTML reliées au même fichier styles.css. Donnez-leur des styles de base lisibles et utilisez la même classe invitation.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mettre en forme une invitation à un atelier — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Mettre en forme une invitation à un atelier</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mettre en forme une invitation à un atelier — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Mettre en forme une invitation à un atelier</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Les deux pages chargent la même feuille de style, sans erreur de requête.Une modification d’une règle partagée se retrouve sur les deux pages.Le lien reste utilisable au clavier et le contenu se comprend aussi sans CSS.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. La page affiche uniquement les styles par défaut. Que vérifier en premier ?Augmenter la spécificité de tous les sélecteursVérifier que la requête de la feuille de style charge bien le CSS attenduRemplacer tous les titres par des div

2. Quelle déclaration donne une longueur de padding non nulle valide ?padding: 16;padding = 16px;padding: 1rem;

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

CSS — Introduction

Lire une première règle CSS

Les bons réflexes pour commencer

L’erreur à éviter

Mise en pratique guidée

Faire le point

Mettre en forme une invitation à un atelier

Vérifier le chargement de la feuille de style

Comprendre ce qu’une règle cible et ce qu’elle change

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris