Les Feuilles de Style en Cascade (CSS), facilitent la mise en forme des pages HTML en préformatant certaines balises et en créant des ensembles préformatés que l'on appelle directement dans la page HTML, les CLASS. Les attributs CSS peuvent s'appliquer à tous les éments HTML, mais les CLASS sont plus spécifiquement destinées aux conteneurs tels que BODY, TABLE, TD, DIV, P, A, Hn, IMG... Ces conteneurs sont appelés blocs. Pour tous les blocs, il est possible de définir une marge externe (margin) et une marge interne (padding). Chaque bloc peut également avoir sa couleur de fond propre (background-color) et une couleur de texte (color). Les blocs sont superposés les uns aux autres selon leur ordre d'apparition sur la page HTML, sauf si un ordre de position (z-index) a été défini.
Où s'insère la feuille de style ? Il existe trois possibilités.
- La feuille de style externe :
- La feuille de style est créée avec un éditeur de texte classique et enregistrée avec l'extension ".css". Cette feuille peut alors être appelée à partir de n'importe quelle page HTML qui comporte en en-tête la balise suivante :
<LINK type="text/css" rel="stylesheet" href="mafeuille.css"> - La feuille de style interne :
- Cette feuille de style n'est utilisée que par le document où elle est présente. Elle est déclarée en en-tête entre une balise <STYLE type="text/css"> et une balise </STYLE>.
- La mise en forme ponctuelle par l'attribut style :
- Un attribut style est ajouté à la balise pour la mise en forme de cette seule balise. Exemple :
<FONT style="color:#3377BB">
Quelle est la syntaxe d'une feuille de style ? Simplement, on indique un nom de balise et on précise le formatage (marges, couleurs, retrait, taille de police...) de cette balise. La balise est écrite sans ses chevrons et le formatage est mis entre accolades, chaque attribut ayant une valeur sans guillemets après un double-point et chaque attribut étant séparé par un point-virgule. L'exemple ci-dessous fait que la page utilisera par défaut un fond noir, une police blanche en Arial.
BODY {background-color:#000000;color:#ffffff}
Pour l'exemple précédent, si une balise de paragraphe P est définie avec une autre couleur de police, c'est cette couleur qui deviendra la couleur par défaut entre <P> et </P> puisque celle-ci est imbriquée entre <BODY> et </BODY>. Pour la page que vous consultez actuellement, il existe une feuille de style qui définit le formatage de <P> par défaut. Cependant, pour les exemples, un formatage particulier a été défini : retrait, couleur de texte et couleur de fond. La solution pour appliquer plusieurs formatages différents à une même balise est de créer des CLASS. La CLASS a un nom que vous décidez et est appelée à partir de la page html en attribut de balise. Cette CLASS est précédée d'un point dans la feuille de style CSS.
Dans la feuille de style : .exemple {background-color:#ffeedd;font-size:9pt;color:#006666;padding-left:50px}
Dans la page HTML : <P class="exemple">Ceci est un exemple</P>
L'avantage d'une CLASS est aussi qu'elle peut être utilisée avec n'importe quelle balise. La CLASS de l'exemple précédent peut être appelée dans une balise <P> comme dans une balise <DIV> ou <TABLE>. Il est également possible de définir des imbrications au sein de la feuille de style.
Si l'on écrit : .exemple TABLE {background-color:#AAAAAA},
seul les tableaux imbriqués dans une balise appelant la CLASS "exemple" auront un fond gris, les autres tableaux seront normaux.
Si l'on écrit : P TABLE TABLE {background-color:red},
seul les tableaux imbriqués dans des tableaux qui sont eux-même imbriqués dans un paragraphe auront un fond rouge.
Voici le tableau des différents attributs que l'on peut utiliser dans une feuille de style.
| Attribut | Valeurs | Description | Exemple |
|---|---|---|---|
| color | nom ou valeur hexadécimale | couleur de police | {color:#66CC99} |
| font-size | px (pixels), cm, mm, pt (points), % | taille de police | {font-size:11pt} |
| font-family | serif, sans-serif, cursive, fantasy, monospace ou nom de la police | type de police | {font-family:Arial,sans-serif} |
| font-weight | normal, bold, bolder ou lighter | poids de police | {font-weight:bold} |
| font-style | normal, italic, oblique | style de police | {font-style:italic} |
| font-variant | normal, small-caps | variante de police | {font-variant:small-caps} |
| line-height | pt (points) ou % | écart de ligne | {line-height:14pt} |
| text-align | left, right, center, justify | alignement du texte | {text-align:justify} |
| text-indent | px (pixels) ou % | indentation du texte (retrait première ligne) | {text-indent:30px} |
| text-decoration | none, underline, overline, overline underline, line-throught | soulignement du texte | {text-decoration:none} |
| text-transform | capitalize, uppercase, lowercase, none | casse du texte | {font-style:italic} |
| letter-spacing | normal ou pt (points) | espacement des lettres | {letter-spacing:10pt} |
| background-color | nom ou valeur hexadécimale | couleur du fond | {background-color:black} |
| background-image | URL de l'image | image de fond | {background-image:URL(images/fond.gif)} |
| background-repeat | repeat, no-repeat, repeat-x, repeat-y | répétition de l'image de fond | {background-repeat:repeat} |
| background-attachment | scroll, fixed | l'image de fond subit ou non les déplacements de l'ascenseur | {background-attachment:fixed} |
| background-position | top, center, bottom, left et right | position de l'image de fond | {background-position:center center} |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom ou % | alignement vertical | {vertical-align:bottom} |
| margin-left (right, top ou bottom) | px (pixels) ou % | Marges extérieurs au bloc | {margin-left:10px} |
| padding-left (right, top ou bottom) | px (pixels) ou % | Marges intérieurs au bloc | {padding-top:20px} |
| border-left-width (right, top ou bottom) | medium, thick ou taille en px | taille de la bordure | {border-left-width:2px} |
| border-style | none, dotted, dashed, solid, double, groove, ridge, inset, ouset | style de la bordure du bloc | {border-style:solid} |
| border-color | nom ou valeur hexadécimale | couleur de la bordure du bloc | {border-color:blue} |
| float | none, left, right, both | alignement du bloc par rapport à un autre | {float:right} |
| clear | none, left, right, both | autorise l'alignement d'un bloc par rapport à un autre | {background-position:center center} |
| list-style-type | pour UL : disc, circle, square | forme de la puce d'une ligne | {list-style-type:circle} |
| list-style-type | pour OL : upper-roman, lower-roman, upper-alpha, lower-alpha | style de la numérotation d'une liste | {list-style-type:upper-alpha} |
| list-style-image | URL de l'image | image utilisée en tant que puce | {list-style-image:URL(images/puce.gif)} |
| list-style-position | outside, inside | position de la puce par rapport au texte | {list-style-position:outside} |
| list-style | URL de l'image et style | image ou puce de remplacement | {list-style:URL(images/puce.gif) square} |
| position | absolute, relative, static | position du bloc (par coordonnées, par rapport au précédent, fixé) | {position:absolute} |
| left | valeur en pixels (px) | position du bloc depuis la gauche | {left:20px} |
| top | valeur en pixels (px) | position du bloc depuis le haut | {top:20px} |
| z-index | valeur | ordre du bloc (le plus grand z-index est placé sur le dessus). | {z-index:3} |
| display | none, normal | suppression du bloc | {display:none} |
| visibility | hidden, normal | invisibilité du bloc | {visibility:hidden} |
Les liens bénéficient de balises spéciales dans les feuilles de style :
- a (le lien courant).
- a:hover (le lien quand la souris passe dessus).
- a:link (le lien inactif, comme a).
- a:active (le lien actif).
- a:visited (le lien visité).
a {color:green;text-decoration:underline}
a:hover {color:red;text-decoration:none}
Résultat :
Passez la souris ici
