Les éléments HTML peuvent être stylisés de différentes façons. Voici les grandes lignes qui vous aideront à bien cibler le ou les éléments qui seront affectés par un style.
Dans sa forme la plus simple, le style sera appliqué directement à une balise, à une classe ou à un identifiant. Le choix de l'un ou de l'autre dépend de la portée que l'on désire donner au style.
Voici comment y parvenir en pratique.
Si le style doit être appliqué à toutes les occurances d'une balise donnée, simplement nommer la balise dans la feuille de style.
Ex : Dans le fichier HTML :
<h1>Loisirs</h1>
Dans la feuille de style :
h1 {
...
}
Si plusieurs éléments de la page Web doivent avoir un style donné, on peut utiliser une classe.
Pour référer à une classe du fichier HTML, on fera précéder son nom par un point dans la feuille de style.
Ex : Dans le fichier HTML :
<li class="menuactuel">
Dans la feuille de style :
.menuactuel {
...
}
Il est également possible d'affecter un style à une balise spécifique en utilisant son id. On fera précéder son nom par un # dans la feuille de style.
Ex : Dans le fichier HTML :
<section id="principal">
...
</section>
Dans la feuille de style :
#principal {
...
}
Il est possible de définir un style particulier pour une balise imbriquée dans une autre. Par exemple, on pourra avoir un style pour <h1> imbriqué dans la section principal et un autre lorsque la balise est imbriquée dans la section secondaire.
Dans la feuille de style, il n'est pas possible d'imbriquer des éléments. Plutôt, on définiera le style en précisant la suite des éléments en laissant un espace entre les deux éléments.
Ex : Dans le fichier HTML (notez l'imbrication du <h1> dans le <section>) :
<section id="principal">
...
<h1>Zone principale</h1>
...
</section>
Dans la feuille de style (notez qu'il n'y a pas d'imbrication des règles CSS, seule l'utilisation d'un espace indique l'imbrication dans le HTML) :
#principal h1 {
...
}
Si plusieurs éléments doivent avoir le même format sans qu’il y ait nécessairement de lien entre eux, on pourra définir les formats communs en un seul temps en séparant les éléments par une virgule.
Ex : Dans la feuille de style :
/* définition des caractéristiques communes */
#principal h1, #principal h2 {
...
}
/* définition des caractéristiques propres */
#principal h1 {
...
}
/* définition des caractéristiques propres */
#principal h2 {
...
}
Dans cet exemple, les éléments h1 et h2 dans la balise dont le id est principal pourront avoir des caractéristiques communes, comme la police, par exemple. On définira ensuite la taille de chacune pour différencier les titres h1 des titres h2.
Parfois, on voudra appliquer plusieurs classes sur un élément. Par exemple, on pourrait avoir une division qui permet d'afficher un message d'information. On lui affectera la classe message, qui contient les règles CSS pour tous les types de message puis la classe information qui contient les règles pour les messages d'information.
Ex : Dans le fichier HTML (notez l'utilisation de l'espace pour séparer les deux classes) :
<div class="message information">
...
</div>
À la base, ceci suffit pour que les styles des deux classes soient appliqués à l'élément. Cependant, si on veut ajouter un style précis pour les éléments qui contiennent ces deux classes, il est possible de faire un ajout dans la feuille de style.
Dans la feuille de style (notez que les deux classes appparaissent collées puisqu'elles s'appliquent au même élément) :
.message {
...
}
.information {
...
}
.message.information {
...
}
On a vu qu'il était possible d'appliquer un style à toutes les occurances d'une balise donnée, par exemple styliser tous les titres h1. Mais comment fera-t-on pour styliser une boîte de saisie différemment d'un bouton, sachant que tous deux sont affichés à l'aide d'une balise input ? Ce sera possible grâce aux sélecteurs d'attributs qui consistent à placer entre crochets carrés le nom de l'attribut suivi de sa valeur.
Ex : Dans le fichier HTML :
<input type="text" id="usager" name="usager" />
...
<input type="submit" id="soumettre" name="soumettre" value="Soumettre" />
Ex : Dans la feuille de style (notez qu'il n'y a pas d'espace avant le crochet carré) :
...
}
input[type='submit'] {
...
}
Le pseudo-format permet de préciser un style pour une balise comprenant une caractéristique qu’il n’est normalement pas possible de définir par le HTML. Par exemple : un lien visité ou la première ligne d’un paragraphe.
Les caractéristiques pouvant être ciblées sont définies sur cette page :
« Pseudo-classes ». MDN. https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes
ou
« CSS Pseudo-elements ». W3Schools. http://www.w3schools.com/CSS/CSS_pseudo_elements.asp
Voici quelques exemples, pour vous mettre en appétit.
Ex : Pour que la couleur d'un lien soit différente lorsque le lien a déjà été visité :
Dans le fichier HTML :
<a href=...>...</a>
Dans la feuille de style (notez les deux points entre l’élément et sa caractéristique) :
a:visited {
...
}
Ex : Dans ce second exemple, on veut appliquer un format seulement au premier élément d'une liste.
Dans le fichier HTML :
<nav id="menuprincipal">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>
Ex : Dans la feuille de style :
#menuprincipal ul li:first-child {
...
}
Ex : Dans ce troisième exemple, on veut appliquer un format à un bouton radio mais seulement s'il est sélectionné.
Dans le fichier HTML :
<input type="radio" name="sexe" id="homme" />
<label for="homme">Homme</label>
<input type="radio" name="sexe" id="femme" />
<label for="femme">Femme</label>
Dans la feuille de style :
input[type=radio]:checked {
...
}
Ex : Il est possible d'utiliser les pseudo-formats pour générer une liste à virgules à l'aide du CSS.
Dans le fichier HTML :
<ul class="listeavirgules">
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
Dans la feuille de style :
ul.listeavirgules {
list-style: none;
margin: 0;
padding: 0;
}
ul.listeavirgules li {
display: inline;
}
ul.listeavirgules li:after {
content: ", ";
}
ul.listeavirgules li:last-child:after {
content: "";
}
« Pseudo-classes ». MDN. https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes
« Sélecteurs de voisins généraux ». MDN. https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_de_voisins_g%C3%A9n%C3%A9raux
« CSS Pseudo-elements ». W3Schools. http://www.w3schools.com/CSS/CSS_pseudo_elements.asp
« Les sélecteurs CSS 2 et 3 ». xul. http://www.xul.fr/css/selecteur.php
« :before et :after, des pseudo-éléments qui ont du style ». Chez Jérémie. http://jeremie.patonnier.net/post/2010/11/22/before-et-after-des-pseudo-elements-qui-ont-du-style
« The Current Generation of CSS3 Selectors ». Site point. http://www.sitepoint.com/current-generation-css3-selectors/
« CSS Cheat Sheet ». Cheetyr. http://www.cheetyr.com/css-selectors
▼Publicité
