Où écrit-on le CSS ?
Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :
dans un fichier
.css(méthode la plus recommandée) ;dans l'en-tête
<head>du fichier HTML ;directement dans les balises du fichier HTML via un attribut
style(méthode la moins recommandée).
Je vais vous présenter ces trois méthodes mais sachez d'ores et déjà que la première… est la meilleure.
Dans un fichier .css (recommandé)
Comme je viens de vous le dire, on écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier. J'utiliserai cette technique dans toute la suite de ce cours.
Commençons à pratiquer dès maintenant ! Nous allons partir du fichier HTML suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme.
Enregistrez ce fichier sous le nom que vous voulez (par exemple page.html). Pour le moment, rien d'extraordinaire à part la nouvelle balise que nous avons ajoutée.
Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Notepad++) et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout à l'heure ce qu'il veut dire) :
p
{
color: blue;
}Enregistrez le fichier en lui donnant un nom qui se termine par .css, comme style.css. Placez ce fichier .css dans le même dossier que votre fichier .html.
Dans Notepad++, vous devriez observer quelque chose de similaire à la figure suivante.
Dans votre explorateur de fichiers, vous devriez les voir apparaître côte à côte. D'un côté le .html, de l'autre le .css, comme à la figure suivante.
Ouvrez maintenant votre fichier page.html dans votre navigateur pour le tester, comme vous le faites d'habitude. Regardez, c'est magique : vos paragraphes sont écrits en bleu, comme dans la figure suivante !
Dans l'en-tête <head> du fichier HTML
Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head>.
Voici comment on peut obtenir exactement le même résultat avec un seul fichier .html qui contient le code CSS (lignes 5 à 10) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
color: blue;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>Testez, vous verrez que le résultat est le même.
Directement dans les balises (non recommandé)
Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>Cette fois, seul le texte du premier paragraphe (ligne 11), dont la balise contient le code CSS, sera coloré en bleu (figure suivante).
Quelle méthode choisir ?
Je trouve que la première méthode que tu recommandes est plus compliquée que les deux autres ! Pourquoi nous conseilles-tu de créer deux fichiers, j'étais bien, moi, avec juste un fichier .html !
Je vous recommande fortement de prendre l'habitude de travailler avec la première méthode parce que c'est celle utilisée par la majorité des webmasters… Pourquoi ?
Pour le moment, vous faites vos tests sur un seul fichier HTML. Cependant, votre site sera plus tard constitué de plusieurs pages HTML, on est d'accord ?
Imaginez : si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML de votre site ! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un, comme le montre la figure suivante.
Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire cette instruction qu'une seule fois pour tout votre site, comme le montre la figure suivante.
