Les feuilles de style CSS

Les versions 4 et + des navigateurs respectent les normes CSS (Cascading Style Sheet, feuille de style).
Les feuilles de style permettent un gain de temps en développement et en maintenance de page mais sont peu connues.
Même s'il ne s'agit pas de javascript, je pense que cet article est utile.
Sommaire de la page :

1 - La création de style
2 - Les feuilles de style externes
3 - Les propriétés de style
       - Les styles de polices
       - Les styles de textes
       - Les arrières-plans
       - Le positionnement
       - L'encadrement

1 - La création de style

La déclaration de style se fait dans l'entête de la page, encadrée par les balises <STYLE> et </STYLE>.
Il y a 3 possibilités pour affecter un style :
- modifier le style d'une balise existante
- créer une nouvelle classe de style
- affecter l'attribut style

Les balises existantes
Voici la syntaxe pour affecter la police arial en 12 points à toutes les cellules des tableaux d'une page.
Toutes les propriétés de style sont détaillées dans le dernier paragraphe.
   <HTML><HEAD>
   <STYLE>
      TD {font-family:arial;font-size:12pt}
   </STYLE>
   </HEAD>
   <BODY>
      Ici le corps de la page
   </BODY></HTML>

Ici, toutes les cellules TD auront comme style par défaut Arial 12pt.
On peut modifier ainsi toutes les balises existantes.

Le cas particulier de la balise de lien A
La balise <A> est particulière, car elle peut être dérivée selon l'action du visiteur. On obtient ainsi 3 balises A.
   A {text-decoration:none}
   A:hover {text-decoration:underline}
   A:active {color:red}
   A:visited {color:green}

Avec cette déclaration, le texte de lien :
- est souligné au passage de la souris,
- devient rouge sur un clic,
- reste vert pour indiquer que ce lien a été visité.

ATTENTION : Netscape 4.X ne supporte pas cette fonctionnalité. Plus généralement, il n'est pas possible de changer le style d'un objet HTML une fois la page chargée dans Netscape.

Création de classes
Modifier les balises existantes n'est pas suffisant quand il s'agit d'affecter un style à une partie de texte. Par exemple dans cette page, les parties de code sont en courier new vert, grâce à la classe de style "code" qui est déclarée ainsi :
   <HTML><HEAD>
   <STYLE>
      .code {font-family:courrier;color:green}
   </STYLE>
   </HEAD>

Le point devant code indique la création d'une nouvelle classe appelée code.

Pour affecter ce style à une portion de texte, on écrit :
   <SPAN class="code">texte mis en forme</SPAN>
La balise <SPAN> permet d'affecter à un groupe de mot une classe de style.

Il est aussi possible d'affecter ce style à une balise existante. Pour donner le style courier new vert à une cellule de tableau, on écrit :
   <TD class="code">cellule en police courrier vert</TD>

Affecter l'attribut style
Il n'est pas indispensable de créer une classe de style pour affecter un style à un objet. Par exemple :
   <SPAN style="font-family:courier;color:green">Texte mis en forme</SPAN>

L'attribut style d'une balise reçoit les propriétés de style.
Il est toutefois préférable de déclarer une classe pour regrouper la mise en forme.

2 - Les feuilles de style externes

Nous avons vu jusqu'ici comment affecter un style à une page, ce qui implique de recopier la déclaration dans toutes les pages et rend les mises à jour longues et périlleuses.
Il est possible de regrouper la déclaration des styles dans un fichier externe et de l'appeler dans toutes les pages du site. La maintenance est accélérée et toutes les pages du site sont homogènes.

Le fichier externe
L'extension d'un fichier de feuille de style est toujours .css
Le fichier css contient uniquement l'intérieur des balises <STYLE>.
Voici un exemple de fichier de style appelé style.css :
   /* Ceci est un commentaire */
   TD {font-family:arial;font-size:12pt}
   .code {font-family:courrier;color:green}

Le fichier style.css ne contient pas les balises <STYLE>.
Comme en javascript, les commentaires sont marqués par // ou /* */.

