Les feuilles de style

Cascading Style Sheets ou CSS

Le langage HTML présente des limitations importantes en matière de présentation et de mise en forme.

Le W3 a donc proposé un modèle de feuille de style en cascade (Cascading Style Sheets ou CSS) pour palier à ce problème.

Principe de base

La feuille de style est composée de règles qui décrivent l'aspect des éléments d'une page HTML.

La feuille de style peut être définie de plusieurs façons :
- dans le document HTML.
- dans un fichier distinct, incorporé ensuite au fichier HTML.

Déclaration d'un style à l'aide de l'attribut STYLE un peu partout dans le document.

exemple : <h1 style="color : red;"> Ce texte est en rouge</h1>

Déclaration d'un style dans l'entête du document

exemple :
<html>
<head>
<titre>Exemple de feuille de styles CSS</titre>
<style type="text/css">
<!--
h1{color : red;}
/* on peut mettre un commentaire*/
->
</style>
</head>

<body>
<h1>Ce texte est en rouge</h1>
</body>

</html>

Déclaration d'un style dans un fichier distinct, incorporé ensuite au fichier HTML

Ceci permet d'écrire une même déclaration pour plusieurs pages d'un site.
exemple d'un fichier CSS :

monfichier.css

/* mon fichier CSS de style*/
p,h1,h2,h3,b,i {font-family : Arial,sans-serif;}
h1 {color : red; }
/* fin du fichier de style */

Deux méthodes pour importer le fichier monfichier.css.

exemple 1 :
<html>
<head>
<titre>Exemple de feuille de styles CSS</titre>
<link rel="stylesheet" type="text/css" href="monfichier.css">
</head>
<body>
<h1>Ce texte est en rouge</h1>
</body>
</html>

exemple 2 :
<html>
<head>
<titre>Exemple de feuille de styles CSS</titre>
<style type="text/css">
<!--
@import url(monfichier.css);
->
</style>
</head>
<body>
<h1>Ce texte est en rouge</h1>
</body>
</html>

-:-:-:-:-:-:-:-:-:-:-:-:-:-:-:-:-:-:-:-

Exemples de CSS

Ma page amoreaux