Skip to main content

Chapitre 2 : Installation et premier projet css

Mise en place de l'environnement de développement et création du premier projet css.

Le CSS (Cascading Style Sheets) ne s'installe pas comme un logiciel classique. C'est un langage interprété directement par le navigateur web. Cependant, pour coder efficacement et professionnellement, vous avez besoin d'un ensemble d'outils qui transformeront votre expérience de développement, passant d'une simple édition de texte à un véritable flux de travail productif.

L'environnement de développement​

1. Quoi​

L'environnement de développement est l'ensemble des outils logiciels utilisés pour écrire, tester et déboguer votre code. Pour le CSS, il se compose principalement de deux éléments : un Éditeur de Code (ou IDE) et un Navigateur Web moderne.

L'éditeur de code est l'endroit où vous rédigez vos instructions. Le navigateur, quant à lui, est l'outil qui "lit" ces instructions et les traduit visuellement à l'écran.

2. Pourquoi​

Utiliser un simple bloc-notes (comme Notepad ou TextEdit) est possible, mais extrêmement inefficace. Un éditeur moderne apporte :

  • La coloration syntaxique : permet de distinguer visuellement les sélecteurs, les propriétés et les valeurs.
  • L'auto-complétion (IntelliSense) : suggère les propriétés CSS existantes, évitant ainsi les fautes de frappe.
  • La gestion de projet : permet de visualiser l'arborescence de vos dossiers et fichiers.
  • L'intégration d'outils : comme le rafraîchissement automatique de la page lors d'une modification.

3. Comment​

A. Choix de l'éditeur : Visual Studio Code (VS Code)​

VS Code est actuellement le standard de l'industrie. Il est gratuit, open-source et dispose d'un écosystème d'extensions immense.

Installation recommandée :

  1. Téléchargez VS Code sur le site officiel.
  2. Installez l'extension Live Server (par Ritwick Dey). Cette extension crée un serveur local qui recharge automatiquement votre page dès que vous enregistrez votre fichier CSS ou HTML.

B. Le Navigateur et les DevTools​

Tous les navigateurs modernes (Chrome, Firefox, Edge, Safari) possèdent des Outils de Développement (DevTools). Ils sont accessibles via la touche F12 ou un clic droit $\rightarrow$ Inspecter.

Les DevTools vous permettent de :

  • Modifier le CSS en temps réel sans toucher au fichier source.
  • Analyser le "Box Model" (marges, bordures, padding).
  • Tester la réactivité (responsive design) sur différents formats d'écran.

C. Limitations​

