Où écrit-on le CSS ?
Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :
Je vais vous présenter ces trois méthodes mais sachez d'ores et déjà que la première… est la meilleure.
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; } |
Pour activer la coloration du code dans Notepad++, passez par les menus Langage > C > CSS.
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.
Fichiers HTML et CSS dans Notepad++
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.
Fichiers HTML et CSS dans l'explorateur de fichiers
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 !
Le texte est écrit en bleu
Il est inutile d'ouvrir directement le fichier style.css dans le navigateur. Il faut ouvrir le fichier page.html (il fera automatiquement appel au fichier style.css).
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.
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).
Le premier paragraphe est écrit en bleu
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 web-masters… 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.
Le code CSS est répété dans chaque fichier HTML
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.
Le code CSS est donné une fois pour toutes dans un fichier CSS
Créé avec HelpNDoc Personal Edition: Produire des livres EPub gratuitement