Il existe trois façons d'appliquer un style dans une page HTML :
Une feuille de style externe est définie dans un fichier séparé. Il s'agit d'un fichier texte ayant pour suffixe .css.
Il contient une suite de définition de style de la forme :
sélecteur { propriété1:valeur1; propriété2:valeur2;...; propriétéN:valeurN;}
Une feuille de style externe s'applique à toutes les pages auquel elle est liée.
Pour lier une feuille de style définit dans un fichier "style.css" distinct du code source on inclut balise <link> dans l'entête de la page (balise <head>)
<link href="style.css" rel="stylesheet" type="text/css"/>
La valeur de l'attribut “href” qui, comme pour l'attribut “href” de la balise <a>, est une référence à un fichier qui peut être interne (relative, absolue) ou externe.
L'intérêt de ce procédé est de permettre la modification de la présentation de toutes les pages auxquelles une feuille de style est liée en ne manipulant qu'un seul fichier, garantissant une uniformité de la présentation au sein de toutes les pages.
Le fichier style.css :
h1 { color : #FFFFFF; font-size: 24px; background-color: #333333; }
La page faisant appel à la feuille de style "style.css"
<html>
<head>
<title>Exemple</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1> Exemple </h1>
</body>
</html>
Comme pour une feuille de style externe une feuille de style interne consiste en une suite de définition de style :
sélecteur { propriété1:valeur1; propriété2:valeur2;...; propriétéN:valeurN;}
Contrairement aux feuilles de style externes, cette liste de définitions ne figure pas dans un fichier distinct, mais directement dans le code de la page à laquelle elle s'applique.
L'inclusion d'une feuille de style est réalisée grâce à la balise <style> incluse dans la balise <head>
<style type="text/css">
<!--
liste de définitions
-->
</style>
Cette méthode est utilisée si la feuille de style est destinée à être appliquée à une unique page. Lorsque plusieurs pages doivent prendre en compte une feuille de style il est préférable de lier un fichier externe.
<html>
</html>
Il est possible de définir une liste de propriétés s'appliquant à une balise unique en l'incorporant à celle-ci par le biais de l'attribut “style” :
<nom_balise style="liste de propriétés">
Un style incorporé à une balise ne s'applique qu'à celle-ci qui fait office de sélecteur implicite.
Cette méthode n'est utilisée que pour des mises en formes ponctuelles et spécifiques en un point d'une page.
<html>
<head>
<title>Exemple</title>
</head>
<body>
<h1 style="color : #FFFFFF; font-size: 24px; background-color: #333333;">
Exemple
</h1>
</body>
</html>
Copyright Gabriel Braun 2007