Farben zentral definieren ?

[Marc]

Hallo,

rot {
    color:#f00;
    background-color:#300;
}
fett {
    font-weight:bold;
}

<p class="rot fett">Ziemlich roter und fetter Text</p>

Klassen-Selectoren muss ein Punkt "." vorangestellt werden.

So sollte es sein:

CSS:

  
.rot {  
     color:#f00;  
     background-color:#300;  
 }  
  
.fett {  
     font-weight:bold;  
 }  

HTML:

  
<p class="rot fett">Ziemlich roter und fetter Text</p>  

Allerdings wäre es sehr ungeschickt Klassennamen zu verwenden, die eine physisches Darstellungsmerkmal beinhalten. Es kommt sehr häufig vor, dass man roten Text in einer anderen Farbe, fetten Text in einer anderen Gewichtung darstellen möchte. Dann müsste man in sämtlichen HTNL-Dokumenten oder Templates die Klassennamen austauschen oder man hat eine Klassse rot, die dafür sorgt, dass zum Beispeil Text grün wird...

Man sollte also Klassen verwenden, die sich auf den semantischen Zusammenhang des Elementes beziehen. Zum Beispiel also ein Absatz im div mit der ID "content".

Das sähe dann wie folgt aus:

CSS:

  
div#content p {  
     color:#f00;  
     background-color:#300;  
     font-weight:bold;  
 }  

HTML:

  
<div id="content">  
  <p>Ziemlich roter und fetter Text</p>  
</div>  

Vorteil - man benötigt in diesem Fall überhaupt gar keine Klasse mehr. Wenn man nicht jeden Text innerhalb eines Absatzes so gestalten will, sondern nur besonders wichtigen Text auf diese Weise hervorheben will, sollte man diesen entsprechend mit "strong" als das auszeichnen, was er ist, nämlich wichtiger Text. In die CSS-Datei gehört dann folgendes:

CSS:

  
div#content p strong {  
     color:#f00;  
     background-color:#300;  
     font-weight:bold;  
 }  

Viele Grüße,
Marc.