Utiliser un CMSLes sélecteurs CSS sont divisés en 5 catégories. On a l'élément universel qui est symbolisé par l'astérisque (*), on a le sélecteur qui cible une balise HTML telle que img ou p et on les ID qui identifient un élément unique et la classe CSS qui peut cibler plusieurs éléments à travers le site. L'élément universel identifié par l'astérisque permet d'appliquer le style à tous les éléments de votre site tels que les paragraphes, les balises DIV, les images. Une utilisation commune de ce sélecteur est de configurer les marges externes et internes de votre site. Ainsi, on voit souvent des codes similaires au suivant :
* {
padding:0px;
margin:0px;
}
Ce code permet de supprimer toutes les pages sur tous les éléments. Ensuite, on pourra configurer manuellement les marges selon ses besoins. Cette technique a ses détracteurs et partisans. La critique est qu'elle est fastidieuse pour le webmestre, car il est obligé de toujours spécifier des marges pour chaque élément.
Le sélecteur de la balise HTML
Le sélecteur de la balise HTML permet de cibler une balise spécifique. Par exemple, vous voulez ajouter une bordure de 1 pixel à toutes les images de votre site, aussi vous pourrez utiliser le code suivant :
img {
border:solid #000 1px;
}
Ce code ajoutera une bordure noire à toutes les images. Il faut faire attention avec ce sélecteur pour éviter les résultats indésirables. En effet, un élément peut s'afficher dans un contexte différent sur les pages et donc, une généralisation du style CSS risque de perturber le design. Le sélecteur CSS de la balise fonctionne avec toutes les normes HTML et on l'utilise pour créer la mise en forme globale du site. Par exemple, on pourra configurer les marges de la balise body ou régler la largeur de tous les tableaux du site.
Le sélecteur de classe par ID
Le sélecteur de classe par ID permet de cibler un élément en particulier. Il suffit d'ajouter l'attribut id="monid" pour créer ce type de sélecteur. Ainsi, le code suivant :
Permet de créer une balise DIV avec un ID appelé " centre " qu'on utilise fréquemment pour le conteneur principal du site. Pour créer le style, il suffit d'ajouter le signe du dièse devant l'identifiant tel que :
centre {
width:650px;
margin:auto;
}
Le code ci-dessus permet de spécifier la largeur du conteneur DIV et de l'aligner correctement avec les marges automatiques. Le sélecteur ID est la prochaine étape après le sélecteur sur la balise HTML. On l'utilise toujours pour le design principal du site, car on utilisera ces éléments qu'une seule fois. Ainsi, vous pouvez utiliser l'ID pour créer la barre de navigation, l'en-tête et le contenu central du site. Une particularité de l'ID est qu'on peut uniquement l'utiliser une seule fois dans la page contrairement à la classe CSS.
Les classes du CSS
Les classes permettent de créer des styles indépendamment des éléments. On la crée en ajoutant l'attribut "class" à la balise HTML telle que
. Ensuite dans la feuille de style CSS, on utilise un point (.) qui sera suivi de l'identifiant comme dans cet exemple :
.ArticlePrincipal {color:#f5f5f5;}
Le code ci-dessus configurera une couleur gris clair à tous les éléments qui utilisent la classe ArticlePrincipal. Pour une meilleure compréhension, il faut juste garder à l'esprit que le sélecteur ID n'est utilisable qu'une seule fois tandis qu'on peut utiliser indéfiniment la classe. Le sélecteur par classe est très puissant parce qu'il vous permet de peaufiner le design. Ainsi, si vous avez un menu dans une barre de navigation, alors vous pouvez utiliser la classe CSS pour personnaliser les liens dans ce menu.
Les pseudo-classes du CSS
Les pseudos-classes sont des éléments qu'on peut ajouter à un style CSS. Ils sont représentés par un symbole de deux points (:). Les formes les plus courantes sont :hover, :focus, :visited, etc. On les utilise principalement dans les liens. Ainsi, le code suivant :
a:hover {
color:#fff;
}
Permet de définir la couleur blanche lorsqu'on survole un lien. Avec un peu de pratique, on peut créer de superbes menus en exploitant uniquement les pseudos-classes et ainsi, on réduit l'utilisation des images.