Voici un chapitre très original et vachement prometteur
Un chapitre qui va bouleverser toute votre vie
Je suis certain que vous avez commencé à en avoir assez avec le langage XHTML
C'est pour cette raison que j'ai décidé d'entamer une nouvelle partie à savoir les CSS.
Introduction aux feuilles de styles (CSS : Cascading Style
Sheet)
Vous vous souvenez des CSS (Cascading Style Sheet) dont je vous ai parlées dans les chapitres précédents, l'heure est venue de les passer à la loupe.
En français CSS veut dire feuilles de style en cascade : on les appelle ainsi car on place le plus souvent les styles CSS dans une feuille externe au document XHTML.
L'expression "en cascade" signifie que lorsqu'une balise à reçu divers styles dans des contextes différents (dans une feuille de style externe, dans l'en-tête du document ou directement avec l'attribut style) le navigateur va appliquer un ordre de priorité pour ne garder en définitive qu'un seul style. C'est ce qui matérialise la notion de cascade des styles CSS ou ordre de priorité.
La syntaxe et le développement des deux langages XHTML et CSS sont entreprises par le W3C (world wide web consortium). Le W3C est un consortium crée en octobre 1994 qui a pour but d'assurer la standardisation des technologies du world wide web telles que HTML, XHTML, XML, CSS etc. Le W3C n'émet pas des normes au sens strict du terme, mais des recommandations qui peuvent être
respectées ou non. En d'autres termes il s'agit d'un standard librement utilisé.
A l'instar du HTML qui a passé par plusieurs versions avant de devenir XHTML (HTML 1.0, HTML 2.0, HTML 3.0, HTML 4.0). Les CSS ont vu le jour en 1996 avec la version CSS 1.0, puis en 1998, la version CSS 2.0 a reçut le statut de recommandation, et plus
récemment le W3C a donné naissance à une version CSS3.
Le W3C a prévu un langage de style pour chaque langage de balisage :
- les CSS pour le XHTML ;
- le XSL pour le XML ;
- le DSSSL pour le SGML.
Au même titre qu'un document XHTML. Une feuille de style est aussi rédigée avec un éditeur de texte, et lorsqu'on dit éditeur de texte on fait allusion à un éditeur ASCII comme le
fameux bloc-notes (ou équivalent dans les autres plateformes comme simpletext sur
Macintosh), et non pas au Microsoft Word ou tout autre logiciel de traitement de texte.
Cette feuille qu'on va rédiger va comporter l'apparence et le design de notre site et pour s'en servir on va insérer la balise link dans l'entête de notre fichier XHTML c'est à dire entre le couple : <head> </head>. Cette balise va indiquer au navigateur où aller chercher cette feuille de styles. Lorsqu'on crée notre code CSS dans l'éditeur bloc-notes,
Notepad++ ou carrément Dreamweaver ou FrontPage, on va attribuer à notre fichier l'extension (.css) pour que
Windows et les navigateurs puissent l'identifier.
Les avantages des CSS
- la séparation du fond (contenu) et de la forme (présentation et apparence) : Les CSS nous permettent de définir l'apparence du site (couleur et taille de la police, les marges, les alignements, le fond de la page etc.) dans une feuille externe au document XHTML qui, quant à lui ne doit contenir que le fond (les éléments affichées par la page web : texte, images etc.)
Auparavant on se servait de quelques balises et attributs qui sont actuellement en cours d'abandon pour mettre en forme les éléments de la page, par exemple :
L'attribut align permet d'appliquer un certain alignement. Exemple :
<img src="save.gif align="right" /> ou bien <p align="justify"> du texte </p>.
La balise <font> (font : police en français) permet de spécifier la famille, la taille et la couleur de la police. Exemple :
<font face="Arial" color="red" size="4">Bla
Bla</font>
La balise <center> permet de centrer du texte, une image etc. Par exemple :
<center><img src="save.gif" /></center>.
La balise <u> (underline) a pour rôle de souligner du texte. Par exemple :
<u>
Bla Bla </u>.
La balise <strike> permet de barrer un texte.
Après l'apparition des feuilles de style, plusieurs balises et attributs obsolètes s'apprêtent à quitter le langage XHTML qui consiste à structurer du contenu, l'apparence étant confiée aux CSS.
Grosso modo les CSS vont nous permettre de créer une feuille de style externe qui contient la
forme du site, pour permettre au XHTML de se focaliser plus sur sa fonction inhérente, qui consiste à envelopper le contenu de la page Web, ceci contribuera
énormément à améliorer la lisibilité du code que ce soi celui du fond ou de la forme. Si jamais un jour on envisage un changement ou une mise à jour du site on va pas se perdre dans le code.
Pour vous inculquer de bonnes pratiques de codage. Je vais éviter au maximum de parler des attributs
abandonnés et des balises dépréciées (tags deprecated) lors des prochains chapitres. Donc je vous conseille d'apprendre à bien coder et à se conformer aux
recommandations du W3C.
- l'utilisation des feuilles de style facilitent énormément les mises à jour de votre site, surtout en termes d'apparence et de design. Au lieu de fouiller dans toutes les pages d'un site l'une après l'autre pour changer les balises et les attributs de présentation, on aura qu'à modifier une seule feuille qui comporte le code CSS, et le design du site changera entièrement en un clin d'œil, fastoche, avouez-le.
- accéder à d'autres possibilités de mise en forme non disponibles en xhtml (notamment : l'interligne : distance entre les lignes, les marges, le positionnement au pixel près
d'éléments dans la page web, le mode d'affichage : none, inline, block etc.).
- le recours à une feuille de style permet de réduire considérablement la taille des fichiers XHTML (on aura plus besoins de certains attributs et balises). En plus une feuille de style n'est téléchargée qu'une seule fois (car elle sera stockée dans le cache du navigateur), et reprise par plusieurs pages web, ce qui va réduire le temps de chargement des pages et puis d'accélérer votre site et fidéliser vos visiteurs

- Pouvoir proposer un site multi design est rendu possible avec les feuilles de style. En fait vous pouvez créer plusieurs document CSS, chacun contenant un design, et puis le visiteur va choisir à sa guise quelle feuille de style appliquer, soit à partir du menu affichage (view) / Style de la page, ou grâce à un script côté serveur (PHP ou ASP).
- pouvoir adapter l'apparence de la page web avec le média de sortie, autrement dit vous pouvez créer une feuille de style pour l'écran d'ordinateur, une pour l'impression, une autre pour la télévision etc.
Ceci est de nature à accroître l'interopérabilité de votre site avec les différents outils informatiques.
Ok c'est chouette la petite introduction aux CSS, mais comment faire pour exploiter une feuille de style avec un document XHTML
Très bonne question. C'est justement ce à quoi le prochain chapitre est consacré (intégrer des styles CSS dans un document XHTML).