Où écrire le CSS ?

1. HTML = structure, CSS = apparence

En développement web, on essaie de séparer :

HTML → le contenu et la structure de la page (titres, paragraphes, images…)
CSS → l’apparence (couleurs, tailles, bordures, positionnement…)

On peut écrire le CSS à plusieurs endroits, mais ils ne sont pas tous aussi pratiques.

2. Méthode 1 : dans la balise (CSS “inline”)

On peut écrire le CSS directement dans la balise HTML, avec l’attribut style.

<p style="color: red; font-size: 20px;">
    Ce texte est rouge et en 20px.
</p>

Avantages :

rapide pour tester une idée,
utile pour un essai ponctuel.

Inconvénients (importants) :

le HTML et le CSS sont mélangés, le code devient vite difficile à lire,
pour changer un style, il faut modifier toutes les balises une par une,
impossible de bien organiser ton design.

👉 On évite cette méthode pour un vrai site. Elle sert surtout à faire des tests rapides.

3. Méthode 2 : dans la balise `<style>` du HTML

On peut aussi écrire le CSS dans un bloc <style>, dans la partie <head> de la page HTML.

<head>
    <meta charset="UTF-8">
    <title>Ma page</title>

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

        h1 {
            text-align: center;
        }
    </style>
</head>

Avantages :

tout le CSS est regroupé au même endroit pour la page,
plus propre que le CSS dans les balises.

Inconvénients :

le CSS ne concerne qu’une seule page,
si tu as 10 pages, tu dois copier-coller le même CSS partout,
si tu veux changer une couleur, tu dois modifier chaque fichier.

👉 Cette méthode est encore acceptable pour un petit exercice ou une seule page. Mais pour un site entier, on préfère mieux organiser.

4. Méthode 3 : dans un fichier CSS à part (méthode recommandée)

C’est la méthode la plus utilisée : on met tout le CSS dans un fichier séparé, par exemple :

style_dev.css

Dans ce fichier, il n’y a que du CSS :

/* fichier style_dev.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
}

h1 {
    text-align: center;
    color: darkblue;
}

p {
    font-size: 16px;
}

Ensuite, on **relie** ce fichier CSS à la page HTML grâce à la balise <link> dans le <head>.

<head>
    <meta charset="UTF-8">
    <title>Ma page</title>

    <link rel="stylesheet" href="style_dev.css">
</head>

Explication de la balise <link> :

rel="stylesheet" : indique que le fichier est une feuille de style CSS,
href="style_dev.css" : chemin vers le fichier CSS (dans le même dossier que la page).

Avantages (très importants) :

un seul fichier CSS peut être utilisé par toutes les pages du site,
pour changer une couleur, une police, un fond… on modifie juste le fichier CSS,
le HTML reste concentré sur le contenu, le CSS sur l’apparence → code plus propre, plus pro.

👉 C’est cette méthode que l’on utilisera pour vos projets de site web.

5. Résumé à retenir

CSS dans les balises → possible, mais vite sale (à éviter)
CSS dans <style> du <head> → ok pour une page simple
CSS dans un fichier .css + <link> → méthode recommandée pour un vrai site

Pour ton projet, on fera :

<link rel="stylesheet" href="style_dev.css">