On a vu comment créer une page en XHTML, voici maintenant les bases du CSS (Cascading style sheets ou Feuilles de Style en Cascade). Les feuilles de styles sont dorénavant un must dans le domaine du webdesign. Plus question, comme autrefois, d'éditer son fichier HTML pour y mettre des couleurs de police, des bordures doublement grasses ou des tableaux fluorescents !

Imagine le CSS comme un truc à part, pas dans le code, c'est beaucoup plus simple à comprendre. La partie XHTML est la structure et la partie CSS c'est le design et la mise en page (et le PHP, c'est le « moteur » en quelque sorte, mais ça, c'est pas pour maintenant).

Dans le CSS, on va y mettre, entre autres, les informations suivantes :

• La largeur de la page (possibilité de créer une page de largeur fixe ou dynamique, selon les goûts)
• La couleur de fond de la page et/ou du texte
• La police d'écriture
• Les bordures
• La couleur du texte, des titres, et de toutes les autres sortes de texte.

Avoir une feuille séparée a toute son utilité : il suffira par exemple de modifier la feuille de style pour que ça s'applique à toute la page ou site. Le contenu n'en sera pas du tout affecté, et c'est là toute la puissance de ce système.

Maintenant que tu sais à quoi ça sert, mettons les mains dans le cambouis.

Voici une partie de la section head d'une page d'accueil, la plus simple qui existe.

Voici donc comment on intègre une feuille de style CSS externe dans le XHTML.

Le CSS est placé sur la troisième ligne dans le tag link. On y met l'option href, qui définit l'URL de la feuille de style et les options rel et type qui contiennent toujours respectivement stylesheet et text/css (dans le cas du CSS).

Nous allons maintenant appliquer un style sur une page XHTML (regardez dans le dernier article pour une page XHTML simple).

Premièrement, ajoute le tag

Importation d'autres feuilles de styles

Bref, un fichier CSS peut être très court, ou alors vraiment très très très très long. Ça ne s'appelle pas Cascading Style Sheets pour rien, on peut imbriquer des feuilles de style ensemble pour que ça soit moins bordelique. On pourrait ainsi mettre tout ce qui concerne les couleurs dans couleurs.css, tout ce qui concerne le layout de la page dans layout.css, ce qui concerne des modules spéciaux auraient leur propre feuille de style, etc.

Pour importer une autre feuille de style, on metterait le code suivant, dans notre cas, dans style.css :

@import url(couleurs.css);
@import url(layout.css);

On créerait ainsi les fichiers couleurs.css et layout.css dans le même dossier que style.css.

Organisation du CSS

Il y a trois éléments dans une feuille de style. Premièrement, les balises, reprises du code XHTML. Ensuite, les propriétés, c'est-à-dire ce que l'on veut modifier. Finalement, la valeur de la propriété (de la balise). Plus clairement, voici la mise en forme :

balise {
   propriété: valeur;
   propriété2: valeur
}
/* Commentaire */

On peut mettre plusieurs propriétés dans une balise, on peut même imbriquer les balises de vingt milles différentes manières (enfin pas autant, mais c'est pour faire genre), les possibilités en CSS sont grandes.

Les commentaires se mettent entre /* et*/.

Il ne faut surtout pas oublier le ; entre les propriétés, et les { et } pour délimiter les balises.
Pour faire en sorte que tous les liens (balise … dans le code XHTML) soient gras, rouges, et non-soulignés, on ferait de quelle manière alors ?

Quelques propriétés en vrac

a { /*tous les liens*/
   font-weight: bold; /*en gras*/
   color:red; /*de couleur rouge, on aurait aussi pu utliser "color: #FF0000" */
   font-decoration: underline; /*soulignés/*
 }

html { /*toute la page*/
    background: #D0D0D0; /*c'est du gris clair*/
}
body { /*l'endroit ou c'est écrit*/
    width: 780px;
        /*largeur de la page. S'il n'y a pas de largeur, il ne va
        pas la centrer vu qu'elle prendra toute la fenêtre.*/
    margin:auto;
        /* auto = page centrée, on pourrait mettre 40px elle aurait
        une marge de 40px, et donc pas centrée. Essaie !*/
    border: 1px solid grey;
        /* Une bordure grise de 1px, du style solid (un trait simple) */
    background: white;
        /*C'est du blanc qui ira par dessus le gris foncé du html*/
} /*fin du paramètrage du body/*

html {
    background: #D0D0D0;
}
body {
    width: 780px;
    margin:auto;
    border: 1px solid grey;
    background:white;
}