← Retour au cours : CSS de Zéro à Héros
⚠️ Mode Visiteur : Vous lisez ce cours gratuitement. Créez un compte pour sauvegarder votre progression et obtenir des badges ! 🏆

Introduction au CSS et sélecteurs

Découvrez le CSS : styliser le web

CSS (Cascading Style Sheets) est le langage qui donne vie et beauté à vos pages HTML.

Qu'est-ce que le CSS ?

Le CSS définit l'apparence visuelle : couleurs, polices, espacements, positionnement, animations...

Trois façons d'intégrer du CSS

1. CSS inline (dans la balise)

<p style="color: blue; font-size: 18px;">Texte bleu</p>

❌ Éviter : difficile à maintenir

2. CSS interne (balise <style>)

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

⚠️ OK pour de petites pages

3. CSS externe (fichier .css)

<!-- Dans le HTML -->
<link rel="stylesheet" href="style.css">

/* Dans style.css */
p {
    color: blue;
    font-size: 18px;
}

✅ Recommandé : réutilisable et organisé

Syntaxe CSS

sélecteur {
    propriété: valeur;
    propriété2: valeur2;
}

Sélecteurs de base

Sélecteur d'élément

h1 {
    color: navy;
}

Sélecteur de classe

.ma-classe {
    background-color: yellow;
}

<!-- HTML -->
<p class="ma-classe">Texte</p>

Sélecteur d'ID

#mon-id {
    font-weight: bold;
}

<!-- HTML -->
<div id="mon-id">Contenu</div>

Sélecteur universel

* {
    margin: 0;
    padding: 0;
}

Sélecteurs combinés

/* Plusieurs éléments */
h1, h2, h3 {
    font-family: Arial;
}

/* Descendant */
article p {
    line-height: 1.6;
}

/* Enfant direct */
div > p {
    color: red;
}

/* Adjacent */
h2 + p {
    margin-top: 0;
}

Sélecteurs d'attribut

/* Élément avec attribut */
a[target] {
    color: orange;
}

/* Valeur exacte */
a[href="https://example.com"] {
    font-weight: bold;
}

/* Commence par */
a[href^="https"] {
    color: green;
}

/* Termine par */
a[href$=".pdf"] {
    color: red;
}

Spécificité CSS

Ordre de priorité (du plus fort au plus faible) :

  1. !important (à éviter)
  2. Style inline
  3. ID (#mon-id)
  4. Classe (.ma-classe), attributs, pseudo-classes
  5. Éléments (p, div)
/* Spécificité faible */
p { color: black; }

/* Spécificité moyenne */
.texte { color: blue; }

/* Spécificité forte */
#titre { color: red; }

/* À éviter */
p { color: green !important; }

Exemple complet

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styles généraux */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Classes utilitaires */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background-color: #0056b3;
}

Points clés

  • CSS = style et apparence
  • Fichier externe (.css) recommandé
  • Classes (.) pour réutiliser
  • ID (#) unique par page
  • La spécificité détermine quel style s'applique

📝 Exercices (1)

Exercice 1 : CSS signifie

CSS signifie...

📝 Vous avez terminé cette leçon ?

Créez un compte gratuit pour sauvegarder votre progression !

Créer un compte gratuit
Leçon suivante →