Chargement...

Introduction à CSS

Le HTML simple peut afficher du texte et des liens, mais les pages semblent inachevées tant que vous ne contrôlez pas couleur, espacement et mise en page. CSS est le langage qui transforme le balisage structuré en page conçue.

Qu’est-ce que CSS ?

CSS (Cascading Style Sheets) est le langage standard pour styliser les documents HTML. Vous écrivez des règles qui indiquent au navigateur l’apparence des éléments : couleur du texte, polices, marges, arrière-plans, mise en page, etc. HTML répond « qu’est-ce que ce contenu ? » CSS répond « comment doit-il apparaître ? »

HTML et CSS travaillent ensemble

Voyez HTML comme le squelette de la page et CSS comme l’habillage et la finition. Vous avez toujours besoin d’un HTML solide — titres, paragraphes, liens et landmarks — pour que CSS ait des éléments significatifs à styliser. Ce cours suppose que vous connaissez déjà le HTML de base.

📊 Rôles HTML vs CSS

Couche Rôle principal Questions typiques
HTML Structure et sens Est-ce un titre, un paragraphe ou un lien ?
CSS Présentation et mise en page Quelle couleur, taille, espacement et disposition ?
JavaScript (plus tard) Comportement et interactivité Que se passe-t-il au clic ?

Vous étudierez JavaScript dans un cours ultérieur. Pour l’instant, gardez la séparation claire : structure en HTML, apparence en CSS.

Premier regard sur une règle CSS

Une règle CSS a un sélecteur (quoi styliser) et des déclarations (comment styliser). Les déclarations sont entre accolades et utilisent une propriété et une valeur.

Une règle simple

css
CSS Code 
h1 {
color: navy;
font-size: 2rem;
}

Ce que fait cette règle

  • h1 est le sélecteur — il cible chaque élément h1
  • color: navy; définit la couleur du texte
  • font-size: 2rem; définit la taille du titre
  • Chaque déclaration se termine par un point-virgule
    Vous approfondirez sélecteurs et unités plus tard. Ici, il suffit de voir la forme d’une règle.

Voir CSS sur une page

Les navigateurs appliquent les règles CSS aux éléments HTML correspondants. Ci-dessous, une courte page utilise un bloc <style> interne pour voir HTML et CSS dans un seul fichier. Les sessions suivantes couvrent les feuilles externes et d’autres façons d’ajouter CSS.

HTML avec bloc style

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

Ce qui a changé

Sans les règles <style>, la page utilise l’apparence par défaut du navigateur. Avec CSS, l’arrière-plan s’adoucit, le titre devient bleu foncé et le paragraphe gagne un espacement lisible. Même contenu HTML — présentation différente.

Pourquoi « cascading » compte (aperçu)

« Cascading » en CSS signifie que les styles peuvent venir de plusieurs endroits et que le navigateur résout quelle règle gagne via cascade et spécificité. Vous n’avez pas encore besoin de l’algorithme complet. Retenez l’idée : plusieurs règles peuvent cibler le même élément, et CSS a un système clair pour l’apparence finale. Les sessions cascade et spécificité le rendront concret.

Essayez vous-même

  1. Créez un fichier nommé intro.html.
  2. Collez l’exemple HTML-avec-style, enregistrez et ouvrez-le dans le navigateur.
  3. Changez color: #1a365d; sur la règle h1 en color: teal;, enregistrez et actualisez.
  4. Confirmez la couleur du titre. Si rien ne change, vérifiez l’enregistrement et l’onglet correct.

Erreurs fréquentes

  • Attendre que CSS crée la structure de page — utilisez des éléments HTML pour titres, listes et liens ; stylisez-les avec CSS
  • Écrire des noms de propriété sans sélecteur ni accolades, si bien que le navigateur ignore les déclarations
  • Oublier le point-virgule après une déclaration, ce qui peut casser la propriété suivante de la même règle
  • Mettre le contenu visible uniquement en CSS — CSS stylise le contenu ; il ne remplace pas le texte HTML

Résumé

  • CSS stylise les pages HTML : couleurs, polices, espacement, mise en page et présentation
  • HTML structure le contenu ; CSS contrôle son apparence
  • Une règle CSS associe un sélecteur à des déclarations propriété/valeur dans { }
  • Vous pouvez commencer par un bloc <style>, puis passer aux feuilles externes
  • Cascading signifie que plusieurs règles peuvent s’appliquer ; les leçons suivantes expliquent laquelle gagne
  • Entraînez-vous en modifiant une petite règle et en actualisant le navigateur

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
6
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel