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.
Tout code CSS se compose toujours de la même façon :
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.
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 :
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.
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.
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.
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.
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 <abbrstyle=
'color
:#B7A5DF
'>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>
Cela produira le résultat suivant :
Cette méthode est simple, mais elle a plusieurs défauts :
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 <abbrstyle=
'color
:#B7A5DF
'>CSS3</abbr> avec du <abbrstyle=
'color
:#B7A5DF
'>HTML5</abbr></h1>
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 :
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.
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.
Si vous utilisez chacune de ses méthodes simultanément, ayez toujours en tête l'ordre dans lesquelles elles s'appliqueront :
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.