Bases du CSS
HTML structure le contenu, CSS le rend beau ! Découvrez comment transformer une page web austère en design moderne et attractif.
Objectifs du cours
- Comprendre le rôle du CSS dans une page web
- Connaître les trois méthodes d'intégration du CSS
- Maîtriser les sélecteurs CSS (balise, classe, id)
- Utiliser les propriétés CSS fondamentales (couleurs, polices, tailles)
- Créer des styles pour améliorer l'apparence d'une page HTML
Erreurs courantes à éviter
- Confondre les sélecteurs . (classe) et # (id)
- Oublier le point-virgule ; à la fin de chaque déclaration
- Utiliser des styles inline (attribut style) plutôt qu'un fichier CSS externe
- Ne pas respecter la syntaxe : selecteur { propriete: valeur; }
**CSS : Cascading Style Sheets**
CSS signifie **"Feuilles de style en cascade"**. C'est le langage qui contrôle l'**apparence visuelle** des pages web.
**Rôle du CSS** : • Définir les **couleurs** (texte, fond, bordures) • Choisir les **polices** (taille, famille, style) • Gérer la **mise en page** (positionnement, espacement) • Créer des **animations** et transitions • Adapter le design aux différents écrans (responsive)
**Séparation des responsabilités** :
📄 **HTML** = Structure et contenu • Quoi afficher (titres, paragraphes, images) • Sémantique du document
🎨 **CSS** = Présentation et design • Comment l'afficher (couleurs, tailles, positions) • Aspect visuel
**Exemple concret** :
HTML seul (sans CSS) : • Texte noir sur fond blanc • Police par défaut (Times New Roman, généralement) • Pas d'espacement harmonieux • Design très basique, années 90
HTML + CSS : • Couleurs personnalisées • Polices modernes (Google Fonts, etc.) • Espacement et alignement parfaits • Design professionnel et attractif
**Pourquoi "en cascade" ?**
Le "C" de CSS (Cascading) fait référence au système de **priorités** : • Si plusieurs règles ciblent le même élément, la plus **spécifique** gagne • Permet d'avoir des styles généraux et des exceptions • Évite la répétition de code
**Version actuelle : CSS3** : • Standard moderne (modules indépendants) • Animations et transitions fluides • Flexbox et Grid pour la mise en page • Variables CSS (--nom-variable) • Effets visuels avancés (ombres, dégradés, filtres)
# Comparaison HTML sans CSS vs avec CSS
html_sans_css = """
<!DOCTYPE html>
<html>
<body>
<h1>Mon Site Web</h1>
<p>Ceci est un paragraphe.</p>
<p>Voici un autre paragraphe.</p>
</body>
</html>
"""
html_avec_css = """
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f4f8;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: #2563eb;
font-size: 36px;
text-align: center;
}
p {
color: #475569;
font-size: 16px;
line-height: 1.6;
max-width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>Mon Site Web</h1>
<p>Ceci est un paragraphe.</p>
<p>Voici un autre paragraphe.</p>
</body>
</html>
"""
print("=== SANS CSS ===")
print("┌──────────────────────────┐")
print("│ Mon Site Web │ (noir, Times New Roman, à gauche)")
print("│ │")
print("│ Ceci est un paragraphe. │ (noir, petit, collé)")
print("│ Voici un autre paragraphe│")
print("└──────────────────────────┘")
print("\n=== AVEC CSS ===")
print("┌──────────────────────────┐")
print("│ │")
print("│ Mon Site Web │ (bleu, 36px, centré)")
print("│ │")
print("│ Ceci est un paragraphe. │ (gris, 16px, espacé)")
print("│ │")
print("│ Voici un autre │")
print("│ paragraphe. │")
print("│ │")
print("└──────────────────────────┘")
print(" (fond bleu clair)")
print("\nDIFFÉRENCE : Le contenu est identique,")
print(" seule la PRÉSENTATION change !")Quiz de validation
1. Que signifie CSS ?
2. Quelle est la MEILLEURE méthode pour intégrer du CSS ?
3. Quel est le préfixe pour un sélecteur de CLASSE ?
4. Quel code couleur hexadécimal représente le ROUGE pur ?
5. Quelle propriété CSS contrôle la TAILLE de la police ?
