Sites


CSS3

Mettre en forme le HTML grâce au CSS

Commençons par la base du CSS. C'est un code écrit dans un langage qui vient compléter un code écrit dans un autre langage. Il est donc presque impensable de vouloir apprendre le CSS sans avoir des notions fiables en HTML. Ensuite, le CSS aura une syntaxe beaucoup plus simple que le HTML, mais la quantité d'éléments de mise en forme rajoutent peu à peu à la complexité. Nous commencerons ici par des exemples simples de manière à bien montrer les principes de base, puis nous nous étendrons au fil de ce livre sur les capacités du CSS.

Structure de base d'un code CSS

Tout code CSS se compose toujours de la même façon :

  1. il faut dire où ou à quoi le changement va s'appliquer (titre, paragraphe, lien, image..),
  2. il faut dire quels sont les changements à appliquer (police, couleurs, fond…),
  3. et comment caractériser ces changements.

En CSS, cela prendra la forme principale suivante :

propriété_css : valeur;

ou dans des cas plus fréquents et conseillés :

sélecteur { propriété_css : valeur; }

Les propriétés sont l'ensemble des types de changement que l'on peut opérer et la valeur comment ce changement s'opère. Le cas échéant, le sélecteur dit sur quoi le changement prendra effet.

Ce principe simple ouvre ensuite toutes les portes du CSS qui n'est que répétition d'instructions de ce type :

Dans cet exemple, de nombreuses propriétés sont utilisées et appliquées à des parties différentes de la page HTML, identifiées par la balise de référence. Nous verrons dans la partie sur les sélecteurs qu'il existe de nombreuses autres possibilités. Remarquons d'emblée certaines propriétés récurrentes :

color qui prend ici les valeurs #555753 , #7D775C , #B7A5DF ou #D4CDDC et change la couleur du texte (nous verrons ultérieurement comment définir ces couleurs).

font-weight qui prend ici la valeur bold opposée à normal qui applique ou non du gras.

text-decoration définie comme underline ici et none par ailleurs qui souligne ou non le texte.

Remarquez au passage que chaque propriété se termine par un point-virgule. Pensez à le mettre systématiquement sinon vous aurez de mauvaises surprises.

La liste des propriétés est disponible sur le site du W3C. Elle est cependant longue, très longue et avec peu d'exemple, et surtout organisée de façon technique, non pédagogique. Nous verrons dans ce livre les principales propriétés et nous donnerons systématiquement des exemples d'utilisations pour mettre en évidence leur usage. Nous nous attarderons en particulier sur les sélecteurs qui sont d'une puissance extraordinaire, souvent méconnus, mais tout aussi essentiels que les propriétés graphiques.

Vérifier et valider le code CSS

En écrivant du code CSS, vous ferez certainement des erreurs. cela n'est pas grave en soit. Toute erreur se corrige. La difficulté est cependant de pouvoir trouver ses propres erreurs. Souvent, nos propres erreurs nous sont invisibles car nous ne regardons pas au bon endroit, et les erreurs ne sont pas nécessairement là où nous le pensons. Les erreurs fréquents sont les suivantes :

  • oubli d'un point-virgule en fin de ligne
  • interversion d'un . et d'une virgule (dans les décimaux par exemple)
  • confusion entre parenthèses () et accolades {}

En CSS, une erreur de code ne bloque pas la page. La mise en forme est cependant desactivée à partir de l'instruction erronée pour le bloc d'instruction en cours. En détectant ce qui ne marche pas, on peut donc trouver où est l'erreur. Souvent, elle est placée sur une ligne qui précède, ce qui engendre une confusion pour l'interpréteur, d'où l'erreur.

Enfin, si vous n'y arrivez pas seul, aidez vous de la coloration syntaxique, car la plupart des éditeurs de code, en colorant vous aide à mieux repérer le statut des codes écrits, mais apr extension, si la couleur du cde n'est pas celle attendue, c'est certainement qu'il y a quelque chose de louche.

Erreur de coloration syntaxique dans Gedit

Enfin, vous pouvez toujours avoir recour au validateur en ligne sur jigsaw : http://jigsaw.w3.org/css-validator/

Par exemple, en collant le code erroné ci-dessus dans la fenêtre de saise directe de jigsaw

Nous obtenu l'erreur suivante.

Afficahge des erreurs - error CSS

Le numéro correspond au numéro de ligne dans le fichier

La seconde colonne mentionne "body", soit le sélecteur sur lequel une erreur est trouvée

Enfin, la propriété écrite telle que trouvée avec sa valeur.

 

Appliquer le CSS au code HTML

Le vrai premier problème que nous avons lorsque nous souhaitons utiliser du CSS est d'arriver à relier le code CSS au code HTML. Ayons toujours en tête que ces deux langages sont interprétés par le navigateur du visiteur (dit client) et que toute imprécision à la conception peut conduire à des rendus différents, parfois non souhaités.

Imaginons que nous ayons une portion de code HTML de ce type :

<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>

<p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a
href=«http://w3.org»> W3C </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <abbr>HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p>

