Suite au premier tutorial sur le CSS, je vous rédige le suivant. Il vous permettra d'utiliser le CSS correctement.
Le css est placé dans les balises du xHTML (ou HTML, mais on va garder le xHTML qui se répend de plus en plus et il est plus apprécié des navigateurs et internautes).
Voici un exemple :
- Code: Tout sélectionner
<body>
<div class="site">Le titre du site
<div id="texte">Une partie de mon texte
</div>
</div>
</body>
On utilise des "class" ou les "id" mais "id" peut être remplacé par "class" (et reciproquement) dans la majeure partie des cas. Je vous recommande les class car leur utilisation est moins trompeuse dans le fichier .css. On reviendra sur la différence de class et id plus tard.
Comme vous pouvez le deviner, class="site" et class="texte" vont appeler certains parametres du fichier .css.
Voila la présentation "modele" du fichier .css :
- Code: Tout sélectionner
body
{
background-color:#000000; //couleur du background (fond)
color:#FFFFFF; //couleur du texte
}
div#titre
{
color:#FF0000;
font-family:Arial; //font de la police
}
.texte
{
font-size:12px;
width:80%;
font-family:Verdana; //font de la police
}
Vous remarquerez donc que dans le fichier css, tout est détaillé. Mais aussi que les attributs ne sont pas marqué de la même façon : Body pour la balise body n'est préceder de rien du tout, Titre est préceder de div# car on fait appel à lui grâce à "id" dans le fichier xHTML, Texte est précédé d'un point car on fait appel à lui grâce à "class" dans le fichier xHTML.
Lors d'emboitement de balises (comme ici), on garde les paramettres qui sont définis par id="titre" pour le tout puis on les change si class="texte" choisi d'autres definitions pour ces même parametres. Par exemple, Titre a mis la couleur #FF0000 (rouge) à tout le div. Comme Texte ne change pas ce parametre, il sera lui aussi en rouge. Mais Ce n'est pas le cas pour la font. le Titre sera en Arial alors que le Texte sera en Verdana.
Vous savez maintenant ce qu'est le CSS et comment on l'utilise. Mais il faut maintenant apprendre les différents parametres que l'ont peut mettre ou ne pas mettre dans le fichier .css.
