Comment Insérer une Feuille de Style
Il y a trois manières d'insérer une feuille de style, externe, interne et en ligne.
Feuille de style externe :
Une feuille de style externe est idéale quand le style est appliqué à plusieurs pages. Avec une feuille de style externe, vous pouvez changer l'apparence d'un site Web entier en changeant un fichier. Chaque page doit être lier avec la feuille de style utilisant la balise <link>. La balise <link> va à l'intérieur de la balise <head> :
<head>
<link rel="stylesheet" type="text/css" href="monstyle.css" />
</head>
Le navigateur lira les définitions de style du fichier monstyle.css et formatera le document selon les information du fichier.
Une feuille de style externe peut être écrite avec n'importe quel logiciel de texte. Le fichier ne devrait pas contenir d'étiquettes HTML. Votre feuille de style devrait être enregistrée avec l'extension .css.
Important : Ne laissez pas d'espaces entre la valeur de la propriété et les unités! Si vous utilisez "margin-left: 20 px" au lieu "margin-left: 20px" cela fonctionnera correctement dans IE6 mais cela ne fonctionnera pas dans Mozilla/Firefox ou Netscape.
Feuille de style interne :
Une feuille de style interne devrait être utilisée quand un document seul a un style unique. Vous définissez des styles internes dans la section principale (<head>) en utilisant la balise <style>, comme ceci :
<head>
<style type="text/css">
hr {color: green}
p {margin-left: 20px}
body {background-image: url("images/imagedefond.gif")}
</style>
</head>
Le navigateur lira maintenant les définitions de style et formatera le document selon celle-ci.
Important : les navigateur normalement ignore les balises inconnues. Cela signifie qu'un vieux navigateur qui ne soutient pas les styles, ignorera la balise < style>, mais le contenu de la balise <style> sera affiché sur la page. Il est possible d'empêcher un vieux navigateur de montrer le contenu en le cachant dans l'élément de commentaire de HTML :
<head>
<style type="text/css">
<!--
hr {color: green}
p {margin-left: 20px}
body {background-image: url("images/imagedefond.gif")}
-->
</style>
</head>
Feuille de style en ligne :
Un style intégré perd beaucoup des avantages de la feuilles de style en mélangeant le contenu avec la présentation. Utilisez cette méthode avec modération, comme quand un style doit être appliqué à une occurrence unique d'un élément.
Pour utiliser des styles intégrés vous utilisez l'attribut de style dans la balise appropriée. L'attribut de style peut contenir n'importe quelle propriété CSS. L'exemple montre comment changer la couleur et la marge gauche d'un paragraphe :
<p style="color: sienna; margin-left: 20px">
Ceci est un paragraphe
</p>
