Chapitre 1 : Introduction au CSS

Découvrez les bases du CSS, son rôle dans le développement web et les différentes méthodes pour l'intégrer à vos pages.

1. Qu'est-ce que le CSS ?

Le CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la présentation d'un document HTML ou XML. Alors que le HTML structure le contenu, le CSS permet de contrôler son apparence visuelle.

Voici ce que le CSS permet de modifier :

  • Couleurs : texte, arrière-plans, bordures
  • Typographie : polices, tailles, espacements
  • Disposition : positionnement des éléments, grilles, flexbox
  • Effets visuels : ombres, transitions, animations
  • Adaptation : responsive design pour différents appareils
Pourquoi séparer HTML et CSS ?
  • Maintenance facilitée : modification du design sans toucher au contenu
  • Réutilisation : mêmes styles applicables à plusieurs pages
  • Performance : fichiers CSS mis en cache par le navigateur
  • Accessibilité : possibilité de proposer des styles alternatifs
  • Responsive design : adaptation aisée à différents écrans

Exemple concret

Imaginez un site avec 100 pages HTML. Sans CSS, pour changer la couleur des titres, vous devriez modifier chaque page. Avec CSS, un seul changement dans le fichier .css suffit.

2. Première règle CSS

Une règle CSS se compose de :

  • Un sélecteur qui cible les éléments HTML
  • Des propriétés et leurs valeurs entre accolades
/* Format général d'une règle CSS */
sélecteur {
  propriété: valeur;
  autre-propriété: autre-valeur;
}

Exemple complet avec HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Premier CSS</title>
  <style>
  /* Cible tous les éléments <p> */
  p {
    color: #e74c3c; /* Couleur du texte */
    font-size: 18px; /* Taille de police */
    line-height: 1.6; /* Hauteur de ligne */
    margin-bottom: 1.5em; /* Marge en bas */
  }

  /* Cible les éléments avec class="important" */
  .important {
    font-weight: bold;
    border-left: 3px solid #e74c3c;
    padding-left: 10px;
  }
  </style>
</head>
<body>
  <p>Ce paragraphe est stylisé par CSS.</p>
  <p class="important">Ce paragraphe a une classe supplémentaire.</p>
</body>
</html>
Commentaires en CSS

Les commentaires (entre /* et */) sont essentiels pour documenter votre code. Ils ne sont pas interprétés par le navigateur.

/* Ceci est un commentaire sur une ligne */

/*
  Ceci est un commentaire
  sur plusieurs lignes
*/

3. Méthodes d'intégration du CSS

3.1 CSS en ligne (inline)

Le style est appliqué directement sur un élément HTML via l'attribut style.

<p style="color: blue; font-size: 16px;">
  Ce texte est bleu et de taille 16px.
</p>
Quand utiliser le CSS inline ?

À réserver pour :

  • Styles spécifiques à un élément unique
  • Modifications temporaires pendant le développement
  • Cas où vous ne pouvez pas modifier les fichiers CSS (certains CMS)

Inconvénients :

  • Difficile à maintenir
  • Pas de réutilisation
  • Priorité élevée (peut causer des problèmes de surcharge)

3.2 CSS interne (balise <style>)

Les règles CSS sont placées dans une balise <style> dans le <head> du document HTML.

<!DOCTYPE html>
<html>
<head>
  <style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  h1 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
  }
  </style>
</head>
<body>
  <h1>Titre stylisé</h1>
  <p>Contenu de la page</p>
</body>
</html>
Avantages et cas d'usage

Avantages :

  • Plus organisé que le CSS inline
  • Applicable à toute la page
  • Utile pour les petites pages ou prototypes

Cas d'usage :

  • Pages uniques (landing pages simples)
  • Prototypes rapides
  • Email HTML (où les fichiers externes ne sont pas supportés)

3.3 CSS externe (fichier .css)

La méthode recommandée : les styles sont définis dans un fichier séparé (.css) lié au HTML via la balise <link>.

Structure de fichiers :

projet/
├── index.html
├── css/
│ └── style.css
└── images/

HTML :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Titre stylisé</h1>
  <p>Contenu de la page</p>
</body>
</html>

CSS (style.css) :

/* style.css */
body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1, h2, h3 {
  color: #2c3e50;
  font-weight: 600;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}
Meilleures pratiques pour les fichiers externes
  • Organisation : Créez un dossier css/ pour tous vos fichiers CSS
  • Nommage : Utilisez des noms descriptifs (main.css, theme.css)
  • Performance : Minifiez vos fichiers CSS en production
  • Modularité : Séparer les styles en plusieurs fichiers si nécessaire (typographie, layout, composants)

