BananaMaster

4 Comment utiliser CSS en HTML : guide étape par étape - ( HTML et CSS, Front End )

Si tu as oublié quelque chose — clique pour retourner à la leçon.

📘 Exercices pratiques sur les styles CSS

Pour chaque tâche, crée une classe séparée dans le fichier style.css et applique-la à la balise HTML correspondante.

📌 Structure des fichiers : index.html + style.css

✏️ Tâche 1

Reproduis l'apparence de ce texte :

Hello World

• Couleur du texte : red
• Taille de police : 20px

✏️ Tâche 2

Reproduis l'apparence de ce texte :

My Name

• Couleur du texte : #2bcd84
• Graisse : 700

✏️ Tâche 3

Reproduis l'apparence de ce texte :

I love coding

• Police : "Courier New", Courier, monospace
• Taille de police : 24px
• Couleur du texte : #f0a830

✏️ Tâche 4

Reproduis l'apparence de ce texte :

Frontend Developer

• Couleur du texte : blue
• Taille de police : 34px
• Graisse : 300

✏️ Tâche 5

Reproduis l'apparence de ce texte :

CSS is cool

• Couleur du texte : #5bc4f5
• Police : Georgia, serif
• Taille de police : 20px

✏️ Tâche 6

Reproduis l'apparence de ce texte :

JavaScript

• Couleur du texte : white
• Taille de police : 18px
• Graisse : 600

✏️ Tâche 7

Reproduis l'apparence de ce texte :

Rockstar Games

• Couleur du texte : #ff6b6b
• Taille de police : 50px
• Police : "Courier New", Courier, monospace
• Graisse : 900

✏️ Tâche 8

Reproduis l'apparence de ce texte :

Small and light

• Couleur du texte : #888
• Taille de police : 15px
• Graisse : 100

✏️ Tâche 9

Reproduis l'apparence de ce texte :

GTA 6 is coming

• Couleur du texte : #b89ef8
• Police : Impact, fantasy
• Taille de police : 36px
• Graisse : 400

✏️ Tâche 10 — 🔥 Bonus

Invente toi-même ! Crée une classe .my-style et applique-la à n'importe quelle balise.

Text

• Choisis ta propre couleur de texte
• Choisis ta propre taille de police
• Choisis ta propre graisse
• Choisis ta propre police

📌 Important :
Chaque classe est écrite séparément dans style.css.
Utilisez uniquement HTML et CSS.
JavaScript n'est pas nécessaire.
Entraîne-toi sur les propriétés : color, font-size, font-weight, font-family.