Utilisation des CSS

Que sont les CSS ?

Les Cascading Style Sheets sont une avancée révolutionnaire, qui permettent d’un coup d’un seul pour un graphiste de modifier l’apparence d’un site internet. Tout logiciel de mise en page permet de concevoir et d’appliquer des feuilles de style, et permet ainsi d’automatiser l’ensemble des attributs graphiques d’un texte.

La hiérarchie d’un article

Il est important d’avoir plusieurs niveaux lectures dans un texte, qu’il s’agisse d’un magazine, d’une brochure institutionnel, d’un site ou même d’un blog.
Le contenu proprement dit d’un article est le texte courant. A celà s’ajoute un titre d’appel qui donne au lecteur en quelques mots la synthèse de ce qu’il va lire. C’est la formule minimale : titre + texte courant.

Ensuite, il est important de multiplier les entrées de lecture par des procédés divers et variés. Souvent un nom de rubrique permet d’indiquer à quel domaine fait référence le sujet de l’article.
Avant d’entrer dans le vif du sujet, au chapeau introduit la lecture en quelques lignes. Le lecteur peut ainsi comprendre les tenants et aboutissants de l’article.

Une porte d’entrée est également l’illustration qui aura intérêt à être légendée.
Enfin, pour casser la densité d’un article qui peut s’avérer rébarbatif car très long, des exergues sont les bienvenues. Ce peut-être une citation d’un interlocuteur, une expression mise en avant, par des guillemets ou autre astuce graphique.

Pour résumer les entrées :
Nom de rubrique
Titre
Sous-titre
Chapeau
Légendes de photo
Exergues
Texte courant

Avec tout cet arsenal de « titraille », même si votre sujet n’est pas lu complètement, le lecteur aura saisi d’un coup d’œil le sujet et l’esprit de votre message.

Les feuilles de styles

Pour bien marquer leur différence, le fond et la forme de ces composants de texte ont leur importance, c’est justement ce qui crée une hiérarchie contextuelle.

Un titre sera par défaut l’élément le plus visible, un nom de rubrique sera habituellement mis en retrait de manière discrète, un chapeau en gras italique, une légende en maigre italique, et le texte sans fioriture. Ce ne sont bien sûr que des généralités, après c’est justement au graphiste de jouer. Evidement, le support même ainsi que les sujets traités donnent l’esprit graphique à apporter. Un blog sur un groupe de muisque et un rapport instituionnel n’auront pas les mêmes codes, mais cependant intrinsèquement ils auront malgré tout une hiérarchie de contenu à respecter.

Les feuilles du style pour le web

Il y a évidement beaucoup moins de choix de styles de textes pour le web que pour le print. Il faudra se débrouiller avec un arsenal moindre, mais c’est justement un bon challenge de concevoir une mise en page avec peu de moyens.
Pour commencer, le choix des polices est des plus limités, il faudra se cantonner avec des polices très usuelles.

Ensuite concernant les tailles de textes, la précision est beaucoup moins fine que pour le papier : taille des caractères, approches et interlignes ne sont pas très flexibles.
On peut donc jouer avec une ou deux familles de caractères, des solutions classiques de regular, gras ou italique et des gammes de couleurs.

Les CSS

Les CSS consiste donc à déterminer des emplois types de style en fonction d’une utilisation donnée, nous retrouvons les titres, rubriques, chapeaux, légendes et textes courants, ainsi que les liens.

Le but est de créer un fichier CSS, qui permet d’attribuer très précisément à tous ces composants de textes les styles désirés. Plus que les textes, il est possible de définir le fond de couleur des pages du site.

Personnellement je trouve le système vraiment facile et agréable à l’utilisation, d’autant que le CSS peut être interne à la page (auquel cas il n’est appliquée qu’à celle-ci), ou extérieur et dans ce cas de figure les performances sont prodigieuses.

En effet, il est possible sur l’intégralité d’un site de modifier instantanément tous les attributs. D’un coup la couleur de tous les titres, la taille des noms de rubriques, l’aspect des légendes et le graphisme des liens changent sur l’intégralité des pages.

Force est de constater que la plupart des blogs sont conçus en CSS, ainsi il est courant de voir chez les hébergeurs de blogs des thèmes entiers de skins complètement personnalisables. Dès que l’on choisit un thème graphique, l’ensemble du blog change ainsi immédiatement de look de manière automatique.

Comment créer les CSS

Chaque élément de texte correspond à un code source spécifique. Il suffit donc d’indiquer précisément pour chacun de ces éléments quelle est la police, la taille, la couleur et le style (gras, italique…) désiré.

Pour ce faire il vous faut un éditeur CSS, ou alors connaître le développement et entrer directement en mode source les codes des attributs.

Tous ces éléments sont listés dans votre fichier CSS (qui a pour extension .css), et il suffit de faire une liaison entre votre page (ou votre site entier) avec ce fichier css pour appliquer partout les feuilles de styles.

Un exemple concret est ce blog sur lequel vous surfez. A la base j’ai essayé un hébergeur de blogs, puis comprenant les grandes lignes du procédé, j’ai appris à mettre en application les feuilles de styles pour gérer la mise en page de manière entièrement automatisée.