5) Les Cascading style sheets

Nous avons précédemment créé une page et l’avons nourrie de contenus, encapsulés dans des balises qui permettent de comprendre la logique du document. Mais le résultat lorsque l’on affiche cette page dans le navigateur est brut de décoffrage. Texte noir, fond blanc, liens bleus, tous les contenus empilés les uns au dessus des autres.

Précédent | 7/16 | Suivant

Les css est un langage de description des comportements visuels. De la même manière que h1 dit "ceci est un titre", les css vont permettre de dire au navigateur "le fond est beige clair" ou "ce titre est en 18 pixels de hauteur" par exemple.

Structure sémantique et mise en forme visuelle

Le W3C recommande de séparer les différents codes en usage dans une page web. Le HTML s’occupe de structurer l’information de la page dans un but essentiellement sémantique : un h1 est le titre principal de votre page, un p est un paragraphe, etc. A vous d’utiliser judicieusement les tags pour rendre la page la plus juste du point de vue de son contenu.
Maintenant lorsqu’il s’agit de couleur, de taille de police, de structuration visuelle de votre page, ce n’est plus du ressort du html, ça concerne les css. On verra qu’on peut mettre du code css directement dans les balises, ou les concentrer dans le head de la page, mais le w3c recommande (et moi avec eux) de mettre toutes ces informations dans un fichier séparé.
La première spécification du langage CSS est publiée en 1996 et contient une cinquantaine de propriétés. L’idée est par la suite d’ajouter des "niveaux" : CSS 2 ajoute des propriétés en plus de la version 1, sans modifier celle-ci. CSS3, est donc un troisième niveau qui élargit les possibilités offertes par CSS 1 et 2.

La séparation des codes permet :
- de réduire la taille des fichiers HTML, qui ne contiennent plus que la structure et l’information. Le code est plus lisible.
- De centraliser le code css dans un fichier séparé, qui peut s’appliquer à l’entièreté d’un site plutôt qu’à une seule page. Il en découle un gain de productivité : un seul endroit où agir pour modifier le comportement visuel d’une page.
- Le code ainsi produit suit une norme plus claire, ce qui garantit une lecture plus facile à lire pour les navigateurs actuels et futurs. Le site est donc plus facile à maintenir et faire évoluer.

Définitions

Voici un exemple de code css :

h2 {
color:green;
font-size:22px;
}

est appelée règle css.

h2 est un sélecteur
color et font-size sont des propriétés
green et 22px sont des valeurs.

Enfin, font-size:22px; est une déclaration css

Placer le code css : 3 endroits possibles

Déclarer un comportement css dans une balise
Il est possible de changer la couleur d’un texte comme ceci :

<p style="color:red;">ceci est un texte en rouge</p>

l’attribut "style" permet en effet de déclarer le comportement css de la balise dans laquelle il est codé. Cette méthode, la plus "facile", est aussi laborieuse : les autres paragraphes de la page ne changeront pas de comportement, et si il y en a 10 que l’on désire modifier, il faudra écrire 10 fois l’attribut. De plus, ce n’est pas très "w3c" (on mélange html et css dans le même code et alourdit la page à force de définir chaque élément individuellement).

Déclarer un comportement css dans le head
La deuxième méthode est d’écrire dans le head de la page une série de déclaration css, comme ceci :

<style type='text/css'>
 h1 { font-size:18px; }
 p { font-size:10px; color: red; }
 </style>

On commence par les balises ouvrantes et fermantes qui permettent d’indiquer au navigateur que l’on va insérer des sélecteurs css. Ensuite on fait une première déclaration, "h1", et entre deux accolades, on déclare un attribut (font-size ou color, on en verra d’autres) et lui donne une valeur après les deux points (18px et red). On termine par le point virgule, qui sert de séparateur entre deux attributs.

On peut écrire aussi les déclaration comme ceci :

<style type='text/css'>
 h1 {
 font-size:18px;
 }

 p {
 font-size:10px;
 color: red;
 }
 </style>

Les retours à la ligne et les espaces ne sont pas pris en compte, on arrange le code à sa sauce. Les deux points, cependant, doivent rester collés à la déclaration ( "color : red" mais pas "color : red").

Cette méthode fait gagner du temps : le sélecteur "p" indique que l’on veut que tous les paragraphes vont recevoir le comportement visuel déclaré (une taille de 10px de haut et une couleur rouge, dans notre exemple). Et cela, où qu’ils setrouve dans la page, et quelle qu’en soit le nombre.
En outre, on l’a écrit à un seul endroit, facile à retrouver, l’entête de la page. Mais à chaque page du site on devra replacer ce code dans le head.

Créer une feuille de style séparée
Enfin, on peut lier un fichier séparé, portant l’extension .css, à la page css. On le fait dans le head de la page, comme ceci :

<link type="text/css" rel="stylesheet" href="lien_de_la_page.css" media="screen"/>

Dans la page liée, on déclare les comportements css comme vu précédemment :
h2 { color: red; }
L’avantage est multiple : on sépare css et html, on peut utiliser une même page de déclaration pour tout le site. Bref on gagne du temps.

Ajoutons que les 3 solutions (dans la balise, dans le head, dans une page séparée) peuvent coexister, et on peut associer plusieurs pages de déclarations css externes.

Quels sélecteurs employer ?

On peut utiliser principalement 3 types de sélecteurs :
- Les balises, peuvent toutes être déclarés : body, h1, p, div, etc. Peuvent tous recevoir des comportements visuels. Sauf cellex qui n’ont pas d’existence visuelle (comme head ou br par exemple...).
- on peut définir des classes. Une classe est un attribut de balise que l’on donne comme ceci :

<p class="important">un texte ici</p>

et en lui donnant un comportement visuel comme ceci :

<style type='text/css'>
 .important {
 background-color:yellow;
 }
</style>

Remarquez le point qui précède le nom de la classe dans la déclaration css. Il est obligatoire pour faire comprendre qu’il s’agit bien d’une classe.
On peut attribuer une classe à n’importe quel élément, on peut donner une même classe à plusieurs éléments, on peut même donner plusieurs classe à un même élément, comme ceci :

<p class="important grand">un texte ici</p>

- On peut définir des id. Un id est un identifiant unique d’un élément de la page qui se code comme ceci :

<p id="message">un texte ici</p>

et en lui donnant un comportement visuel comme ceci :

<style type='text/css'>
 #message {
 background-color:yellow;
 border:1px solid black;
 }
</style>

Remarquez la dièse qui précède le nom de l’identifiant dans la déclaration css. Elle est obligatoire pour faire comprendre au navigateur qu’il s’agit bien d’un identifiant.
Contrairement à la classe, on ne peut donner qu’un seul identifiant à un élément, et surtout on ne put utiliser un identifiant qu’avec un seul élément de la page. Tous les tags peuvent recevoir un id, qui est aussi utilisé avec le javascript.

La devise à se rappeler en toutes circonstances

Une phrase dont vous avez à vous souvenir en toutes circonstances :
"tous les éléments à l’exception de span et div ont un comportement par défaut"
Les liens (la balise a), par exemple, sont par défaut bleus et soulignés. Si vous ne redéfinissez que leur couleur, ils seront toujours soulignés.