XHTML, c'est bien...mais XHTML+CSS c'est mieux!!!
Vous êtes content d'avoir pu créer votre première page Web (qui sait peut être votre site...) mais ne manque-t-il pas un peu de fantaisie et d'une touche personnelle dans vos pages?
Le CSS va nous permettre d'égayer un peu tout ça. C'est un outil puissant qui va vous permettre de structurer, colorer, tracer, organiser, personnaliser, embellir, illuminer, nuancer, orner... bref, à le rendre plus jolie et plus agréable à regarder.
Nous allons donc vous apprendre les bases du CSS mais devant l'étendu des possibilités offertes, nous vous laisserons découvrir par vous même le reste.
Coment utiliser le CSS
Le principe est simple, le CSS permet de personnaliser les balises XHTML en leur attribuant une couleur, une taille, une position... Ces personnalisations
seront effectuées sur tout ce qui ce trouve entre les balises concernées.
Il y a plusieurs manières d'ajouter du CSS à notre page XHTML.
CSS dans les balises
La première manière de procéder est d'ajouter directement dans la page XHTML
du code CSS, en plein milieu des balises. C'est une méthode qui peut vous sembler très simple (et elle l'ai) mais ce n'est pas la plus recommandée.
Il suffit de mettre l'attribut style et de mettre du code CSS comme valeur de l'attribut:
CSS dans l'en-tête de la page XHTML
Une deuxième méthode, beaucoup plus "correct", est de mettre notre CSS dans l'en-tête de la page XHTML, c'est à dire entre les balises
<head> et </head>. Il ne faut cependant pas mettre le code brut entre ces balises, il faut l'entourer des balises
<style> et </style>.
L'attribut type qui doit être mis dans cette balise, permet d'indiquer quel type de code sera contenu entre les balises.
Pour du CSS, il faut mettre "text/css".
<style> type="text/css"
C'est ici que vous allez mettre le CSS
</style>
Cette méthode est beaucoup plus propre et permet de mieux s'y retrouver (avouez que chercher la balise concernée au milieu d'une page pleine de code...c'est pas très sympa). De plus, cela vous permet d'utiliser un des gros avantages de CSS: vous pouvez appliquer un style non plus à une balise en particulier, mais à toutes les balises de même type. Par exemple, si vous modifier la balise <p>, toutes les balises <p> de votre page seront affectées par vos changements. Inutile de vous dire que c'est très pratique...
Fichier .css
Dernière méthode, la mieux à mon goût (mais ce n'est qu'un avis personnel), c'est de mettre le code CSS non plus dans le fichier XHTML mais dans un fichier extérieur avec l'extension .css. Ce fichier contient tout ce que vous auriez mis entre les balises <style>, rien de plus. Il reste tout de même une chose à faire, il faut indiquer à votre page XHTML qu'elle doit travailler avec le fichier CSS que vous avez créé. Pour cela, il faut ajouter une ligne entre les balises <head>:
Quelques petites explications: les attributs de cette balise qui nous intéressent sont type, qui est le même que celui vu dans la méthode précédente.
title, qui sert simplement à donner un nom à la feuille de style utilisée. href, que vous devez connaître puisqu'il s'agit
du même attribut pour les liens en XHTML, il sert à indiquer où se trouve votre fichier .css.
L'avantage majeur de cette méthode, c'est que vous ne touchez pas à votre code XHTML. Une fois le fichier XHTML créé, il n'y aura rien à modifier à
l'intérieur, vous ne modifierez que le contenu de votre fichier .css pour effectuer votre mise en page. Grâce à cet avantage, il est possible de définir
plusieurs fichiers .css pour une même page Web et ainsi de modifier l'apparence de votre site d'un clic (ou un peu plus...). Pour cela il faut indiquer dans
votre page XHTML qu'il existe plusieurs fichiers .css associés à cette page. Et bien rien de très compliquer, il suffit d'ajouter une nouvelle balise
<link/>, seul un attribut va changer. Par exemple pour associer un fichier design.css et un fichier design2.css à une même page, voici les 2 balises qu'il faut écrire:
<link rel="alternate stylesheet" media="screen" type="text/css" title ="Design2" href="../design/design2.css" />
Vous pouvez mettre autant de "alternate stylesheet" que vous voulez. Si vous avez 10 designs différents, il vous suffira de mettre un premier link pour le design principal, puis 9 autres mais avec comme valeur de l'attribut rel, "alternate stylesheet". Ainsi, pour changer de design, il ne restera plus qu'à le sélectionner dans votre navigateur internet. Pour firefox, il suffit de faire AFFICHAGE -> style de la page et de choisir parmis tout vos fichiers .css.
Syntaxe du code CSS
Jusqu'ici nous avons uniquement abordé les pré requis pour faire du CSS, il est temps de passer à la pratique.
Comme je vous l'ai dis plus haut, le CSS personnalise les balises. il faut donc d'abord mettre le nom de la balise que l'on veut modifier
(mais sans le < et le >) puis mettre les modifications entre crochet ({ et }).
Un exemple, pour modifier la balise <p>, ça nous donne à peut près ça:
{
ici vous mettrez les attributs CSS
}
Personnaliser les balises existantes c'est bien, mais on est très vite limité car chaque fois que l'on veut modifier l'apparence d'un bout de
notre page, il faut que cette partie soit entourée par des balises. Pour pouvoir vraiment tout personnaliser, il existe des balises qui ne servent à rien...
Enfin en XHTML elles ne font rien mais sont très pratiques pour le CSS. Il s'agit des balises couples <div>Type Block et
<span>Type Inline.
Comme vous pouvez le voir en passant le curseur de la souris sur ces balises, l'une est de
type block, l'autre de type inline. Vous pouvez donc utilisé ces balises un peu partout dans votre code XHTML.
Vous l'aurez donc deviné, le fait d'ajouter du CSS va beaucoup modifier
la structure de la page XHTML. Pour vous en convaincre, il suffit de regarder le code source de cette page (faites un clic droit sur cette page et fates "code source de la page",
enfin si vous utilisez firefox...). Et oui, les <span>Type Inline et les <div>Type Block, dans une page XHTML, ça pousse un peu partout.
De plus pour différencier les <div>Type Block et les <span>Type Inline les uns des autres
et ainsi créer autant de balises que vous le souhaitez, il faut utiliser les attributs class ou id.
Ces deux attributs sont universels et peuvent être utilisés dans toutes le balises.
Ils s'utilisent quasiment de la même manière: ils servent à mettre une étiquette
à une balise, ainsi, dans notre code CSS il suffira de dire "modifie moi la balise avec l'étiquette suivante". La seule différence entre les class et les id est qu'un class
peut être utilisé plusieurs fois avec la même étiquette, contrairement à l'attribut id qui lui ne s'utilise qu'une seule fois avec la même étiquette.
Dans le code CSS, pour modifier une balise avec une étiquette class, il faut mettre .étiquette (il ne faut pas oublier le point!) suivi des attributs CSS entre accolade comme vu précédemment.
Lorsqu'il s'agit d'une étiquette id, il faut remplacer le point par le symbole # (dièse) ce qui donne #étiquette.
Il est possible d'appliquer les mêmes modifications à plusieurs balises et/ou plusieurs étiquettes, il suffit de les séparer par une virgule. Il est
également possible de faire des inclusions (vous comprendrez mieux avec un exemple), il suffit de mettre un espace entre chaque élément de l'inclusion.
Un exemple sera plus parlant:
{
attributs CSS
}
Dans cet exemple, les attributs CSS seront appliqués:
- aux balises dont l'étiquette class est exemple, situées entre les balises <p> et </p>
- aux balises <p> dont l'étiquette est exemple
- à LA balise dont l'étiquette id est exemple2 (attention, la balise dont l'étiquette id est exemple2 n'est pas précisé, il ne s'agit pas forcement d'une balise <p>)
