Initiation aux Feuilles de styles utilisateur (CSS)

Par: Moi le: 23/12/06 Mots-clés: Css, Accessibilité

"Feuilles de styles" est la traduction de l'anglais "Cascading style sheet" ou "CSS".

Ces feuilles de styles, que l'on repère généralement à l'extension .css, permettent de mettre en forme le contenu d'une page web comme la couleur du texte, sa taille, la couleur de fond d'une page..., ainsi que le placement graphique des différents blocs constituant cette page, elles sont habituelement utilisée par des créateurs de sites web mais chose moins connnue, elle peuvent également servir à l'internaute et c'est ce que nous allons voir.

CSS utilisateurs mangez en

Donc, une des caractéristiques méconnues des feuilles de styles est de permettre à l'internaute en les utilisants via son navigateur, de définir lui même la maniére dont sera afficher un site web et non pas comme le webmaster l'aura décidé.

Il ne vous est jamais arrivé de tomber sur un site web ou il est trés difficile pour vous de naviguer et lire l'information pour diverses raisons (texte trop petit, un type de police illisible, un contraste insuffisant, des images et textes clignotants et ou défilants qui vous gènent) que malheureusement vous ne trouviez l'info que sur ce site et que vous soyez obligé d'y rester malgré le mal de tête que cela vous donne, hé bien ne souffrez plus, facilitez vous la tâche avec les CSS utilisateurs.

Vous ne savez pas comment faire et si cela vous sera vraiment utile? Suivez ce petit tutoriel, faites quelques tests et je pense que vous vous apercevrez vite de l'interêt que l'on peux avoir un jour ou l'autre de savoir se servir de ces feuilles de styles même pour un utilisateur.

Alors n'hésitez pas, les CSS utilisateurs mangez en c'est bon pour la santé.

Remarque:

La mise au point de CSS utilisateurs, même si c'est quelque peu technique, vous sera largement simplifiée si le webmaster du site ou des sites que vous visitez respectent certaines régles en matiére de création de page web standards

Le navigateur et le code html

Imaginez vous sous word en train de rédiger et de mettre en forme un document, hé bien le code html c'est à peu près la même chose, c'est mettre en forme du texte mais par l'intermédiaire de balises html qui entourent le texte voulu.

Exemple de balises html (ici une balise paragraphe et son texte):
<p>Mon paragraphe</p>
(On ouvre le paragraphe, on écrit le texte, on ferme le paragraphe)

Quand vous désirez avoir une liste sous word vous utilisez le bouton puces et le logiciel les crées automatiquement. En html pour indiquer au navigateur de faire la même chose, au lieu d'appuyer sur un bouton il faut lui écrire clairement "ici je veux une liste" ou "ici je veux un paragraphe", en utilisant la balise html appropriée et le navigateur comme le logiciel word saura par défaut comment mettre le texte en forme.

A titre indicatif, voilà comment les navigateurs interprètent le code (succession des balises utilisées) de cette page. Rendu par défaut de cette page et Le code utilisé

Donc, pour afficher une page web un navigateur lit un fichier texte (code html) et mets en forme celui-ci (par défaut) en fonction des informations qu'il y trouvera (balises).

Le navigateur et les feuilles de styles

Vous remarquerez sur l'exemple au dessus que le rendu par défaut d'un navigateur n'est pas très attractif, pas de couleur, fond blanc, écriture en noire, hé bien c'est là qu'interviennent donc les CSS, elles permettent comme pour le code html de dire au navigateur par l'intermédiaire d'un fichier texte (pour rappel avec l'extension .css exemple:ma_feuille.css) ce que l'on veux exactement

Voici à titre indicatif, la feuille de style de cette page.

On explique clairement au navigateur qu'une balise html devra avoir tel ou tel rendu (couleur de fond, type de police, taille de la police, couleur de la police...) en déclarant ces caractéristiques dans la feuille de style.