<p>Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.</p>

Il existe plusieurs façons d'appliquer du CSS à ce code. Nous commencerons par la plus simple, mais pas la plus conseillée.

Utiliser l'attribut style

La façon la plus simple, mais pas nécessairement celle qui est recommandée, consiste à ajouter le code CSS dans le fichier HTML à l'endroit où l'on souhaite appliquer la modification.

Ainsi pour changer la couleur de CSS3

<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>

 deviendrait dans un premier temps :

<h1>Utiliser du <abbr style=''>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>

 puis d'y appliquer le changement voulu :

<h1>Utiliser du <abbr style='color:#B7A5DF'>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>

  Cela produira le résultat suivant :

Utiliser du CSS3 avec du HTML5

Cette méthode est simple, mais elle a plusieurs défauts :

  • elle peut être longue à appliquer si on veut faire la même chose sur tous les mots à mettre en évidence. Il faudrait trouver un moyen pour appliquer à plusieurs mots simultanément ;
  • elle implique de recopier plusieurs fois le même code dans le fichier HTML, ce qui est d'autant plus navrant et alourdit le fichier HTML ;
  • elle sera source d'erreur, car à force de changer ici et là dans le code de la page web, nous ferons nécessairement des erreurs qui prendront du temps à corriger.

La complexité rien que sur ce titre augmente de plus de moitié la quantité de code à saisir et diminue d'autant la lisibilité de l'information (le titre réel) dans le code :

 

<h1>Utiliser du <abbr style='color:#B7A5DF'>CSS3</abbr> avec du <abbr style='color:#B7A5DF'>HTML5</abbr></h1>

Utiliser l'élément style et des sélecteurs

La méthode précédente appelle donc des perfectionnements. Une méthode intermédiaire peut consister à écrire le code CSS en entête de fichier HTML de manière à le rendre disponible pour l'ensemble de la page :

<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>

 deviendra :

 

<html>
  <head>
    <style>
    </style>
   </head>
   <body>
     <h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>

Nous sommes contraint dans un premier temps de vérifier la bonne conception de notre page web en ajoutant les balises nécessaires. Nous pouvons alors ajouter le style voulu à l'intérieur de la balise style :

<html>
  <head>
    <style>
      abbr { color:#B7A5DF; }
    </style>
   </head>
   <body>
     <h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>

  Ce qui produit dans le navigateur :

 

Utiliser du CSS3 avec du HTML5

Cette méthode est déjà plus intéressante, car tous les abbr de la page vont se retrouver modifiés ce qui va représenter une économie d'effort considérable et une assurance de permanence dans la page. Mais cela n'est pas suffisant, car comment faire sur un site complet pour retrouver le même aspect. Nous pourrons le copier dans chacune des pages, pour sûr, mais devrons nous faire cela sur les milliers de pages, une à une ? Certainement pas.

Utiliser une feuille de style externe

La dernière étape consiste donc à externaliser le code CSS de manière à ce qu'il soit partager sur l'ensemble du site. Ainsi toute modification appliquée au style s'appliquera à l'ensemble du site.

Commencez donc par créer un nouveau fichier dans votre éditeur de texte et enregistrez le dans un dossier si possible proche de votre document HTML, en général avec l'extension .css.

Copiez ensuite le code CSS précédent

abbr { color:#B7A5DF; }

dans ce fichier et enregistrez.

Dans le fichier HTML, effacez l'intégralité de la balise style si ce n'est déjà fait et écrivez la ligne qui servira au fichier HTML à identifier le fichier CSS à utiliser :

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

Enregistrez la page HTML et vous devrez immédiatement voir vos modifications s'appliquer à l'ensemble des balises concernées. Si vous créez de nouvelles pages avec la même mention, ces feuilles de style s'y appliqueront aussi immédiatement.

Cette dernière méthode est évidemment celle qui est recommandée par défaut, car elle constitue le meilleur rapport effort-résultat.

Ordre d'application de la mise en style

Si vous utilisez chacune de ses méthodes simultanément, ayez toujours en tête l'ordre dans lesquelles elles s'appliqueront :

  1. d'abord, le navigateur charge les styles du fichier externe et se prépare à les appliquer. Ils les apposera par défaut à tous les éléments rencontrés ;
  2. si le navigateur rencontre des balises styles il va interpréter le contenu, va rajouter les nouveaux éléments de styles spécifiques à cette page dans sa mémoire pour les appliquer correctement. S'il arrive qu'une balise déjà stylée dans la feuille externe soit rencontrée ici, il va en remplacer les premières valeurs par les secondes;
  3. enfin, si un attribut style est appliqué, il primera toujours, même si des feuilles de style ont déjà été définies au niveau global. Cela permet évidemment d'appliquer des changements ponctuels au besoin.

Cependant, la pratique courante est plutôt de mettre la totalité des définitions de style dans une feuille externe et de limiter au strict minimum la modification du fichier HTML. Ne pas définir le style dans le fichier de contenu est un principe de base qui permet d'assurer la bonne organisation du travail et d'éviter les conflits potentiels.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.