Et maintenant, au tour du CSS de se trouver une place dans le XHTML !
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.
<head> <title>Index - monsitesurlinux.org</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head>
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 <link .../> complet ci-dessus dans ta page XHTML. Ensuite, crée un nouveau fichier style.css, toujours avec un gedit, bloc-note, vim, notepad++, tant que ça tape du texte brut. Notepad ++, est, en passant, une bonne solution sous Windows. Il permet l’affichage des couleurs pour s’y retrouver dans son code et d’autres trucs pratiques. Personnellement j’utilise vim quand je modifie mes fichiers web sur le serveur (Debian), et Geany en local (sous Ubuntu).
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 … <a> dans le code XHTML) soient gras, rouges, et non-soulignés, on ferait de quelle manière alors ?
Quelques propriétés en vrac
Facile :
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/*
}
Teste et regarde comme c’est joli. Oublie pas d’insérer des liens dans ta page quand même.
Si tu changes le lien a par le titre h1 dans ta feuille de style, ce seront les titres h1 qui s’afficheront de cette manière. Si une taille de police n’est pas définie (en l’occurence avec la propriété font-size), le navigateur prendra la tailla par défaut.
Teste et regarde comme c’est joli.
Maintenant, tu aimerais mettre ta page au centre, avec une largeur fixe de 780px; une bordure grise, le fond contenu blanc mais celui du site gris clair. On va utiliser les propriétés width pour la largeur, margin pour centrer la page, border pour la bordure et background pour les arrière-plans.
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/*
Et sans les commentaires invasifs :
html {
background: #D0D0D0;
}
body {
width: 780px;
margin:auto;
border: 1px solid grey;
background:white;
}
Teste et regarde comme c’est joli.
Si t’as écrit qu’une ligne de texte, tu peux essayer d’augmenter la hauteur du body en utilisant la propriété height (pour hauteur) en y spécifiant des pixels ou un pourcentage. Les propriétés height et width peuvent également s’utiliser sur des images.
Se rappeler de tous les détails du CSS n’est pas facile, et même les pros se dotent d’une feuille de rappel pour les propriétés les moins utilisées. Le site du Zero, comme toujours excellent, propose une liste explicative des propriétés CSS suffisante pour faire 99% du travail d’un webdesigner.
Maintenant que tu sais comment ça marche, il faut tester, rater, recommencer, réussir, être content, essayer du nouveau, rater, réussir, mais le plus dur, c’est de comprendre le système, et j’espère que je vous ai éclairé un peu.
Vu la quantité de documentation sur le net quant aux propriétés CSS, je ne vais pas m’attarder et te laisser trifouiller.
