Une feuille de styles est composée d'un ensemble de descriptions de styles.
Il existe deux types de feuilles de styles, la feuille de styles interne (au document HTML) et la feuille de styles externe.
Dans les deux cas, chacun des styles est décrit à l'aide de la syntaxe suivante :
Sélecteur {propriété: valeur; propriété: valeur …}
H2 {COLOR: navy; FONT: 18px; FONT-FAMILY: sans-serif}
Une feuille de styles interne est insérée en en-tête du fichier HTML à l'aide de l'élément <STYLE> qui introduit les règles pour chacun des styles de la feuille interne.
Ces styles pourront ensuite être appliqués dans le documents à l'aide de l'attribut class placé à l'intérieur des balises d'ouverture des éléments sur lesquels on veut les appliquer
Dans les cas où le sélecteur porte le même nom qu'un élément, le style s'appliquera sur l'élément sans qu'il soit nécessaire d'ajouter l'attribut class.
<HEAD>
<TITLE>Nom du document</TITLE>
<style>
<!--
A { COLOR: red }
.toto {COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif}
-->
</style>
</HEAD>
<P CLASS="toto">texte du paragraphe
Une feuille de styles externe est un fichier texte portant habituellement l'extension .css. Ce fichier doit faire l'objet d'un lien si l'on veut pouvoir utiliser les styles qu'il contient dans un document HTML. Ce lien doit être défini dans l'en-tête du document HTML de la manière suivante :
<HTML>
<HEAD>
<TITLE>Histoire des feuilles de styles</TITLE>
<link REL="StyleSheet" TYPE="text/css" HREF="../styles.css">
</HEAD>
À l'opposée d'une feuille de styles, la description d'un style intra-ligne est insérée directement dans la balise d'ouverture d'un élément HTML. Le style est appliqué à l'aide de l'attribut HTML style inséré dans la balise d'ouverture de l'élément.
<P STYLE="COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif">
| Nom de la Propriété |
Syntaxe de la règle | Valeurs possibles |
| font-family | <selector> {font-family:<value>} | <family-name> (specify) or <generic-family>~ [serif, sans-serif*, cursive*, fantasy*, monospace] |
|
|
||
| font-style | <selector> {font-style:<value>} | normal, italic |
|
|
||
| font-weight | <selector> {font-weight:<value>} | normal*, bold, 100*, 200*, 300*, 400*, 500*, 600*, 700*, 800*, 900* |
|
|
||
| font-size | <selector> {font-size:<value>} | <absolute-size>, <relative-size>*, <length>~~, <percentage> |
|
|
||
| font $ | <selector> {font:<value>} | <font-style>~~, <font-weight>*, <font-size>**, <font-family>** |
| Couleur et arrière-plan | ||
| Nom de la Propriété |
Syntaxe de la règle | Valeurs possibles |
| color | <selector> {color:<value>} | <color> |
|
|
||
| background-color | <selector> {background-color:<value>} | <color> |
|
|
||
| background-image | <selector> {background-image: url(<value>)} | URL (relative or absolute path) |
|
|
||
| background $ | <selector>{background:<value>} | <background-color> (i.e., <color>) |
| Propriétés pour le texte | ||
| Name of Property |
Rule syntax | Possible values |
| Text-decoration | <selector>{text-decoration:<value>} | underline, line-through |
|
|
||
| text-transform | <selector>{text-transform:<value>} | capitalize*, uppercase*, lowercase*, none* |
|
|
||
| text-align | <selector>{text-align:<value>} | left, right, center, justify* |
|
|
||
| text-indent | <selector>{text-indent:<value>} | <length>, <percentage> |
| Box properties | ||
| Nom de la Propriété |
Syntaxe de la règle | Valeurs possibles |
| margin $ | <selector>{margin:<value>} | <length>**, <percentage>**, auto(sequence: t r b l) |
|
|
||
| margin-top | <selector>{margin-top:<value>} | <length>**, <percentage>, auto |
|
|
||
| Margin-right | <selector>{margin-right:<value>} | <length>, <percentage>, auto |
|
|
||
| margin-bottom* | <selector>{margin-bottom:<value>} | <length>*, <percentage>*, auto* |
|
|
||
| margin-left | <selector>{margin-left:<value>} | <length>, <percentage>, auto |
|
|
||
| padding $* | <selector>{padding:<value>} | <length>*, <percentage>*, (sequence: t r b l) |
|
|
||
| padding-top* | <selector>{padding-top:<value>} | <length>*, <percentage>* |
|
|
||
| padding-right* | <selector>{padding-right:<value>} | <length>*, <percentage>* |
|
|
||
| padding-bottom* | <selector>{padding-bottom:<value>} | <length>*, <percentage>* |
|
|
||
| padding-left* | <selector>{padding-left:<value>} | <length>*, <percentage>* |
|
|
||
| border-color* | <selector>{border-color:<value>} | <color>* |
|
|
||
| border-style* | <selector>{border-style:<value>} | solid*, double*, groove*, ridge*, inset*, outset* |
|
|
||
| border $* | <selector>{border:<value>} | <border-width>*, <border-style>*, <color> |
| Block-level and Replaced Elements | ||
| Nom de la Propriété |
Syntaxe de la règle | Valeurs possibles |
| width | <selector>{width:<value>} | <length>, <percentage>, auto |
|
|
||
| height | <selector>{height:<value>} | <length>, auto |
|
|
||
| float | <selector>{float:<value>} | left, right |
|
|
||
| clear | <selector>{clear:<value>} | none, left*, right* |
| Position (CSS - P) | ||
| Nom de la Propriété |
Syntaxe de la règle | Valeurs possibles |
| position | <selector>{position:<value>} | absolute, relative |
|
|
||
| top | <selector>{top:<value>} | <length>, <percentage>, auto |
|
|
||
| left | <selector>{left:<value>} | <length>, <percentage>, auto |
|
|
||
| visibility | <selector>{visibility:<value>} | hidden, visible, inherit |
|
|
||
| z-index | <selector>{z-index:<value>} | <number>, auto |
|
|
||
| overflow | <selector>{overflow:<value>} | visible, hidden, auto |
|
|
||
|
*
= Ne fonctionne pas sur IE 4/Mac |
||