Exemple:

 h2 {color:#ff0000;}

On demande que les titres de niveau 2 (h2) aient une couleur rouge (color). (Nous verrons la syntaxe et la maniére de créer une feuille de style dans le chapitre suivant.)

Remarque:

On commence à entrevoir ici l'importance de l'utilisation de certaines balises par les webmasteurs comme par exemple les balises titres, votre feuille de style sera innopérante sur un site n'en possédant pas mais qui aura maquillé une balise autre pour le faire croire. On effleure ici ce que l'on apelle la sémantique d'un document, c'est à dire donner un sens à celui-ci avec les balises html adéquates en les utilisants pour ce qu'elles sont.

Cette exemple utilise une balise neutre (<div>) qui ne donne aucun sens au document

<div>Chapitre 1 : Les feuilles de style et les utilisateurs</div>
<div>Leur utilisation est méconnue</div>
Voir le rendu par défaut du navigateur

Cette exemple utilise une balise de titre (<h2>) et une balise de paragraphe (<p>)qui donnent un sens au document.

<h2>Chapitre 1 : Les feuilles de style et les utilisateurs</h2>
<p>Leur utilisation est méconnue</p>
Voir le rendu par défaut du navigateur

Appliquons maintenant le style utilisé en exemple

h2 {color:#ff0000}

On demande donc au navigateur que les titres de niveau 2 (<h2>) de la page ressortent en rouge.

Résultat avec une balise neutre maquillée
Résultat avec une balise titre

Vous remarquerez dans le premier résulat que votre demande n'est pas prise en compte et que le texte est toujours bleu et de la même taille sur tout le document comme l'a voulu le webmaster. C'est normal le navigateur n'as pas trouvé la balise <h2> mais juste une balise neutre maquillée. Ce type de situtation se reproduira à chaque fois que le webmaster n'aura pas utilisé les balises html adéquates pour donner du sens à son document.

La syntaxe d'une feuille de style (CSS)

Une page CSS est constituée de régles.

Exemple:
 h1 { font-size:1.2em; color:#ffffff } 

Les régles sont constituées d'un selecteur (ou plusieurs) et d'un bloc de déclarations.

h1 /*le selecteur*/ 
/*début du bloc de déclarations*/
{ 
font-size:1.2em;
color:#ffffff
} 
 /*fin du bloc déclarations*/

Un bloc de déclarations est constitué de propriétés suivies de leurs valeurs.

 h1 /*le sélecteur*/
/*début du bloc de déclarations*/
{
font-size:1.2em; /*font-size est la propriété, 1.2em est sa valeur*/
color:#ffffff /*color est la propriété, #ffffff est sa valeur*/
} 
/*fin du bloc déclarations*/

Cela signifie que je demande au navigateur d'agir sur la mise en forme des titres de niveau 1 (h1) d'une page web, que je veux que le texte soit en blanc (#ffffff) et que sa taille soit de 1.2em

Remarque:

Chaque déclaration doit être terminée par un point virgule, toutefois, la dernière peut eventuellement ne pas en avoir.

Les selecteurs:

Il existe plusieurs types de selecteurs, mais ici je n'en aborderai qu'un car ce tuto est avant tout une premiére initiation, si vous avez envie d'approfondir il existe une multitude de sites vous le permettant. Donc pour l'instant, les seuls selecteurs que nous allons utliliser sont des balises html.

h1
Un titre de niveau 1
h2
Un titre de niveau 2
h3
Un titre de niveau 3
ul
Bloc liste
li
Elément d'un bloc liste
p
Un paragraphe
a
Un lien hypertext
pre
Affichage de code non interpré dans une page

Les Propriétés

De même que pour les selecteurs, il existe une multitude de propriétés, mais pour des raisons de simplicité je n'utiliserais que certaines, plus particulièrement celles concernant les couleurs de fond, les couleurs de texte, la taille du texte, le type de police utilisée, les bordures.

Background-color
La couleur de fond
color
La couleur du texte
font-size
La taille du texte
font-family
Type ou famille de police à utiliser
border
Les bordures d'un élément

Les valeurs

Il existe de multiples possibilités de valeurs pour une même propriété, couleur, unité de taille, type de police, donc même combat, je vais en aborder que certaines qui nous seront utiles pour l'exemple.

em
La taille du texte
#ffffff
Couleur du texte, du fond, des bordures (valeur hexadécimale)
Arial
Type de police

Création et prise en compte de ma feuille de style

Donc nous savons comment fonctionne un navigateur pour mettre en forme du texte par défaut grâce aux balises html écritent dans le code, qu'il il était possible d'appliquer des réglages particuliers à ces balises par l'intermédiaire d'une feuille de style et de quoi elle était constituée(sélecteurs, propriétés, valeurs).

Avant de commencer à travailler sur l'exemple concret d'une feuille de style complète, il faut savoir comment créer cette feuille et dire aux navigateurs qu'il faut utiliser cette feuile de style et pas celle du webmaster.

Pour Internet Explorer

Ouvrez le bloc-notes, copiez collez le code ci dessous et enregistrez quelquepart sur votre disque dur le document que vous nommerez ma_feuille.css (dans les options choisir "document texte" et "codage ANSI").

/* Ma première feuille de style */
(les /* et */ au début et à la fin permettent d'insérer un commentaire qui ne sera pas lu par le navigateur).

Ouvrez Internet Explorer, et faites:

Outils > Options Internet > Accessibilité, une fenêtre comme celle-ci doit s'ouvrir.

capture d'écran de la fenêtre d'accessibilité d'Internet Explorer

Cochez la derniére case et en faisant "parcourir" indiquez ou se trouve la feuilles de style "ma_feuille.css", puis fermez chaque fenêtres en faisant Ok

Pour Firefox

Allez dans le repertoire chrome de votre profil.

XP:
Documents and Settings\<Nom Utilisateur>\Application Data\Mozilla\Firefox\Profiles\<nom profil>\chrome

NT:
WINNT\Profiles\<Nom Utilisateur>\Application Data\Mozilla\Firefox\Profiles\<nom profil>\chrome

98, ME:
Windows\Application Data\Mozilla\Firefox\Profiles\<nom profil>\chrome

Il devrait être présent un fichier "userContent-example.css", faites une copie de ce fichier et renommé le en "userContent.css", éditez ce nouveau fichier à l'aide du bloc note (clic droit "ouvrir avec") supprimé tout ce qui est déjà présent dans cette feuille et copiez collez le même code que précedemment et enregistrez.

Si ce fichier n'existe pas, suivre la même démarche qu'avec Internet Explorer mais n'oubliez pas de nommez le fichier "userContent.css" au lieu de "ma_feuille.css".

Dans les deux cas, redemarrez Firefox.

Ma première feuilles de style

Maintenant que l'on en connais un peu plus sur les feuilles de styles, passons à la pratique et créons notre première "css user" (feuille de style utilisateur) comme disent les geeks

Voilà normalement le résultat final attendu

Remarque:

Vous verrez que toutes les déclarations sont terminées par !important je n'en ai pas parlé jusqu'à présent mais c'est ce qui permet d'imposer vos réglages sur ceux du navigateur par défaut et ceux du webmaster. Si vous l'oubliez, votre déclaration ne sera pas prise en compte.

Nous allons donc prendre les élements constituants normalement une page web un par un et leur donner l'apparence que l'on désire.

Le sélecteur universel

C'est le seul sélecteur autre qu'une balise html dont on vas se servir dans la feuille de style, il est très utile car il permet d'appliquer une ou plusieurs règles à tous les éléments d'une page html

Nous allons donc demander que tous les éléments de la page aient un fond noir et que leurs textes soient blancs

Editez votre feuille de style précedemment enregistrée (ma_feuille.css pour IE et userContent pour firefox) et copiez collez ce code, enregistrez à nouveau le document.

Redémarrez le navigateur à chaque fois pour que les changements soient pris en compte

*
{
font-size:1.em!important;
background:#000000!important;
color:#ffffff!important;
font-family: 'Trebuchet MS'!important;
filter:none!important;
}

*: On selectionne tous les éléments de la page web

font-size: On donne une taille au texte, en l'occurence 1em.

background: On donne une couleur de fond aux élements en l'occurence noir (#000000, code héxadécimal)

color: On donne une couleur au texte, en l'occurence blanc (#ffffff, code héxadécimal)

font-family: On choisit, une police de caractères en l'occurence 'Trebuchet MS' (les guillemets simple sont obligatoire si le nom de la police comporte des espaces)

filter: C'est une propriété exclusivement présente pour Internet Explorer et non standard qui permet de désactiver certains filtres prioritaires de ce navigateurs (pour afficher certaines images par exemple).

Remarque:

Il existe plusieurs propriétés pour le fond d'un élément , background-color dont j'ai parlé mais également background-image qui permet de mettre non pas une couleur mais une image de fond, background-position qui permet de positionner une image de fond par exemple. background employé seul est une manière raccourci de prendre en compte toutes les propriétés possibles.

Au lieu d'écrire:

*
{
background-color:#ffffff;
background-image: url(mon_image_de_fond.jpg);
background-position: top left;
background-repeat: no-repeat;
}

L'on peux très bien écrire:

*
{
background: #ffffff url(mon_image_de_fond.jpg) top left no-repeat;
}

Cela aura exactement le même résultat.

Les titres

Ici nous allons définir les 3 premiers niveaux de titre, pour rappel il en existe 6 (h1 à h6)

Code html:

<h1>Mon titre</h1>

La feuille de style:

h1
{
background-color:#000000!important;
color:#00ffff!important;
}
h2
{
font-family: Hevetica, Arial, sans-serif!important;
background-color:#000000!important;
color:#00ffff!important;
}
h3
{
font-family: Hevetica, Arial, sans-serif;
background-color:#cccccc!important;
color:#000000!important;
}

Les listes et éléments de listes

Les listes sont constituées de 2 choses, un bloc (balise <ul>) et dans ce bloc, plusieurs éléments (balise <li>)

Code html:

<ul>
<li>texte1</li>
<li>texte2</li>
</ul>

La feuille de style:

ul
{
#background-color:#ffffff!important;
}
li
{
#background-color:#ffffff!important;
}

Les liens

Un lien possède plusieurs positions:
  • Au repos
  • Visité
  • Survolé
  • Actif

Code html:

<a href="adresse.html" title="informatiions complémentaires">Mon titre</a>

La feuille de style:

En CSS ces différentes positions sont matérialisé par des "Pseudo-classes"

Ici nous utiliserons:

  • link (au repos)
  • visited (visité)
  • hover (survolé)
  • active (actif)
a:link
{
background-color: #bbbbbb!important;
}
a:visited
{
background-color: #bbbbbb!important;
}
a:hover
{
background-color: #bbbbbb!important;
}
a:active
{
background-color: #bbbbbb!important;
}

Affichage des codes

On utilise la balise pre, elle permet par exemple de garder l'indentation d'un code (décalage)

Code html:

<pre>
Mon code
	La suite...
</pre>

La feuille de style:

pre
{
background-color:#000000!important;
color:#ffffff!important;
}