Feuilles de style css
Ce sont les feuilles de style qui donnent à votre site l'aspect que vous voulez lui donner.
Appliquer un style à une balise
Il faut déterminer la balise et le ou les style(s) qui seront appliqués. Exemple: vous souhaitez que les textes de TOUS les paragraphes soient en rouge.
p{color:#ff0000;}
Vous pouvez associer des styles à un grand nombre de balises XHTML.
Appliquer un style à un élément
Il faut s'aider des attributs id et class qui sont à placer au sein de votre code XHTML.
l'attribut id :
Vous souhaitez qu'un SEUL de vos paragraphes ait un style particulier.
Votre code XHTML:
<p id="texte_rouge">votre texte sera en rouge</p>
Votre code CSS:
#texte_rouge{color:#ff0000;}
NB: un attribut id est toujours unique, vous ne pouvez avoir deux fois id="texte_rouge" dans votre page XHTML.
l'attribut class:
Vous souhaitez que plusieurs de vos paragraphes mais pas tous soient en rouge.
Votre code XHTML:
<p class="texte_rouge">seuls les paragraphes qui auront l'attribut class="texte_rouge" seront écrits en rouge</p>
<p class="texte_rouge">seuls les paragraphes qui auront l'attribut class="texte_rouge" seront écrits en rouge</p>
<p>votre texte sera en noir(couleur par défaut)</p>
Votre code CSS:
.texte_rouge{color:#ff0000;}
Appliquer un style à un bloc :
la balise div est un bloc, il s'agit d'une boite dans laquelle on peut insé d'autres éléments comme des paragraphes, des liens ou des images ou ce que vous voulez d'autres. La particularité d'un bloc est qu'à sa fermeture les éléments suivants passent à la ligne.
Votre code XHTML :
<div>vous mettez ce que vous voulez dedans,
aussi bien des p, des img, des a et du texte selon vos envies</div>
Vous pouvez moduler vos div comme vous l'entendez pour la mise en page de votre page à l'aide des attributs id ou class.
Appliquer un style à des éléments en ligne :
Si vous souhaitez appliquer des effets de styles à des mots se trouvant dans une phrase, mais que vous ne voulez pas modifier toute la phrase, vous pouvez utilisez la balise span et à l'intérieur de celle-ci indiquer un attribut class ou id.
Votre code XHTML :
<p>Il n'y a que les mots situés dans la balise span
qui seront <span class="texte_rouge">en rouges</span>dans cette phrase.</p>
Votre code CSS:
.texte_rouge{color:#ff0000;}
NB: Il est à proscrire d'utiliser des espages dans les valeurs des id et des class, car si vous insérer des espaces entre les mots, c'est le premier mot qui sera interprété comme valeur.
