Formation 36

Où placer le code CSS ?

CSS signifie "Cascading Style Sheets", ce qui peut se traduire par "Feuilles de style en cascade".

On parle de "Feuille de style" externe car, en général, le code CSS est placé dans un second fichier, d'extension .css. Ce fichier va contenir des règles CSS qui vont modifier l'apparence graphique de votre site.

 

Bien que la séparation du HTML et du CSS dans 2 fichiers soient la solution optimale, il est possible de placer du code CSS directement dans le fichier HTML. Voici un descriptif des 3 manières de procéder.

Directement dans les balises que l'on souhaite mettre en forme

Cette méthode, très simple, permet d'ajouter des règles de mise en forme CSS directement dans les balises HTML que l'on souhaite modifier. Par exemple :

<p style=''color:red;'' >Voici un paragraphe avec une mise en forme spéciale.</p>

 

Ce qui donne à l'écran :

Voici un paragraphe avec une mise en forme spéciale.

 

Imaginez maintenant que vous souhaitiez écrire tous les titres <h1> en rouge, sur toutes les pages qui composent votre site internet... Vous allez devoir ouvrir tous les fichiers HTML pour les modifier un à un, et modifier toutes les balises <h1> de votre site !

 

Et si quelques temps plus tard, vous décidez d'écrire tous les titres en bleu ? Tout est à refaire !

 

Bilan : cette méthode est très simple à comprendre, mais présente le gros désavantage d'être difficilement applicable dès que votre site compte quelques dizaines de pages.

Toutefois, cette méthode reste valable dans un cas : pour agir sur une page très précise de votre site, car vous n'avez qu'à ajouter le code qu'une fois.

Entre les balises <head> et </head>

Cette seconde méthode est plus évoluée. Les règles CSS sont regroupées dans l'entête de la page HTML :

<head>
<title>Titre de ma page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Vous taperez votre code CSS ici */
h1 { color: blue; }
p { font-size:16px; }

</style>

</head>

 

Par exemple, le code précédent impose que tous les titres <h1> de la page soient écrits en bleu, et que tous les paragraphes <p> soient écrits en taille 16px.

 

Chaque règle CSS s'applique à toutes les balises de la page, contrairement à la méthode du paragraphe précédent pour laquelle il fallait recopier le même code CSS dans toutes les balises concernées.

 

Toutefois, si votre site compte 100 pages, vous devrez créer des règles CSS dans les entêtes <head> </head> de chacune des pages. On retombe alors dans le même cas que précédemment : si un jour vous décidez de modifier la couleur des titres <h1> sur votre site, vous devrez modifier une à une toutes les pages de votre site.

 

Cette solution est donc valable pour de petits sites, où si vous voulez agir sur la présentation d'une page en particulier.

Dans un fichier CSS externe, d'extension .css (méthode conseillée)

Bien souvent, toutes les pages d'un site internet sont présentées de la même manière, afin que l'aspect du site soit homogène.

Le principe retenu par les créateurs des langages XHTML et CSS est de séparer le fond et la forme dans 2 fichiers :

  • le code HTML est placé dans un fichier d'extension .html

  • le code CSS est placé dans un second fichier portant l'extension .css (contrairement aux fichiers XHTML qui ont une extension .html)


Pour que les règles CSS notées dans le fichier d'extension .css s'appliquent à une page HTML, il faut ajouter une ligne de code dans l'entête du fichier d'extension .html :

<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" href="dossier/design.css" />
   </head>
   <body>
       <p>Contenu de la page...</p>
   </body>
</html>

 

Cette ligne de code sert à indiquer le chemin d'accès au fichier CSS qui contient les règles de mise en page à appliquer.


La balise <link /> comporte plusieurs attributs :

  • href : l'emplacement de votre feuille de style CSS externe

  • media : indique que cette mise en page s'appliquera sur à l'écran (il est possible de définir une mise en page différente pour l'impression, ou pour l'affichage sur un téléphone par exemple)

 

Comme, en général, toutes les pages d'un site internet sont présentées de la même manière, il suffira de créer un seul fichier CSS. Et toutes les pages XHTML du site internet seront liées à cette unique feuille de style grâce à la balise <link>, placée entre les balises <head>.

 

Lorsque vous modifierez l'une des règles CSS dans le fichier CSS, le design de tout le site sera mis à jour instantanément. Le gain de temps est impressionnant !

 

Votre site sera non seulement mieux présenté (puisque toutes les pages auront une présentation semblable), mais en plus les modifications de l'apparence du site seront faciles et instantanées.


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 nous allons utiliser dans la suite du cours.



Pour plus d'informations, vous pouvez nous contacter par mail.

 

Tutos et cours en ligne

Ergonomie et accessibilit�R�f�rencementHTML / CSS