CSS : Les Bases

25 min Cours 3/10

Qu'est-ce que CSS ?

CSS (Cascading Style Sheets) est le langage qui met en forme les pages web. Si HTML est le squelette, CSS est le maquillage, les vêtements et la décoration.

Sans CSS

Titre en Times New Roman

Texte simple, pas de style.

Avec CSS

Titre stylisé

Texte avec couleurs et mise en page !

Syntaxe CSS

Une règle CSS se compose d'un sélecteur et d'un bloc de déclarations :

sélecteurp

{

propriétécolor

valeurred

;}

"Tous les paragraphes auront le texte en rouge"

Les sélecteurs CSS

Les sélecteurs déterminent quels éléments HTML seront stylisés :

Élément

p { }

Sélectionne toutes les balises <p>

Classe

.intro { }

Sélectionne class="intro"

#menu { }

Sélectionne id="menu"

Universel

* { }

Sélectionne tous les éléments

Descendant

div p { }

Les <p> dans un <div>

Multiple

h1, h2 { }

Plusieurs sélecteurs

Important : Les classes (.classe) sont réutilisables, les IDs (#id) doivent être uniques !

Exemple de fichier CSS

style.css

/* Fichier style.css */

/* Sélecteur d'élément */
body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

/* Sélecteur de classe */
.titre-principal {
  color: #e74c3c;
  font-size: 32px;
  text-align: center;
}

/* Sélecteur d'ID */
#menu {
  background-color: #333;
  padding: 15px;
}

Propriétés essentielles

colorCouleur du textecolor: red;

background-colorCouleur de fondbackground-color: #f0f0f0;

font-sizeTaille du textefont-size: 16px;

font-familyPolice de caractèresfont-family: Arial;

marginMarge externemargin: 10px;

paddingMarge internepadding: 20px;

borderBordureborder: 1px solid black;

width / heightLargeur / Hauteurwidth: 100px;

Le Box Model (Modèle de Boîte)

Chaque élément HTML est une "boîte" composée de 4 couches :

MARGIN

BORDER

PADDING

CONTENT

Content

Le contenu (texte, image)

Padding

Espace intérieur

Border

Bordure visible

Margin

Espace extérieur

Lier CSS au HTML

Il existe 3 façons d'ajouter du CSS à une page HTML :

1. Fichier externe (recommandé)

<link rel="stylesheet" href="style.css">

2. CSS interne (dans <head>)

<style> p { color: blue; } </style>

3. CSS en ligne (déconseillé)

<p style="color: blue;">Texte</p>

À toi de jouer !

Reprends ta page HTML du cours précédent et ajoute du style :

1Crée un fichier style.css
2Lie-le à ton HTML avec <link>
3Change la couleur du titre en rouge
4Ajoute une couleur de fond au body

Défi bonus : Crée une classe .importantavec du texte en gras et une bordure, puis applique-la à un paragraphe !

Quiz : Teste tes connaissances

5 questions pour vérifier ce que tu as appris sur CSS

À retenir

CSS stylise le HTML avec des règles : sélecteur { propriété: valeur; }
Sélecteurs : élément, .classe, #id
Box Model : content → padding → border → margin
Préfère un fichier CSS externe avec <link>

HTML Bases Cours suivant : Structure page web