Accueil · Forums  · Règles du Forum  · Outils  Plan des publications · Espace Rédacteurs
| Sommaire | Design et Graphisme | Domaines et hébergement | Droit, finances et administration | La Tribune du Hub | Langages du Net | Les serveurs Web | Référencement et publicité | Techniques Internet |
  > Langages du Net
Rechercher dans les publications Rechercher:

Rechercher dans les publications Dans la même rubrique:

L’accessibilité

Les Meta Tags

Les standards du Web

Rédiger une bonne déclaration d’accessibilité

Un code valide : le doctype

Un code valide : quelques erreurs fréquentes

Imprimer cet article

Rechercher dans les publications Auteur : Monique
Site Web :
Webatou, accessibilité et qualité des sites Web

En campagne pour des sites de qualité, conformes et accessibles

Articles de l'auteur :
Rédiger une bonne déclaration d’accessibilité
Les feuilles de style
L’accessibilité
Un code valide : quelques erreurs fréquentes
Un code valide : le doctype
Les standards du Web
Les feuilles de style

Les feuilles de style

Pourquoi ? Comment ?

24 novembre 2003, par Monique

Les feuilles de style (CSS = Cascading Style Sheets) sont un complément au langage HTML. Jusqu’en 1996, date de la première version, toutes les informations relatives à l’aspect de la page étaient indiquées directement dans le code HTML par exemple :


<font color="#000099">
<font size="+1">Un texte</font>
</font>

Par habitude, par manque d’information... trop de pages sont encore écrites ainsi. Pour beaucoup, une feuille de style équivaut au moyen de modifier la couleur d’un lien au survol de la souris. En examinant la source des pages, il est fréquent de voir un lien vers un fichier css (souvent obtenu sur le Web, à l’aide d’un générateur) alors que le code reste surchargé de balises font...

Les CSS permettent se séparer le contenu des indications de mise en page : aspect et position des éléments.

Les principaux avantages sont :
- facilité et rapidité de maintenance, une modification dans un seul fichier change l’apparence d’un élément sur toutes les pages d’un site
- allègement du code source, donc économie de bande passante
- possibilité d’obtenir des effets impossibles à coder en HTML, sans utilisation de JavaScript
- allégement du travail et du coût de revient, il est inutile de maintenir plusieurs versions du site
- possibilité d’associer plusieurs feuilles de style aux même pages, adaptées au navigateur (graphique, texte...) ou à l’impression, permettant d’offrir le choix au visiteur
- meilleure accessibilité pour tous grâce aux blocs flexibles, à l’abandon des tableaux imbriqués...

Comment appliquer un style ?

Les possibilités sont variées et nuancées. On peut cependant distinguer 3 techniques de base, indispensables à connaître pour débuter.

1. Les éléments

On peut agir directement sur un élément, équivalent à une balise du code HTML. Avec cet exemple, toutes les images s’afficheront sans bordure :

img {
   border : 0;
}

et dans le code HTML

<img src="imgage1.gif" width="145" height="120" alt="image">

2. Les classes

Les caractéristiques choisies peuvent s’appliquer à plusieurs éléments sur une page. Avec cet exemple, le texte entre toutes les balises comprenant l’attribut class="couleur" sera affiché en rouge :

.couleur{
  background-color: White;
  color: Red;
}

et dans le code HTML

<h1 class="couleur">Le titre en rouge</h1>
<p>Le texte du paragraphe dans la couleur principale</p>
<p class="couleur">Le texte du paragraphe en rouge</p>

3. Les identificateurs

Les caractéristiques choisies ne peuvent s’appliquer qu’à un seul élément sur une page. Avec cet exemple, les indications de position ne pourront s’appliquer qu’une seule fois, à l’image du logo :

#imglogo {
  position: absolute;
  top: 35px;
  left: 30px;
  z-index: 1;
}

et dans le code HTML

<img src="logo.gif" id="imglogo" width="50" height="30" alt="logo du club" >

