Où mettre du CSS ?
Source : http://www.siteduzero.com/
tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1
Ce site m’a permise de me familiariser avec le CSS fort utile pour améliorer tous les types de blogs et notamment les blogs sur notre hébergeur préféré : over-blog. N’hésitez pas en serez satisfait.
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 dans 3 endroits différents. Les voici, le premier étant le moyen le plus recommandé : Dans un fichier .css :
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++ :
Si vous voulez voir comment je procède dans une vidéo, cliquez sur le lien ci-dessous :
tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1 Ce site m’a permise de me familiariser avec le CSS fort utile pour améliorer tous les types de blogs et notamment les blogs sur notre hébergeur préféré : over-blog. N’hésitez pas en serez satisfait. 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". Dans un fichier .css :
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 dans 3 endroits différents. Les voici, le premier étant le moyen le plus recommandé :
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++ :
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
Il faudra ajouter une ligne dans votre fichier .html entre les balises <head> </head> 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 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, mais je vous recommande de le mettre dans un sous-dossier "styles/" par exemple.
Directement dans le header du fichier XHTML :
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 :
ç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
Résumons 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
Suite de ce cours sur l’excellent site de programmation
commenter cet article …
