Les bases du langage CSS 3
II – Comment appliquer un style
Pour appliquer des styles, on utilise des balises HTML accompagnées d'attributs si nécessaire, appelées sélecteurs.
• Pour appliquer un style à toutes les balises d'un type donné
Dans ce cas, le style est appliqué automatiquement à toutes les balises du type balise1.
/* dans la feuille de styles css */
balise1{
propriete1: valeur1;
propriete2: valeur2;
}
Si on veut appliquer le même style à plusieurs types de balise, il suffit de remplacer balise1 par une liste de balises balise1, balise2, ...
• À une balise en particulier
Dans ce cas, on peut placer l'attribut id muni d'un identifiant lié à la définition du style à appliquer, dans la balise concernée par le style.
/* dans la feuille de styles css (ne pas oublier le # qui précède style1) */
#style1{
propriete1: valeur1;
}
<!-- dans la page html -->
<h2 id="style1"> Mon cours </h2> <!-- appel du style1 déclaré dans le fichier styles.css -->
• À un élément sans balise
- Si l'élément est contenu dans une ligne, on l'encapsule avec la paire de balises HTML
<span id="style1">...</span>. On dit que la balise span est de type inline. Le style style1 est déclaré dans la feuille de styles. - Si l'élément est un bloc de texte, on l'encapsule avec la paire de balises HTML
<div id="style1">...</div>. On dit que la balise div est de type block. Elle provoque automatiquement un retour à la ligne. Le style style1 est déclaré dans la feuille de styles.
Il existe beaucoup d'autres sélecteurs que l'on peut consulter à l'adresse : https://developer.mozilla.org/fr/docs/Web/CSS/Reference