L'environnement local est parfait pour le développement, mais gardez à l'esprit que :

  • Le rendu varie : Un site peut paraître légèrement différent entre Chrome et Firefox (bien que les standards soient aujourd'hui très alignés).
  • Le cache du navigateur : Parfois, le navigateur garde en mémoire une ancienne version de votre fichier CSS. Un "Hard Refresh" (Ctrl + F5 ou Cmd + Shift + R) est souvent nécessaire.

4. Zone de Danger​

❌ Erreur commune : Ouvrir le fichier HTML en double-cliquant dessus dans l'explorateur de fichiers (protocole file://). Cela peut causer des problèmes de chemin d'accès et ne permet pas l'utilisation de certaines fonctionnalités web avancées.

✅ Bonne pratique : Utiliser un serveur local (comme l'extension Live Server) pour servir vos fichiers via le protocole http://localhost.

Intégration du CSS dans le HTML​

1. Quoi​

Il existe trois manières d'appliquer du style CSS à un document HTML. On parle de CSS Inline (en ligne), CSS Internal (interne) et CSS External (externe).

2. Pourquoi​

Le choix de la méthode d'intégration impacte directement la maintenabilité et la performance de votre site. Dans un projet professionnel, on cherche à séparer le fond (le HTML : structure et contenu) de la forme (le CSS : design et mise en page). C'est le principe de la "séparation des préoccupations" (Separation of Concerns).

3. Comment​

A. Le CSS Inline (En ligne)​

Le style est écrit directement dans l'attribut style de la balise HTML.


<h1 style="color: blue; font-size: 20px;">Bonjour le monde</h1>

B. Le CSS Internal (Interne)​

Le style est placé dans une balise <style> située à l'intérieur de la section <head> du document HTML.

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Ce style ne s'applique qu'à cette page précise */
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: navy;
        }
    </style>
</head>
<body>
    <h1>Titre de ma page</h1>
</body>
</html>

C. Le CSS External (Externe) - La norme professionnelle​

Le style est écrit dans un fichier séparé avec l'extension .css, puis lié au document HTML via la balise <link>.

Fichier style.css :

/* Fichier dédié uniquement au style */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.main-title {
    color: #2c3e50;
    text-align: center;
}

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Premier Projet CSS</title>
    
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1 class="main-title">Bienvenue sur mon site</h1>
</body>
</html>

4. Zone de Danger​

❌ Erreur commune : Placer la balise <link> à l'intérieur du <body>. Cela peut provoquer un flash de contenu non stylisé (FOUC - Flash of Unstyled Content) où l'utilisateur voit la page brute pendant une fraction de seconde avant que le CSS ne s'applique.

✅ Bonne pratique : Toujours placer vos liens de feuilles de style dans le <head>. Le navigateur traite le <head> en entier avant de commencer à afficher le <body>. En plaçant le <link> ici, le fichier CSS est téléchargé et analysé avant le premier rendu de la page : l'utilisateur ne voit donc jamais la version non stylisée, ce qui élimine le FOUC.

Flux de rendu HTML/CSS​

Structure d'un premier projet CSS​

1. Quoi​

La structure d'un projet désigne l'organisation des dossiers et des fichiers sur votre disque dur. Une structure propre permet de s'y retrouver rapidement, même quand le projet grandit.

2. Pourquoi​

Si vous placez toutes vos images, vos pages HTML et vos fichiers CSS dans un seul dossier racine, vous obtiendrez rapidement un "fouillis" numérique. En production, les fichiers sont organisés par type pour faciliter le déploiement et la gestion des chemins d'accès.

3. Comment​

Voici l'architecture recommandée pour un projet débutant :

mon-premier-projet/
├── index.html          # Page d'accueil (point d'entrée)
├── about.html          # Page à propos
├── css/                # Dossier regroupant tous les styles
│   └── style.css       # Feuille de style principale
└── assets/             # Dossier pour les ressources statiques
    ├── images/         # Photos, logos, icônes
    │   └── logo.png
    └── fonts/          # Polices de caractères personnalisées

Attention au chemin d'accès (Path) : Lorsque vos fichiers sont dans des dossiers, vous devez adapter le lien dans le HTML. Si le fichier index.html est à la racine et le CSS dans le dossier css/, le lien devient : <link rel="stylesheet" href="css/style.css" />

4. Zone de Danger​

❌ Erreur commune : Utiliser des chemins absolus vers son propre ordinateur (ex: C:\Users\Moi\Documents\projet\style.css). Votre site ne fonctionnera jamais sur l'ordinateur de quelqu'un d'autre ou sur un serveur.

✅ Bonne pratique : Utiliser des chemins relatifs. Un chemin relatif décrit l'emplacement du fichier par rapport au fichier actuel (ex: css/style.css signifie "va dans le dossier css, puis prends le fichier style.css").

Questions clés​

1. Pourquoi utiliser un fichier CSS externe plutôt que du CSS inline ?

Découvrir la réponse

Le CSS externe permet de séparer la structure (HTML) du design (CSS). Cela facilite la maintenance : si vous voulez changer la couleur de tous vos titres sur 50 pages, vous ne modifiez qu'une seule ligne dans le fichier .css au lieu de modifier 50 fichiers HTML. De plus, le navigateur met en cache le fichier CSS, ce qui accélère le chargement des pages suivantes.

2. À quoi servent les outils de développement (DevTools) du navigateur ?

Découvrir la réponse

Ils permettent d'inspecter le code source d'une page en temps réel, de tester des modifications CSS instantanément sans recharger la page, et de diagnostiquer des problèmes de mise en page (comme un élément qui dépasse de l'écran) en visualisant les dimensions exactes des boîtes.

3. Quelle est la différence entre un chemin absolu et un chemin relatif ?

Découvrir la réponse

Un chemin absolu pointe vers une adresse unique et fixe (ex: https://google.com/logo.png ou C:/mon-site/style.css). Un chemin relatif pointe vers un fichier en fonction de la position du fichier actuel (ex: images/photo.jpg). Pour le développement web, on utilise presque exclusivement les chemins relatifs pour garantir que le projet reste fonctionnel quel que soit l'endroit où il est hébergé.

4. Qu'est-ce que l'extension Live Server et pourquoi est-elle utile ?

Découvrir la réponse

C'est une extension pour VS Code qui lance un serveur local. Son utilité principale est le "Hot Reload" : dès que vous sauvegardez un fichier, la page du navigateur se rafraîchit automatiquement. Cela évite de devoir cliquer manuellement sur le bouton "Actualiser" après chaque modification de couleur ou de police.

Mise en pratique​

Exercice 1 : Reproduction guidée​

Objectif : Créer la structure de base d'un projet et lier un fichier CSS.

  1. Créez un dossier nommé mon-site.
  2. À l'intérieur, créez un fichier index.html et un dossier css.
  3. Dans le dossier css, créez un fichier style.css.
  4. Dans index.html, créez une structure HTML minimale avec un titre <h1> disant "Hello CSS".
  5. Liez le fichier style.css correctement.
  6. Dans style.css, changez la couleur du titre en rouge.
Découvrir la solution commentée

Structure : mon-site/index.html mon-site/css/style.css

index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exercice 1</title>
    
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <h1>Hello CSS</h1>
</body>
</html>

style.css :

h1 {
    color: red; /* Applique la couleur rouge au sélecteur h1 */
}

Exercice 2 : Adaptation​

Objectif : Manipuler les différentes méthodes d'intégration et comprendre la priorité.

  1. Reprenez le projet précédent.
  2. Dans le fichier style.css, donnez au titre <h1> une couleur bleue.
  3. Dans le fichier index.html, ajoutez une balise <style> dans le <head> qui donne au titre <h1> une couleur verte.
  4. Enfin, ajoutez un attribut style directement sur la balise <h1> pour lui donner une couleur orange.
  5. Observez quelle couleur s'affiche et expliquez pourquoi.
Découvrir la solution commentée

Code HTML modifié :

<head>
    <link rel="stylesheet" href="css/style.css" />
    <style>
        h1 { color: green; }
    </style>
</head>
<body>
    <h1 style="color: orange;">Titre Test</h1>
</body>

Résultat : Le titre s'affichera en orange.

Explication : C'est le principe de la cascade et de la spécificité. Le CSS inline (attribut style) a la priorité la plus élevée, suivi du CSS interne, puis du CSS externe. Plus le sélecteur est "proche" de l'élément, plus il est prioritaire.