Tout pour ton blog

Je vous en avez déjà parlé, et bien maintenant c'est pour de vrai !
On va enfin pouvoir gérer le design de notre site web, parce qu'un page blanche c'est quand même pas super ^^
Pour ça, on utilise le CSS, qui signifie "Cascading Style Sheets". en français, ça peut se traduire par "Feuilles de style en cascade". Pourquoi feuille de style ? Parce que généralement, on écrit le CSS dans un fichier à part. On y décrit l'apparence de notre site : couleur, taille, position, images de fond etc ...
Avec ça, on va pas d'ennuyer, croyez moi ^^

Où mettre le CSS ?

On peut mettre le CSS à 3 endroits, le 1er étant le plus recommandé :

- Dans un autre fichier qui aura l'extension .css :

    Le plus souvent, on écrit le CSS dans un fichier à part. C'est la méthode la plus pratique que l'on va utiliser tout le temps. Elle a beaucoup d'avantage, notamment de pouvoir laisser choisir le visiteur entre plusieurs design.
Si votre éditeur est Notepad++ , n'oubliez pas d'aller dans le menu "Langage" et de choisir "CSS" pour coloriez votre code.
Il faut aussi pensez à enregistrez le fichier avec l'extension .css et non pas .html comme les fichiers XHTML.
Il faudra ajouter un lien dans votre page .html, entre les balises <head></head> :

<link rel="stylesheet" media="screen" type="text/css" title="Design bleu" href="bleu.css" />

La balise <link /> comporte plusieurs attributs, vous pouvez seulement en changez 2 :
- title : c'est le titre de votre design. Appelez le comme vous voulez.
- href : il indique l'adresse de votre fichier CSS en relatif. Je vous conseille de le mettre dans un sous dossier, mais à vous de voir.

- Directement dans le header du fichier .html :

    Cela consisite à taper le CSS entre les <head> </head>, en ajoutant une balise <style> </style> .
Cette méthode n'est pas très pratique, car elle ralentit le chargement de vos page web.
Donc, encore une fois, utilisez seulement la 1er méthode.

- La méthode "brute" dans les balises :

    C'est la dernière méthode et la moins conseillée. Elle consisite à rajouter un attribut style à une balise et de mettre le CSS dedans.
Elle ne vous permettra pas de bénéficier des nombreux avantage du CSS, comme changer toutes les balises d'un seul coup par exemple. En plus, le code sera très peu lisible. Mais c'était juste pour vous dire que cette méthode exisite.

Voila, vous connaissez les 3 méthode pour mettre du CSS, mais n'utilisez que la 1er méthode ( je sais je me repette ^^ ) car c'est la plus éfficace et la plus simple !

Un style à des balises

Dans un fichier CSS, on trouve 3 choses différentes :

- Les noms des balises : c'est le nom des balises qu'on veut modifier. Par exemple, si je veux changer tous les liens, je mettre a .
- Des propriétés CSS : apprès avoir indiquer quelles balises modifier, il faut dire ce qu'on veut changer : la couleur, la taille ... Il y a énormément de propriété CSS, mais vous n'aurez pas à toutes les retenir, à moins que j'ai une soudaine envie de cous martyrisez ... ^^
- Les valeurs : c'est bien joli de dire qu'on veut changer la couleur, mais encore faut-il dire en quelle couleur. Les valeurs sont la pour ça ;)

En gros, un fichier CSS ressemble à ça :

balise1
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
}

balise2
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
propriete: valeur;
}

balise3
{
propriete: valeur;
}

On répère les propriétés et les valeurs dont on a parlé. Comme vous le voyez, on met le nom de la balise, on ouvre les accolades, on met autant de proprité et de valeurs que l'on veut ( au moins 1 sinon ça servirait à rien ^^ ) et on referme l'accolade.
Chaque propriété est suivie du symbole "deux-points" (:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un point-virgule (;) .

Le point virdule n'est pas obligatoire si il n'y a qu'une seule propriété, mais il vaut mieux prendre l'habitude d'en mettre, c'est plus prudent ;)

Nous apprendrons de nombreuses propriété dans les chaptires suivants. Pour l'instant, on va juste en utiliser 2 ou 3.
Imaginons que je veuille metre tous mes paragraphes en rouge, avec une taille de 20 pixels ( imaginons ^^ ). Comme tous mes paragraphes sont entre <p> et </p>, je devrais mettre :

p
{
    color: red;
    font-size: 20px;
}

Attention : ne mettez pas d'espace entre 20 et px, sinon le code CSS ne fonctionnera pas !

Enregistrez sous "essai.css" .
Créez un fichier XHTML banal, et ajoutez lui la balise <link />, avec l'adresse de votre fichier .css .
Essayez... Tadaaam, vos paragraphes sont en rouges et ont une taille de 20 pixels ! Surprenant, hein ? ^^
Ce qui est super, c'est que vous pouvez comme ça changez l'apparence de votre page entière en 1 seul coup ! Si c'est pas beau, ça !

Appliquer un style à plusieurs balises :

Voila le code suivant :

h1
{
color: red;
}

h2
{
color: red;
}

Il signifie "Les balises h1 sont en rouge, les balises h2 sont en rouge" . Et imaginez que vous voulez que tous vos titres soient en rouges... C'est long et répétitif .
Heureusement, il existe une manière beaucoup plus courte d'écrire la même chose :

h1, h2
{
color: red;
}

Il suffit de séparer les noms par des virgule.
C'est beaucoup plus rapide, non ?

Des commentaires en CSS :

Eh oui, en CSS aussi on peut mettre du commentaire ! Comme pour le XHTML, ils ne seront pas affichés et seront seulement des repère pour vous.
Donc, pour faire des commentaires, on utilise /* votre commentaires ici */
Il peuvent être sur plusieurs lignes, ou sur une seule.

Voila, vous en apprendrez encore plus dans le chapitre suivant !