Astuce CSS - Plusieurs class pour une balise

CSS

Astuce en CSS

Bonsoir !

Je vous présente, à défaut d’autre chose, une petite astuce en Cascading Style Sheets (CSS pour les intimes) qui peut s’avérer très utile dans beaucoup de situations : la double valeur pour l’attribut class.

Pourquoi l’utiliser ?

Pour la simple raison qu’à un moment donné vous en aurez besoin… cela vous évitera bien des usages abusifs de balises généralistes (span et div).
De plus, cela vous permet de faire des multiplications de class sans vous soucier de compléter votre feuille de style pour de simples détails.

Exemple d’utilisation

Voici deux paragraphes différents. Sur les deux j’applique une class pour la présentation globale d’un paragraphe.
Puis sur le deuxième je souhaite appliquer une class qui regroupe les éléments qui comporte du texte en justify.

<p class=”accueil>Voici le contenu 1 de mon paragraphe</p>
<p class=”accueil justify>Voici le contenu 2 de mon paragraphe, il possède une double class</p>

Voici ce que je pourrais donc mettre dans mon css :

.accueil {
background-color: #bbb;
border: 1px dashed black;
margin: 7px;
text-indent: 20px;

}
.justify{
text-align: justify;
}

Bien entendu ceci n’est qu’un exemple simplifié.

Vous aurez donc remarqué qu’un espace aura suffit à créer une double class, une nommée accueil, l’autre justify.
Au passage je vous rappelle donc qu’une class ne possède jamais d’espace !! Utilisez un underscore (tiret de la touche 8 >> _ ) si vous souhaitez séparer des mots, et bien entendu, réutilisez les mêmes caractères dans votre feuille de style.

Voilà pour aujourd’hui.
Amusez-vous bien, et surtout si vous avez un problème n’hésitez pas à laisser un commentaire ;-)

Laisser un commentaire

Pages internes

Info sur le blog...

Validation

Pour un web accessible...