Introduction aux feuilles de style en cascade (css)

Le concept de feuilles de style en cascade (cascading style sheets) est apparut dans le but d'aider à simplifier le design de sites web.

Lorsqu'il n'existait encore que le langage HTML, on pouvait tout de même créer un site web et réussir à lui donner approximativement le même aspect que si on aurait utilisé une feuille de style. Il était par exemple possible de décider que dans chaque pages, la police de caractère des paragraphes serait «Helvetica» et que les titres auraient une taille plus grande que celle des paragraphes. Pour réaliser celà, la personne en charge de créer les pages du site devait entrer le code HTML «<font face="helvetica"></font>» dans chaque balise de paragraphe et quelque chose comme «<font size="4"></font>» pour chaque balise de titre. Imaginez que vous venez de terminer cette tâche pour un site contenant 200 documents et que la directrice artistique vous dise qu'elle préfèrerait voir les paragraphes en police de caractères «Times». 200 fichiers à changer!

Les feuilles de style apporte une solution à ce problème en vous permettant de concentrer tout le style de votre site à l'intérieur d'un seul ou du moins, de quelques fichiers.

Cet article vous propose une introduction aux css et vous présente quelques exemples de feuilles de style.

Trois méthodes pour exploiter css

En premier lieu, il convient de savoir qu'il existe trois façon de se servir de css. En voici la liste

1. Feuilles de style externe
2. Feuilles de style interne
3. Style spécifié directement dans la balise

Feuilles de style externe

Il est possible de créer des feuilles de style dans un fichier externe à la page web. C'est fichiers portent l'extension «.css». On peut y faire référence dans une page web en utilisant la balise «» en se basant sur la syntaxe suivante :

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

C'est ce genre de feuilles de style qui viennent corriger le problème des sites comportant des centaines de pages, dont je faisais mention en début de cet article car elles peuvent être utilisé par une multitude de pages web.

Feuilles de style interne

Il est aussi possible de créer une feuille de style directement dans un fichier en utilisant la balise <style> avec la syntaxe suivante :

<style type="text/css">
</style>

Évidemment, cette feuille de style ne sera utilisée que par le fichier dans lequel elle se trouve. Il peut cependant parfois être utile de disposer de cette possibilité.

Style spécifié directement dans la balise

CSS offre aussi la possibilité d'indiquer des diectives pour un élément particulié d'une page web, directement dans la balise de celui-ci en se servant de l'attribut «style».

Priorité des trois méthodes

Toute ces méthodes offertes par CSS peuvent aussi être combinées. Vous pourriez par exemple avoir une feuille de style externe et aussi une css interne pour un même fichier. Dans le cas où chacune de ces feuilles de style contiendrait une directive s'appliquant à un même élément de votre page web, c'est sûr la css interne que le navigateur qui affiche la page se baserait pour appliquer la directive. Il existe donc un ordre de priorité pour chacune des méthodes de style énoncées ci-dessus. Ainsi, c'est toujours, le style déclaré dans une balise qui sera appliqué en premier, suivit de celui de la css interne et finalement, de la css externe.

Une première feuille de style

Passons maintenant à la pratique. Ouvrez votre éditeur de texte préféré et tapez le code de cette page HTML contenant une feuille de style interne.

Description du listing

Nous commencerons par regarder les lignes 5, 9 et 14 ou plus précisément, le premier caractère de chacune de ces lignes soit, les caractères : «p», «.» et «#» qui nous aideront à comprendre les trois types de déclaration pouvant apparaitre à l'intérieur d'une feuille de style soit :

1. Déclaration du nom d'une balise
2. Déclaration d'une classe
3. Déclaration de l'identifiant d'un élément

Le premier caractère déclare la balise «p» ce qui veut dire que toutes les directives de style indiquées entre les caractères «{» et «}» qui suivent la déclaration s'appliqueront à toutes les balises «p» de la page web.

Le second caractère est un point, ce qui indique le début d'une déclaration de classe. Dans ce cas, le nom de la classe est «titre». Les directives de style définies sous la déclaration de cette classe s'appliqueront à toute balise contenant un attribut «class» dont la valeur est égale à «titre» (voir la ligne 21 du listing pour un exemple d'utilisation).

Le dernier caractère (#) indique le début d'une déclaration d'un identifiant d'élément. Les directives de style s'appliqueront dans ce cas, à l'élément possédant un attribut «id» dont la valeur est égale à «monElement» (voir ligne 23 du listing).

La feuille de style contient les directives suivantes :

• font-family : Permet de spécifier le nom d'une police de caractère
• font-size : Permet d'indiquer la taille d'une police de caractère
• font-weight : Pour indiquer si la police de caractère doit être affiché en gras ou normalement.
• color : Permet d'indiquer une couleur selon le même format qu'en langage HTML. Par exemple : #000000 est la valeur de la couleur noir.

Ces directives ne sont qu'une petites partie de celles offertes dans les diverses spécification css du W3C (organisme qui gère les standards du web).

Pour terminer cet article, voici une liste des différentes directives utilisée dans la feuille de style du site a525g.com.

• background-color :
  Spécifier la couleur d'arrière-plan d'un élément. Utilisée sur les balises table, tr, td et body.
  Exemple : background-color : #CC0000;
• border :
  Spécifier la taille, le style ainsi que la couleur de la bordure d'un élément. Utilisée avec td ou table. Pour ajouter du style à une des quatres parties de la bordure de la balise, on peut le faire en utilisant : border-top, border-bottom, border-left, border-right.
  Exemple : border : 2px groove #CC0000;
• text-decoration :
  Spécifier le style du texte dans un élément. Souvent utilisé avec les pseudos-éléments a:link, a:hover, a:visited pour enlever le soulignement des liens hypertextes.
  Exemple :
  a:link
  {
  text-decoration : none;
  }
• letter-spacing :
  Spécier l'espace entre chacun des caractères contenu dans une balise.
  Exemple : letter-spacing : 1em;
• text-align :
  Permet de spécifier l'alignement d'un texte à l'écran.
  Exemple : text-align : right;
• text-indent :
  Permet d'ajouter un espace blanc devant un texte pour indenter celui-ci.
  Exemple : text-indent : 10px;
• padding :
  Permet d'indiquer quel sera l'espace entre le contenu d'une balise par rapport aux limites de celle-ci. Tout comme la directive «border», on peut indiquer un style pour l'une des quatre sections avec padding-left, padding-right, padding-top et padding-bottom.
  Exemple :
  padding-left : 1em;
  padding-top : 4px;