Comment créer une feuille de style CSS

Comment insérer une feuille de style

Quand un navigateur lit une feuille de style, il la utilise pour formatter le document HTML. Il y a trois méthodes pour insérer une feuille de style :

Feuille de style externe

Quand les styles doivent être appliqués à de nombreux pages, les feuilles de style externes sont l'option idéale. Dans le cas des feuilles de style externes, vous pouvez changer l'apparence de tout le site en changeant un seul fichier. Chaque page utilise la balise <link> pour se connecter à la feuille de style.<link> est dans l'en-tête du document :

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Le navigateur lit les déclarations de style à partir du fichier mystyle.css et les utilise pour formatter le document.

Les feuilles de style externes peuvent être éditées dans n'importe quel éditeur de texte. Le fichier ne doit pas contenir d'attributs html. Les feuilles de style doivent être enregistrées avec une extension .css. Voici un exemple de fichier de feuille de style :

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Ne laissez pas d'espace entre la valeur de l'attribut et l'unité. Si vous utilisez "margin-left: 20 px" plutôt que "margin-left: 20px", cela ne fonctionne que dans IE 6, mais pas dans Mozilla/Firefox ou Netscape.

Feuille de style interne

Quand un document nécessite des styles spéciaux, il faut utiliser une feuille de style interne. Vous pouvez utiliser la balise <style> pour définir une feuille de style interne dans l'en-tête du document, comme ceci :

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Styles en ligne

En raison de la combinaison de la présentation et du contenu, les styles en ligne perdent de nombreux avantages des feuilles de style. Utilisez cette méthode avec prudence, par exemple lorsque le style n'a besoin d'être appliqué qu'à un seul élément.

Pour utiliser les styles en ligne, vous devez utiliser l'attribut style dans les balises pertinentes. L'attribut style peut contenir n'importe quel attribut CSS. Cet exemple montre comment changer la couleur du paragraphe et la marge extérieure gauche :

<p> style="color: sienna; margin-left: 20px">
Ceci est un paragraphe
</p>

Styles multiples

Si certaines propriétés sont définies par le même sélecteur dans différentes feuilles de style, les valeurs des propriétés sont héritées de la feuille de style plus spécifique.

Par exemple, la feuille de style externe possède trois propriétés pour le sélecteur h3 :

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

La feuille de style interne possède deux propriétés pour le sélecteur h3 :

h3 {
  text-align: right; 
  font-size: 20pt;
  }

Si cette page possède une feuille de style interne liée à une feuille de style externe, le style obtenu par h3 est :

color: red; 
text-align: right; 
font-size: 20pt;

Les propriétés de couleur seront héritées des feuilles de style externes, tandis que l'alignement du texte (text-alignment) et la taille de la police (font-size) seront remplacés par les règles des feuilles de style internes.