Klassen und IDs

Mit CSS kann man gleiche Tags einheitlich formatieren. Wenn man aber nicht alle Absätze in rot haben möchte, sondern nur einen oder einige wenige, dann muß man die betreffenden Absätze anders ansprechen können. Dafür stehen Klassen und IDs zur Verfügung. Eine ID ist einmalig innerhalb eines HTML-Dokumentes, eine Klasse hingegen kann mehrmals vergeben werden.

Klassen

Dieser Absatz gehört der Klasse "class1" an (und hat deshalb einen Rahmen).

Dieser Absatz gehört der Klasse "class2" an und ist deshalb gemäss Klassendefinition grau.

Einer Klasse können auch mehrere HTML-Elemente angehören. Dieser Absatz z.B. gehört genau wie der erste zur Klasse "class1" und hat deshalb den gleichen Rahmen.

Unschwer zu erraten... Dieser Absatz gehört ebenfalls zu einer Klasse. Die Zeigehand ist Bestandteil der Klassendefinition.

/* Hinweiskiste mit Hand */
.hinweiskiste {
  background: #D3D3DB url(../pics/pointer_right.gif) no-repeat 1em 0.8em;
  padding: 0.5em 0.5em 0.5em 4em;
  border: 3px solid gray;
  margin-top: 10px;
  font-weight: bold;
}

Andererseits kann ein HTML-Element auch mehreren Klassen angehören. Dieser Absatz gehört sowohl zur Klasse "class1" als auch zur Klasse "class2" und hat deshalb einen Rahmen und ist grau. Die verschiedenen Klasseneigenschaften gelten also additiv.

IDs

Eine ähnliche Wirkung wie Klassen haben IDs. Vom logischen Standpunkt her muß eine ID jedoch dateiweit eindeutig sein und darf deshalb nur einmal vergeben werden. Dieser Absatz hat die ID "id1" und ist deshalb grau.

Übrigens... Klassen und IDs können auf alle HTML-Elemente angewendet werden, nicht nur auf Absätze. Die dadurch zu erreichenden Eigenschaften (Farbe, Größe, Rahmen, Ausrichtung, was auch immer...) sind abhängig von der Art des Elementes. Dieser Absatz gehört keiner Klasse an und hat auch keine ID, er ist also "normal" formatiert und hat die Eigenschaften gemäss der externen CSS-Datei.

ID oder doch lieber CLASS?

Ganz einfach: Eine ID ist wie ein Personalausweis und muss dateiweit eindeutig sein, einer Klasse kann eine größere Menge von Elementen angehören. Genau wie eine Schulklasse mehrere Schüler hat oder ein Verein mehrere Mitglieder.

Es macht Sinn, sich selbst ein Schema zurechtzulegen und wiederkehrende Elemente immer gleich zu benennen.

Allgemein durchgesetzt haben sich folgende Bezeichnungen:

Auch ist es sinnvoll, Bereiche nach ihrer Funktion und nicht nach ihrem Aussehen zu benennen.

Warum? Nun, das Aussehen kann sich durch Austausch des Stylesheets ändern, aber die Funktion bleibt dieselbe.

Also nicht <p class="rot">, sondern <p class="wichtig">. Denn wichtig bleibt der Absatz, rot nicht unbedingt.

Ein <div id="navi_links"> klingt unlogisch, wenn es per CSS irgendwann rechts positioniert werden sollte.

Syntax

Klassendefinitionen werden durch einen Punkt eingeleitet, IDs durch eine Raute (#). Ein (optionaler) Selektor davor weist diesen der Klasse bzw. ID zu. Fehlt der Selektor, handelt es sich um eine frei verwendbare Klasse/ID, welche unterschiedlichen Selektoren zugewiesen werden kann.

p.wichtig      {...}
.nochwichtiger {...)
div#content    {...}
#navi          {...}