Je vais donner un exemple qui me pose problème, ça sera plus simple pour expliquer.
J'ai un modèle CSS simple avec un entete composé d'un div. J'applique un id à ce div pour gérer ses propriétés. ça donne un truc du genre :
#entete { width: 760px; height: 60px; etc... }
Oui je sais la propriétée "etc" n'est pas encore implantée
Ok, maintenant mon entete peut avoir un fond de couleur différente selon les pages donc je pensais pour faire un truc du genre:
.bleu { background: #00F; }
et dans mon html:
<div id="entete" class="bleu">
mais non, mon fond n'est pas pris en compte... ce qui me gene c'est de dupliquer #entete à chaque fois avec une couleur différente. Ma feuille de style va être énorme et illisible :/
à savoir que j'ai pas que le header qui change de couleur mais aussi un menu lateral et un fond avec chacun des variantes de couleur.
Quelqu'un a une solution?
Pendant que j'y suis, une petite question comme ça je me débarasse.
Quel intéret d'utiliser background-color: #000; quand background: #000; semble fonctionner de la même manière (et partout apparement). Je rate quelque chose?
1) Les propriétés désignées par l'id seront toujours appliquées APRES celles désignées par une classe : il y a priorité. Une classe désigne potentiellement un ensemble d'éléments alors qu'un id n'en désigne qu'un : les règles d'id ont donc préséance. Si tu mets dans ta règle d'id un
Code:
background-color : red;
, ton div sera toujours rouge, quelle que soit sa classe.
2) Rien ne t'emp^che d'avoir plusieurs feuilles de style. Exemple : tu mets une feuille global.css dans laquelle tu mets les règles qui s'appliquent toujours (width 760 et autres) et tu rajoutes une feuille par page avec les caractéristiques de ces pages. Si la feuille d'une page est appliquée après la feuille global.css, et qu'elle contient une règle s'appliquant à un id (au hasard entete), ces règles auront le même niveau de priorité que les précédentes, et les écraseront donc (puisque définies après.
Ex: global.css
Code:
#entete { width : 760px; height : 60px; }
page1.css
Code:
#entete { background : #f00; }
page2.css
Code:
#entete { background : #00f; }
Bien entendu, le principe s'applique à toute ta page : les règles qui ne changent pas sont définies sur global.css et les règles particulières spécifiques à une page sont dans laPageEnQuestion.css.
MarvinLeRouge t’a donné l’essentiel, j’essaie de t’apporter un éclaircissement sur la couleur de fond :
Background-color définit la couleur d’arrière-plan d’un élément (paragraphe), Background-image, Background-repeat, Background-attachment, alors que « Background » sert de définition globale pour l’arrière-plan et à ce titre peut regrouper dans la même déclaration les propriétés d’une image (xxxx.jpg), les paramètres de répétition (no-repeat) ou encore (fixed)…………..ce qui dans ton cas ne se manifeste pas.
Auteur 
Bonsoir
