Qu'est-ce que le CSS ?

CSS = Cascading Style Sheets (Feuilles de style en cascade).

📖 Définition

CSS est un langage informatique qui permet de mettre en forme les pages web créées avec HTML.

→ 📄 HTML

Structure le contenu
(la charpente de la maison)

→ 🎨 CSS

Met en forme le contenu
(la décoration de la maison)

→ ⚡ JavaScript

Ajoute l'interactivité
(l'électricité de la maison)

💡 Pourquoi utiliser CSS ?
  • Sépare le contenu (HTML) de la présentation (CSS)
  • Permet de styliser plusieurs pages à la fois
  • Facilite la maintenance du site
  • Améliore l'accessibilité
📖 Voir l'exemple visuel
✅ HTML sans CSS vs HTML avec CSS

Sans CSS :

Titre

Un paragraphe simple

Avec CSS :

Titre stylisé

Un paragraphe avec style

 Syntaxe de base

La syntaxe CSS est très simple :

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

📝 Exemple concret :

/* Tous les paragraphes seront rouges et centrés */
p {
    color: red;
    text-align: center;
}

/* Tous les titres h1 seront bleus avec une taille de 24px */
h1 {
    color: blue;
    font-size: 24px;
}
🎯 Règles à retenir :
  • Chaque règle se termine par ;
  • Les propriétés et valeurs sont séparées par :
  • On peut mettre plusieurs propriétés
  • Les commentaires s'écrivent /* commentaire */
✅ Vérification
🔍 À retenir

Un sélecteur cible quoi ? → Les éléments HTML à styliser

Une propriété c'est quoi ? → Ce qu'on veut modifier (couleur, taille, etc.)

Une valeur c'est quoi ? → La nouvelle valeur de la propriété

Les 3 façons d'intégrer du CSS

  📌 Méthode 1 : CSS en ligne (inline)

<h1 style="color: blue; font-size: 24px;">Titre bleu</h1>
     👍 Avantage : Rapide pour tester 👎 Inconvénient : Mélange HTML/CSS, peu maintenable

   📌 Méthode 2 : CSS interne

  <style>
    h1 {
        color: blue;
        font-size: 24px;
    }
  </style>
👍 Avantage : Une seule page 👎 Inconvénient : Non réutilisable

 CSS externe (recommandée)

<link rel="stylesheet" href="style.css">
👍 Avantage : Réutilisable, maintenable 👎 Inconvénient : Nécessite un fichier supplémentaire
📖 Quelle méthode choisir ?
✅ Recommandation

Pour un projet professionnel : CSS externe toujours !

Pour tester rapidement : CSS interne (dans <style>)

Pour un test ponctuel : CSS inline (à éviter en production)

  Les sélecteurs simples

Sélecteur universel

* { margin: 0; }

Cible TOUS les éléments

Sélecteur de type

p { }

Cible tous les paragraphes

Sélecteur de classe

.ma-classe { }

Cible les éléments avec class="ma-classe"

Sélecteur d'ID

#mon-id { }

Cible l'élément avec id="mon-id"

<!-- Exemple HTML -->
<div class="card">
    <h2 id="titre">Mon titre</h2>
    <p>Un paragraphe normal</p>
    <p class="special">Un paragraphe spécial</p>
</div>

/* CSS correspondant */
.card { background: #f0f0f0; }
#titre { color: blue; }
p { font-size: 14px; }
.special { color: red; }
📖 Exercice
✅ À vous de jouer !

Comment sélectionneriez-vous tous les éléments avec la classe "important" ?

/* Réponse : */
.important {
    /* vos styles ici */
}

Propriétés CSS essentielles

Catégorie Propriété Valeurs
Couleur color red, blue, #ff0000, rgb(255,0,0)
Couleur de fond background-color #f0f0f0, lightblue
Taille de police font-size 16px, 1.2rem, 80%
Police font-family Arial, 'Segoe UI', sans-serif
Gras font-weight bold, normal, 700
Italique font-style italic, normal
Alignement texte text-align left, center, right, justify
Largeur width 100px, 50%, auto
Hauteur height 100px, auto
Marge intérieure padding 10px, 20px 10px
Marge extérieure margin 10px, auto
Bordure border 1px solid black 
.carte {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 15px;
    font-family: Arial, sans-serif;
    text-align: center;
}

 Cascade et spécificité

Le "C" de CSS signifie Cascade. Quand plusieurs règles s'appliquent au même élément, laquelle l'emporte ?

Poids 1 : Sélecteur universel *
↑
Poids 10 : Sélecteur de type p
↑
Poids 100 : Sélecteur de classe .ma-classe
↑
Poids 1000 : Sélecteur d'ID #mon-id
↑
Poids infini : Style inline style="..."
🎯 Règle d'or : Plus le sélecteur est précis, plus il est prioritaire !
📖 Exemple de cascade
✅ Exemple
<p id="para" class="texte">Bonjour</p>

p { color: gray; }        /* Priorité 1 */
.texte { color: green; }  /* Priorité 100 → l'emporte */
#para { color: red; }     /* Priorité 1000 → l'emporte encore plus */

 Exercices pratiques

🎯 Exercice 1

Créez une carte (card) avec : fond gris clair, bordure arrondie (10px), padding 15px, ombre légère.
📖 Voir la solution 
.card {
    background: #f0f0f0;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

🎯 Exercice 2

Mettez tous les liens en bleu, sans soulignement, et en orange au survol.
📖 Voir la solution 
a {
    color: blue;
    text-decoration: none;
}
a:hover {
    color: orange;
}

🎯 Exercice 3

Créez un bouton vert avec du texte blanc, padding 10px 20px, coins arrondis 5px.
📖 Voir la solution 
.btn {
    background: green;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

📝 Résumé - Ce qu'il faut retenir

  • ✅ CSS = mise en forme des pages web
  • ✅ Syntaxe : sélecteur { propriété: valeur; }
  • ✅ 3 méthodes : inline, interne, externe (préférée)
  • ✅ Sélecteurs : * (universel), p (type), .classe, #id
  • ✅ La cascade : le style le plus spécifique l'emporte