Initiation aux Feuilles de styles utilisateur (CSS)

"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" en utilisant la balise html appropriée et le navigateur comme le logiciel word saura par défaut comment mettre le texte en forme.

Page d'exemple qui vas nous servir de base. Voici les balises utilisées.
  • h1, h2 jusqu'à h6
  • ul
  • li
  • p
  • div
  • span
  • a

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

Remarque:

Une page web normalement constituée devrait utiliser ce type de balise, mais encore beaucoup trop de webmaster ne s'en préocuppe pas ce qui fait que votre feuille de style risque d'être en partie innopérationelle sur des sites qui ne respecte pas certaines régles. Nous verrons plus loin l'impact que cela peut avoir.

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 sélecteur et d'un bloc de déclaration.

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

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

h1 /*le sélecteur*/
/*début du bloc de déclaration*/
{
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éclaration*/

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

Les selecteurs:

Il existeplusieurs 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 les balises html, vous vous rappelez, h1, ul, li...

  • h1, h2 jusqu'à h6
  • ul
  • li
  • p
  • div
  • span
  • a

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 = couleurs de fond
  • color = couleurs de texte
  • font-size = taille du texte
  • font-style = type de police
  • border = bordures

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.

  • Taille du texte: em, px, %
  • Couleur du texte ou du fond :#ffffff, white, (0,0,0)
  • Type de police: Arial, Verdana

Donc nous avons vu comment fonctionne un navigateur pour mettre en forme du texte et qu'il il était possible de lui appliquer des réglages particuliers par l'intermédiaire d'une feuille de style.

Ma première feuille de style

Vous remarquerez sur les exemples 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, il suffit juste de lui indiquer ou se trouve ce fichier texte pour que celui-ci puisse l'interpréter.

Pour Internet Explorer

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

ul
{
background:#666666;
color:#ffffff;
}
h1
{
background:#000000;
color:#ffa421;
}

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 indiquez l'emplacement ou se trouve "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, renommé le en userContent.css, copiez collez le même code et enregistrez. Si ce fichier n'existe pas, créer le à l'aide du bloc-notes. Redemarrez Firefox

Si vous revenez sur la page de test, vous vous apercevrez que des changements on normalement eu lieu.