Avantages du CSS externe

  • Maintenance : Modification centrale pour tout le site
  • Performance : Fichier mis en cache par le navigateur
  • Séparation claire : Structure (HTML) et présentation (CSS) distinctes
  • Collaboration : Plusieurs développeurs peuvent travailler simultanément
  • Responsive : Facilite la gestion des media queries

4. Bonnes pratiques CSS

Conventions d'écriture
  • Indentation : Utilisez 2 espaces (ou tabulations cohérentes)
  • Organisation : Groupez les propriétés logiquement (positionnement, box model, typographie, etc.)
  • Nommage : Utilisez des noms sémantiques (.article-header plutôt que .red-box)
/* Bonne pratique : organisation et nommage */
.article-card {
  /* Positionnement */
  position: relative;
  float: left;

  /* Box model */
  width: 300px;
  margin: 15px;
  padding: 20px;

  /* Typographie */
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;

  /* Styles visuels */
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
À éviter
  • !important : Sauf cas très spécifiques, cela rend le débogage difficile
  • Sélecteurs trop génériques : div { ... } peut avoir des effets indésirables
  • Duplication : Utilisez des classes pour réutiliser les styles
  • Unités absolues : Préférez rem et em à px pour une meilleure accessibilité

Organisation des fichiers CSS

Pour des projets importants, structurez vos fichiers CSS :

css/
├── base/ # Styles de base (reset, typographie)
│ ├── _reset.css
│ ├── _typography.css
│ └── _base.css
├── components/ # Composants UI
│ ├── _buttons.css
│ ├── _cards.css
│ └── _navbar.css
├── layout/ # Mise en page
│ ├── _header.css
│ ├── _footer.css
│ └── _grid.css
├── pages/ # Styles spécifiques aux pages
│ ├── _home.css
│ └── _contact.css
├── themes/ # Thèmes (optionnel)
│ ├── _dark.css
│ └── _light.css
├── utils/ # Utilitaires
│ ├── _variables.css
│ └── _helpers.css
└── main.css # Fichier principal qui importe tout

5. Exercice pratique

Objectif : Créer une page HTML avec plusieurs éléments et les styliser en utilisant les trois méthodes d'intégration CSS.

Consignes :

  1. Créez un fichier exercice.html
  2. Ajoutez les éléments suivants :
    • Un titre <h1> avec style inline (couleur verte)
    • Un paragraphe <p> avec classe "introduction" stylisé en CSS interne
    • Une liste <ul> avec 3 éléments stylisés via un fichier CSS externe
  3. Créez un fichier styles.css pour les styles externes
  4. Ajoutez des commentaires pour expliquer chaque partie

Correction :

exercice.html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exercice CSS</title>
  <!-- CSS interne -->
  <style>
  .introduction {
    font-size: 1.1em;
    line-height: 1.8;
    color: #333;
    background-color: #f9f9f9;
    padding: 15px;
    border-left: 4px solid #3498db;
  }
  </style>
  <!-- CSS externe -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- CSS inline -->
  <h1 style="color: #27ae60;">Bienvenue dans l'exercice CSS</h1>

  <p class="introduction">
    Ce paragraphe est stylisé avec du CSS interne. La classe permet
    de réutiliser ce style sur d'autres éléments si nécessaire.
  </p>

  <ul class="feature-list">
    <li>Premier élément de liste</li>
    <li>Deuxième élément de liste</li>
    <li>Troisième élément de liste</li>
  </ul>
</body>
</html>

styles.css :

/* Styles pour la liste - exercice CSS */
.feature-list {
  list-style-type: none;
  padding: 0;
}

.feature-list li {
  padding: 10px 15px;
  margin-bottom: 8px;
  background-color: #e8f4f8;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.feature-list li:hover {
  background-color: #d0e3f0;
}

6. À retenir

  • CSS permet de séparer la présentation du contenu (HTML) pour une meilleure maintenance.
  • Trois méthodes d'intégration :
    • Inline (attribut style) - à utiliser avec parcimonie
    • Interne (balise <style>) - pour petites pages ou tests
    • Externe (fichier .css) - méthode recommandée pour les projets
  • Une règle CSS se compose d'un sélecteur et de propriétés/valeurs.
  • Organisez votre code CSS avec des commentaires et une structure logique.
  • Nommez vos classes de manière sémantique pour une meilleure compréhension.

Prochaines étapes

Dans le chapitre suivant, nous approfondirons les sélecteurs CSS pour cibler précisément les éléments à styliser.

Sommaire du Cours Chapitre 2 : Sélecteurs CSS