Team-Masters.com
Que du Gratuit pour Webmasters
Incorporer une feuille de style dans du HTML
Comment incorporer les styles dans le HTML ?
Quand un navigateur « lit » une feuille de style, il va alors rendre la page web en fonction de ce que lui a indiqué le code du CSS. Pour que les feuilles de style puissent avoir une influence sur la présentation, votre navigateur doit en connaître l’existence. Il y a trois façons d’incorporer des styles à vos documents HTML.
1. La feuille de style externe
La feuille de style externe est idéale lorsque les styles que vous avez défini doivent s’appliquer à plusieurs pages de votre site, sinon à son ensemble. Avec une feuille de style externe, vous pouvez changer le look de votre site entier uniquement en changeant le code d’un fichier (celui de la feuille de style). Chaque page de votre site doit alors faire référence à la feuille de style. Cela se fait en utilisant la balise <link> à insérer dans l’entête de votre page, soit entre les balises <head> et </head> :
<head>
<link rel="stylesheet" type="text/css" href="monstyle.css" />
</head>Le href fait ici référence à ma feuille de style ’monstyle’. L’adresse de la feuille de style peut, comme pour les liens en HTML être relative ou absolue. Une feuille de style externe peut être créée dans n’importe quel éditeur de texte. Le fichier ne doit pas contenir de tags HTML et son extension doit être « .css ». Par exemple, voici le code d’une feuille simple nommée ma_feuille.css :
hr {color: red}
p {margin-left: 10px}
body {background-image: url("images/fond12.gif")}2. La Feuille de style Interne ou méthode imbriquée
Une feuille de style interne doit être utilisée quand un seul document doit adopter un style unique. Dans le cas de la méthode imbriquée, les styles sont tous définis dans l’en-tête du document HTML : il suffit d’en faire la déclaration entre les balises <head> et </head> de votre page en utilisant le tag <style> comme ceci :
<head>
<style type="text/css">
hr {color: lightgreen}
p {font-family: helvetica}
body {background-image: url("images/back40.gif")}
</style>
</head>Le navigateur de l’internaute va alors lire les définitions de style et formater la page Web en fonction de celles-ci.
Note : Les navigateurs ignorent les balises qu’ils ne connaissent pas. Cela veut dire que les anciens navigateurs qui ne supportent pas la balise <style> vont l’ignorer, mais pas son contenu : le contenu du code compris entre les balises <style> et </style> va alors apparaître sur la page Web. Il est possible de contourner ceci en encadrant le code de la feuille de style de commentaires HTML. Le code précédent devient :
<head>
<style type="text/css">
<!--
hr {color: lightgreen}
p {font-family: helvetica}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>3. Le style intraligne
Cette dernière option mélange style et contenu, et on perd de ce fait les avantages d’une feuille de style traditionnelle. Cette méthode est donc à utiliser le moins possible. La définition du style se fait alors dans le corps de la page (entre <body> et </body>) et sur l’élément HTML sur lequel on veut agir. Par exemple :
<p style="color: blue; font-family: arial">
Un paragraphe en bleu
</p>22 décembre 2004
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
