Voici quelques astuces CSS assez utiles, mais très peu utilisées.
Au menu :

  • Bien utiliser <HTML> et <BODY>
  • Appliquer un style à tous les éléments.
  • Donner plusieurs « class » à un élément

Bien utiliser <HTML> et <BODY>

<HTML>, comme tout autre élément, peut être personnalisé via les CSS.
Par exemple, on peut lui ajouter un background, un margin ou autre.
<BODY>, quant à lui, est interprété par la plupart des navigateurs comme un élément de type block.
Cette astuce implique donc de bien réfléchir à la nécessité d’utiliser un block type « mapage », ou « tout » comme j’ai (trop) souvent trouvé dans des templates ;)

Appliquer un style à tous les éléments.

Il est possible d’appliquer un style général à tous les éléments, via *
Cette technique est utilisée par certaines feuilles de Reset CSS, pour appliquer des marges intérieurs et extérieures de 0 par défaut sur tous les éléments.

* {
	margin	: 0;
	padding	: 0
}

Donner plusieurs « class » à un élément

Il est possible de donner plusieurs valeurs à un attribut class, ce qui permet de gérer plus proprement certains éléments.

/* CSS */
.rose {
	color	: pink;
}
.souligne {
	text-decoration	: underline;
}
<em class="rose souligne">texte rose et souligné</em>

avec comme résultat « texte rose et souligné« .
edit : comme l’a noté Kazhar dans les commentaires, il faut nommer ses classes CSS en fonction de l’utilité de l’élément, mais pour le coup, il me fallait un exemple facile à comprendre, et à expliquer ;)

En espérant que ces 3 astuces en CSS vous aient été utiles ;)

Tags : , , , ,