Surcharge de classe dans la CSS

Bonjour

Ma question est peut-être un peu simpliste.
J'utilise en parallèle de mon site une feuille de style CSS
Dans cette feuille j'ai entre autres le code suivant :

Code:

---

1 2 3 4 5 6 7

.xx_LibelleTitre{ height :30px; font-weight :bold; background-color:#F3AB25; color :#294763; font-size :medium; }

---

Mes différentes pages utilisent cette définition sous la forme :

Code:

---

1 2 3

<div class = 'td_LibelleTitre'> Profil investisseur </div>

---

Le client me demande maintenant que sur chaque page le titre ait une couleur différente
Bien sûr le peux surcharger en écrivant ceci :

Code:

---

1 2 3 4

<div class = 'td_LibelleTitre' style='color :#FFFF00; background-color:#0000FF;' > Profil investisseur </div>

---

J'aurais voulu définir dans la CSS une nouvelle class qui dériverait de xx_LibelleTitre et surchargerait ses couleurs
Et ça je ne sais pas l'écrire, je n'ai rien trouvé dans les Cours et tutoriels pour apprendre CSS

Merci d'avance

C'est bon, j'ai trouvé une solution

Je définis deux styles

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

.xx_LibelleTitre{ height :25px; font-weight :bold; background-color:#F3AB25; color :#294763; font-size :medium; text-align :center; vertical-align :middle; } .xx_LibelleTitreInvestisseur{ background-color:#A44B05; color :#DDDDDD; }

---

J'attribue les deux styles à l'objet :

Code:

---

1 2 3

<div class = 'xx_LibelleTitre xx_LibelleTitreInvestisseur'> Profil investisseur </div>

---

Je reste toutefois ouvert à toute remarque

Bonjour,

Citation:

---

J'attribue les deux styles à l'objet

---

effectivement si chaque page doit avoir des propriétés de couleur différentes le plus simple à maintenir reste l'ajout d'une classe supplémentaire définissant celle ci.

OK

Ma question était surtout de m'assurer que cette syntaxe était bien la norme pour fonctionner sur tous les navigateurs

Merci beaucoup

Il n'y a qu'un bémol à cela, c'est l'ordre dans la feuille CSS qui compte et non l'ordre dans l'affectation des classes.

Avec les règles CSS suivantes ...

Code:

---

1 2 3 4 5 6

.bleu { color: blue; } .rouge { color: red; }

---

... un élément écrit comme suit

Code:

---

<h1 class="rouge bleu">Titre</h1>

---

sera écrit en rouge ... et non pas en bleu, il ne faut pas le perdre de vue même si l'exemple est mal choisi.

PS : pense à mettre la discussion en résolue ;)

Effectivement!

Merci