L'intégration du fichier externe
Une ligne dans l'entête suffit pour appeler le fichier de style dans une page :
   <HTML><HEAD>
      <LINK rel="StyleSheet" type="text/css" href="style.css">
   </STYLE>
   </HEAD>

La balise <LINK> fait un lien entre la page en cours et le fichier de style externe.

3 - Les propriétés de style

Nous avons vu comment déclarer les styles dans une page. La norme CSS a prévu de nombreuses propriétés pour les différents objets HTML. Toutes ces propriétés ne sont pas prises en compte dans tous les navigateurs. Netscape 4.X en particulier est assez en retard par rapport à Internet Explorer 4 et 5, qui lui-même ne respecte pas toutes les normes.

Les propriétés de police
Normes respectées par Internet Explorer et Netscape.

Propriété	Signification	Valeurs possibles
font-size	Hauteur de police en points ou pixels	font-size:12px font-size:10pt
font-family	Nom de police	font-family:arial,verdana font-family:sans serif
font-weight	Epaisseur de la police (gras)	font-weight:bold font-weight:normal
font-style	Style de police (italic)	font-style:italic font-style:normal
color	Couleur de police	color:green color:#FFCC00

Les propriétés de texte
Normes respectées par Internet Explorer et Netscape.

Propriété	Signification	Valeurs possibles
text-height	Hauteur de ligne en points ou pixels	text-height:12px
text-decoration	Attribut de soulignement	text-decoration:overline text-decoration:line-through text-decoration:underline text-decoration:none
text-align	Alignement de paragraphe (balise P)	text-align:left text-align:right text-align:center
text-indent	Indentation de paragraphe (balise P)	text-indent:25px text-indent:-15px
text-transform	Transformation des majuscules	text-transform:capitalize text-transform:uppercase text-transform:lowercase

Les propriétés d'arrière-plan
Seul Internet Explorer 4 et 5 permet de choisir une image d'arrière plan.

Propriété	Signification	Valeurs possibles
background	Image d'arrière-plan	background:image.gif
background-color	Couleur d'arrière-plan	background-color:black

Les propriétés de positionnement
Netscape 4.X a un gestion particulière des propriétés de positionnement.

Propriété	Signification	Valeurs possibles
clip	Clipping	clip:auto
width	Largeur de la zone	width:auto width:150
height	Hauteur de la zone	height:auto height:100
top	Ordonnée du coin supérieur gauche	top:10
left	Abscisse du coin supérieur gauche	left:400
overflow	Recouvrement	overflow:clip overflow:scroll overflow:none
position	Type de positionnement	position:absolute position:relative position:static
visibility	Visibilité	visibility:hidden visibility:visible

Les propriétés d'encadrement
Aucune de ces propriétés n'est reconnue par Netscape 4.X
Internet Explorer respecte presque complètement l'affichage de ces propriétés.

Propriété	Signification	Valeurs possibles
margin-top	Marge du haut en pixels	margin-top:10
margin-right	Marge du bas en pixels	margin-right:15
margin-bottom	Marge du haut en pixels	margin-bottom:15
margin-left	Marge de gauche en pixels	margin-left:10
margin	Groupement des 4 marges haute, droite, bas et gauche	margin:10,15,15,10
padding-top	Espacement en haut	padding-top:10
padding-right	Espacement à droite	padding-right:10
padding-bottom	Espacement en bas	padding-bottom:10
padding-left	Espacement à gauche	padding-left:10
padding	Groupement des espacements en haut, à droite, en bas et à gauche	padding:10,10,10,10
border-style	Style de contour	none, solid, double, groove, ridge, inset, outset
border-color	Couleur de contour	border-color:red
border-width	Largeur de contour	border-width:3px thin, medium, thick
border-left-width	Epaisseur du trait de contour gauche	border-left-width:thin
border-right-width	Epaisseur du trait de contour droit	border-right-width:medium
border-top-width	Epaisseur du trait de contour haut	border-top-width:thick
border-bottom-width	Epaisseur du trait de contour bas	border-bottom-width:0px
float	Flottaison du bloc A éviter	float:right float:left

Lire aussi l'introduction aux normes du W3C

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Les feuilles de style CSS

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...