zzatman
15/12/2008, 00h49
Où mettre du CSS ?
Vous vous souvenez ce que CSS veut dire ? Je vous en ai rapidement parlé dans le premier chapitre du cours. Cela signifie : "Cascading Style Sheets", ce qui peut se traduire en français par "Feuilles de style en cascade".
On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un fichier à part (à l'extension .css au lieu de .html). C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc... Croyez-moi, le CSS permet de faire une foule de choses !
On peut écrire du code CSS à 3 endroits différents, selon ce qu'on préfère :
Méthode A : dans un fichier .css (le moyen le plus recommandé)
Méthode B : dans l'en-tête du fichier XHTML
Méthode C : dans les balises
Voici une description de chacune de ces techniques. Si vous ne devez en retenir qu'une, retenez la première :
Dans un fichier .css (Méthode A) :
Comme je viens de vous le dire, le plus souvent on écrit du code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers XHTML qui ont l'extension .html).
C'est la méthode la plus pratique que je vais utiliser quasiment tout le temps dans la suite du cours. Parmi les nombreux avantages que cette solution apporte, il y a la possibilité de pouvoir proposer facilement plusieurs designs différents à vos visiteurs.
Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.
Voici un exemple de fichier CSS sous Notepad++ :
http://www.siteduzero.com/uploads/fr/files/5001_6000/5547.jpg
Si vous voulez voir comment je procède dans une vidéo, cliquez sur le lien ci-dessous :
Enregistrer un CSS sous Notepad++ (170 Ko)
Ce que vous voyez est un aperçu du code CSS que nous allons écrire. Ne vous préoccupez pas de savoir ce que ça veut dire pour le moment, je vais vous expliquer ça un peu plus loin
Maintenant, retournez dans votre fichier XHTML. Il faut y ajouter une ligne entre les balises <head> </head> qui va permettre de "dire" au fichier XHTML quel fichier CSS il doit charger :
Code : HTML
1
2
3
4
5
6
7
8
9
10
11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<p>Cette page comporte une feuille de style externe. C'est la meilleure méthode à utiliser quand on fait du CSS.</p>
</body>
</html>
La balise <link /> comporte plusieurs attributs. Vous pouvez en modifier deux d'entre eux pour le moment :
title : c'est le nom que vous donnez à votre feuille de style (mettez ce que vous voulez)
href : c'est l'emplacement où se trouve votre feuille de style sous forme de lien relatif. Dans cet exemple le CSS se trouve dans le même dossier.
Directement dans le header du fichier XHTML (Méthode B) :
Il est aussi possible de taper du CSS directement à l'intérieur même du fichier XHTML, entre les balises <head> </head>. Vous devrez y mettre une balise <style> </style> à l'intérieur, comme ceci :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple de CSS dans le header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Vous taperez votre code CSS ici */
</style>
</head>
<body>
<p>Cette page comporte du CSS directement dans le header.</p>
</body>
</html>
Cette seconde méthode ressemble beaucoup à la première. Cependant, la première solution (utiliser un .css externe) est quand même bien plus pratique, car elle vous permettra de faire changer le design du site en un clin d'oeil. De plus, le fichier ne sera téléchargé qu'une seule fois pour toutes les pages de votre site, ce qui allègera la taille des fichiers .html et rendra donc votre site plus rapide !
Au risque de me répéter (faut bien que ça rentre :p), je vous recommande donc d'utiliser un fichier .css externe (la première solution proposée) plutôt que de mettre directement le CSS dans le fichier XHTML
La méthode "à l'arrache" dans les balises (Méthode C) :
ça c'est la troisième (et la moins recommandée) des méthodes. Elle consiste à ajouter un attribut style sur les balises pour leur appliquer un style particulier. Cet attribut fonctionne sur toutes les balises. Par exemple sur un titre :
Code : HTML
<h1 style="/* Votre style pour cette balise ici */">Titre</h1>
Cette méthode a tous les défauts : non seulement le CSS sera peu lisible à l'intérieur des balises, mais en plus ça ne nous permet pas de profiter de tous les avantages du CSS, comme la possibilité de changer la couleur de tous les titres du site en un clic.
Bref, je vous ai montré la méthode seulement pour que vous ne soyez pas perdus si vous la voyez.
Voilà, vous venez de voir quelles sont les 3 méthodes que l'on peut utiliser pour insérer du CSS (de la meilleure à la pire).
L'idéal est donc d'utiliser une feuille de style externe (= mettre son CSS dans un fichier .css) et c'est cette méthode que je vais utiliser dans la suite du cours.
Résumé visuel
Je suppose ici que vous avez choisi la Méthode A que je vous ai conseillée. Jusqu'ici on travaillait sur un seul fichier, le .html. A partir de maintenant on va travailler sur 2 fichiers : un .css et toujours notre bon vieux .html.
Résumons donc les fichiers que nous devons avoir sous les yeux pour que ça soit clair pour tout le monde :
Dans le dossier de votre site, il doit y avoir au moins 2 fichiers : un .html et un .css.
http://www.siteduzero.com/uploads/fr/files/135001_136000/135978.png
Le fichier .html contient le code XHTML (qu'on a appris jusqu'ici) avec en particulier la ligne pour faire la liaison avec le fichier .css :
http://www.siteduzero.com/uploads/fr/files/135001_136000/135979.png
Le fichier .css contient du code CSS (que nous allons apprendre à partir de maintenant) :
http://www.siteduzero.com/uploads/fr/files/135001_136000/135980.png
Si vous voulez voir le résultat, il faut ouvrir le fichier .html comme avant (double-cliquez sur l'icône du fichier index.html dans l'explorateur). N'essayez pas d'ouvrir le .css : seul ce fichier ne sert à rien.
C'est le .html qui, lors de son ouverture, va charger le .css et appliquer les informations de style.
Bien, maintenant que cela est clair pour tout le monde (du moins j'espère ), intéressons-nous de plus près au fonctionnement du code CSS.
Vous vous souvenez ce que CSS veut dire ? Je vous en ai rapidement parlé dans le premier chapitre du cours. Cela signifie : "Cascading Style Sheets", ce qui peut se traduire en français par "Feuilles de style en cascade".
On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un fichier à part (à l'extension .css au lieu de .html). C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc... Croyez-moi, le CSS permet de faire une foule de choses !
On peut écrire du code CSS à 3 endroits différents, selon ce qu'on préfère :
Méthode A : dans un fichier .css (le moyen le plus recommandé)
Méthode B : dans l'en-tête du fichier XHTML
Méthode C : dans les balises
Voici une description de chacune de ces techniques. Si vous ne devez en retenir qu'une, retenez la première :
Dans un fichier .css (Méthode A) :
Comme je viens de vous le dire, le plus souvent on écrit du code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers XHTML qui ont l'extension .html).
C'est la méthode la plus pratique que je vais utiliser quasiment tout le temps dans la suite du cours. Parmi les nombreux avantages que cette solution apporte, il y a la possibilité de pouvoir proposer facilement plusieurs designs différents à vos visiteurs.
Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.
Voici un exemple de fichier CSS sous Notepad++ :
http://www.siteduzero.com/uploads/fr/files/5001_6000/5547.jpg
Si vous voulez voir comment je procède dans une vidéo, cliquez sur le lien ci-dessous :
Enregistrer un CSS sous Notepad++ (170 Ko)
Ce que vous voyez est un aperçu du code CSS que nous allons écrire. Ne vous préoccupez pas de savoir ce que ça veut dire pour le moment, je vais vous expliquer ça un peu plus loin
Maintenant, retournez dans votre fichier XHTML. Il faut y ajouter une ligne entre les balises <head> </head> qui va permettre de "dire" au fichier XHTML quel fichier CSS il doit charger :
Code : HTML
1
2
3
4
5
6
7
8
9
10
11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<p>Cette page comporte une feuille de style externe. C'est la meilleure méthode à utiliser quand on fait du CSS.</p>
</body>
</html>
La balise <link /> comporte plusieurs attributs. Vous pouvez en modifier deux d'entre eux pour le moment :
title : c'est le nom que vous donnez à votre feuille de style (mettez ce que vous voulez)
href : c'est l'emplacement où se trouve votre feuille de style sous forme de lien relatif. Dans cet exemple le CSS se trouve dans le même dossier.
Directement dans le header du fichier XHTML (Méthode B) :
Il est aussi possible de taper du CSS directement à l'intérieur même du fichier XHTML, entre les balises <head> </head>. Vous devrez y mettre une balise <style> </style> à l'intérieur, comme ceci :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple de CSS dans le header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Vous taperez votre code CSS ici */
</style>
</head>
<body>
<p>Cette page comporte du CSS directement dans le header.</p>
</body>
</html>
Cette seconde méthode ressemble beaucoup à la première. Cependant, la première solution (utiliser un .css externe) est quand même bien plus pratique, car elle vous permettra de faire changer le design du site en un clin d'oeil. De plus, le fichier ne sera téléchargé qu'une seule fois pour toutes les pages de votre site, ce qui allègera la taille des fichiers .html et rendra donc votre site plus rapide !
Au risque de me répéter (faut bien que ça rentre :p), je vous recommande donc d'utiliser un fichier .css externe (la première solution proposée) plutôt que de mettre directement le CSS dans le fichier XHTML
La méthode "à l'arrache" dans les balises (Méthode C) :
ça c'est la troisième (et la moins recommandée) des méthodes. Elle consiste à ajouter un attribut style sur les balises pour leur appliquer un style particulier. Cet attribut fonctionne sur toutes les balises. Par exemple sur un titre :
Code : HTML
<h1 style="/* Votre style pour cette balise ici */">Titre</h1>
Cette méthode a tous les défauts : non seulement le CSS sera peu lisible à l'intérieur des balises, mais en plus ça ne nous permet pas de profiter de tous les avantages du CSS, comme la possibilité de changer la couleur de tous les titres du site en un clic.
Bref, je vous ai montré la méthode seulement pour que vous ne soyez pas perdus si vous la voyez.
Voilà, vous venez de voir quelles sont les 3 méthodes que l'on peut utiliser pour insérer du CSS (de la meilleure à la pire).
L'idéal est donc d'utiliser une feuille de style externe (= mettre son CSS dans un fichier .css) et c'est cette méthode que je vais utiliser dans la suite du cours.
Résumé visuel
Je suppose ici que vous avez choisi la Méthode A que je vous ai conseillée. Jusqu'ici on travaillait sur un seul fichier, le .html. A partir de maintenant on va travailler sur 2 fichiers : un .css et toujours notre bon vieux .html.
Résumons donc les fichiers que nous devons avoir sous les yeux pour que ça soit clair pour tout le monde :
Dans le dossier de votre site, il doit y avoir au moins 2 fichiers : un .html et un .css.
http://www.siteduzero.com/uploads/fr/files/135001_136000/135978.png
Le fichier .html contient le code XHTML (qu'on a appris jusqu'ici) avec en particulier la ligne pour faire la liaison avec le fichier .css :
http://www.siteduzero.com/uploads/fr/files/135001_136000/135979.png
Le fichier .css contient du code CSS (que nous allons apprendre à partir de maintenant) :
http://www.siteduzero.com/uploads/fr/files/135001_136000/135980.png
Si vous voulez voir le résultat, il faut ouvrir le fichier .html comme avant (double-cliquez sur l'icône du fichier index.html dans l'explorateur). N'essayez pas d'ouvrir le .css : seul ce fichier ne sert à rien.
C'est le .html qui, lors de son ouverture, va charger le .css et appliquer les informations de style.
Bien, maintenant que cela est clair pour tout le monde (du moins j'espère ), intéressons-nous de plus près au fonctionnement du code CSS.