Comment incorporer une feuille de style ?

1. Pour l’ensemble du site

Tous les styles sont listés dans un simple fichier texte portant l’extension.css, c’est la solution qui permet d’appliquer facilement un même style à toutes les pages d’un site. La feuille de style sera appelée par un lien placé dans l’en-tête de la page.

2. Pour une page

Un style peut aussi être ajouté directement dans l’entête d’une page, il sera compris entre les balises . Cette méthode est surtout intéressante pour un style particulier qui ne s’applique pas à l’ensemble du site, sans quoi le gain de poids des pages serait nul.

3. Pour un élément

En affectant un attribut style à une balise, il est possible d’appliquer un style précis et différent du style global au contenu de cette balise. Cette possibilité est à utiliser avec parcimonie, sous peine de surcharger le code.

En pratique

Sur une même page, il est possible d’utiliser une seule de ces techniques ou de les associer.

La manière dont elles seront appliquées dépend de deux notions importantes :
- l’héritage : si, dans votre fichier .css, vous avez donné la valeur black à l’attribut color de l’élément body, le contenu de tous les éléments (titre, paragraphe, liste...) compris dans la balise body sera en noir
- la cascade : si vous donnez une autre valeur à l’attribut color dans une page, la dernière valeur indiquée aura la priorité sur celle du fichier global

Cet exemple montre comment utiliser les 3 possibilités :

<html>
<head>
<title>Titre de la page</title>

<link rel="stylesheet" type="text/css" href="exemple.css">

<style type="text/css">
<!--
.couleur{
  background-color: White;
  color: Red;
}
-->
</style>

</head>
<body>
 <img src="logo.gif" id="imglogo" width="50" height="30" alt="logo du club" >
 <p>Le texte des paragraphes en noir</p>
 <p class="couleur">Le texte de ce paragraphe en rouge</p>
 <p>Le texte des paragraphes en noir</p>
 <p class="couleur">Le texte de ce paragraphe en rouge et <span style="color:green;">ce mot en vert</span></p>
</body>
</html>

Dans la feuille de style exemple.css un identificateur détermine la position du logo, l’élément body a l’attribut color égal à noir. Le texte des paragraphes est donc en noir, à l’exception de ceux ayant l’attribut class="couleur". Parmi ces derniers, un style interne est affecté (dans une balise span) à une partie du texte, qui sera en vert.

Remarques

Soyez attentif à la syntaxe : les accolades, les espaces, le point-virgule.

Attention, la syntaxe est différente pour un style ajouté directement dans une balise :

p {
  background-color: White;
  color: Red;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

<p style="background-color:White; color:Red; font-family:Arial,Helvetica,sans-serif; font-size:1em">Le texte</p>

pour faciliter votre travail, il est préférable de choisir des noms significatifs pour les classes et les identificateurs (il est difficile de se souvenir que style1 = couleur, style2 = imglogo... !)

Un petit truc : quand vous devez positionner différents blocs sur votre page, attribuez leur une couleur de fond provisoire (background-color)... cela vous permettra de les visualiser et de corriger plus facilement une erreur.

Cette introduction ne vous dévoile pas tout, mais elle vous aidera sans doute à comprendre et bien utiliser les nombreux exemples disponibles sur le Web.

Liens indispensables

Les recommandations du W3C en français

Le validateur CSS du W3C

CSS débutant un bon site d’initiation

Openweb de nombreux exemples détaillés et commentés

Pompage des traductions d’articles écrits par des ténors anglophones

SELFHTML toutes les propriétés expliquées

TopStyle Lite excellent éditeur gratuit

Commentez l’article "Les feuilles de styles" sur le forum Webmaster-hub

  > Langages du Net
| Sommaire | Design et Graphisme | Domaines et hébergement | Droit, finances et administration | La Tribune du Hub | Langages du Net | Les serveurs Web | Référencement et publicité | Techniques Internet |