Der genaue Unterschied einer CSS-ID und CSS-Klasse ist zunächst nicht leicht erkennbar.  Weder im HTML-Dokument noch auf der Webseite lässt sich festmachen, warum beide Attribute notwendig sind. Ein Blick auf das semantische Regelwerk schafft Abhilfe. Denn wie in jeder Sprache gibt es Normen, die es zu befolgen gilt.

In diesem Beitrag erfahren Sie, warum die ID nicht einfach mit dem Attribut class ersetzt werden kann und was sie bei der Gestaltung mit CSS beachten müssen.

→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]

CSS Regeln: Wie werden sie bestimmt?

Das Webseiten-Grundgerüst steht, doch nun soll der Inhalt in eine anschauliche Form gebracht werden. Während Inhalt und Struktur im HTML-Dokument definiert werden, bestimmt das CSS (Cascading Style Sheet) das Erscheinungsbild einer Webseite. Mithilfe von CSS werden semantische Regeln definiert, die sich auf die Elemente des HTML-Codes beziehen.

Die CSS-Regel teilt sich dabei in Selektor (selector) und Deklaration (declaration). Der Selektor gibt das Element an, das formatiert werden soll. Die Deklaration bestimmt die Eigenschaft (property) sowie den dazugehörigen Wert (value).

In der property können beispielsweise Schriftart, Farbe oder Rahmen definiert werden. Der nachfolgende Wert enthält Spezifikationen wie etwa Arial, blau oder 2px. Innerhalb der Deklaration können mehrere Eigenschaften definiert werden. Sie müssen dabei durch ein Semikolon getrennt werden.

Mithilfe von CSS können sowohl die Eigenschaften einzelner Elemente geändert werden sowie ganze classes oder IDs.

 <!DOCTYPE html> 
<html> 
<head> 
<style> 
.content{ 
color:white; background-color:blue; 
} 
</style> 
</head> 
<body> 
<p class="content">Ihre Aussage.</p> 
</body> 
</html>

Im aufgeführten Beispiel soll die Eigenschaft „color“ (Farbe) sowie „background-color“ (Hintergrundfarbe) der Klasse „content“ formatiert werden. Den Eigenschaften werden die Werte weiß und blau zugewiesen. Nachfolgend sehen Sie, wie der Code im Web ausgespielt wird:

Verwendung CSS class_1Quelle: Screenshot W3schools Editor

CSS-Klassen gruppieren mehrere Elemente

Im HTML-Dokument dienen Klassen (class) dazu, mehrere Tags zu gruppieren. Das hat den Vorteil, dass alle Elemente einer Klasse im CSS angesprochen und einheitlich designt werden können.

Soll einem Element eine Klasse zugewiesen werden, sieht das wie folgt aus:

  <h1 class=“headline“>Das ist die Überschrift</h1>

Verwendung CSS class_4

Quelle: Screenshot W3schools Editor

Zum Attribut gehört die Bezeichnung class sowie der spezifische Name der Klasse. Im Beispiel wird dem h1-Element die Klasse „headline“ zugewiesen.

Klassen sind nicht auf einen HTML-Tag beschränkt, sondern beziehen sich auf mehrere Elemente. Der Klasse „headline“ können im HTML-Dokument auch weitere verschiedene Elemente, wie etwa Überschriften (h1, h2, h3…), Block-Absätze (div,span), Absätze (p) und weitere Tags, zugewiesen werden.

Elemente können auch mit mehreren Klassen ausgewiesen werden. Dazu muss zwischen den Klassennamen jeweils ein Leerzeichen gesetzt werden. Im Beispiel wird das h1-Element sowohl der class „headline“, als auch der class „post“ zugeordnet. So kann das h1-Tag im CSS Formatierungen beider Klasse ausführen.

  <h1 class=“headline post“>Fokus Keyword</h1>

Verwendung CSS class_5

Quelle: Screenshot W3schools Editor

CSS-ID bestimmt ein einzelnes Element

Im Gegensatz zur class sind IDs eindeutige Attribute. IDs zeichnen im HTML-Dokument lediglich ein Element aus. So darf eine bestimmte ID im gesamten Code auch nur einmal definiert werden. Bei der Benennung der ID folgt auf das Attribut ebenfalls eine spezifische Bezeichnung.

Soll ein Element mit einer ID gekennzeichnet werden, wird dies wie folgt gemacht:

  <h1 id=“hauptthema“>Fokus Keyword</h1>

Verwendung CSS class_5

Quelle: Screenshot W3schools Editor

Egal, ob eine ID oder eine class im CSS angesprochen wird, das Erscheinungsbild auf der Webseite ist bei gleicher Formatierung dasselbe. Der wichtige Unterschied liegt jedoch in der Semantik: IDs werden im CSS höher gewertet als Klassen.

Das bedeutet, dass, wenn ein Element sowohl einer Klasse als auch einer ID angehört, die Formatierung der ID ausgegeben wird. Daher sollten IDs auch unbedingt als solche genutzt und nicht durch das class-Attribut ersetzt werden. Nur so kann eine saubere Semantik im Dokument beibehalten werden.

Elemente mithilfe von CSS-Selektoren ansprechen

Soll ein Element formatiert werden, muss es im CSS mit dem jeweiligen Selektor angesprochen werden. Klassen werden mit einem Punkt + Klassenname (.klassenname) ausgewählt, IDs mit einer Raute + ID-Name (#idname).

Ist das jeweilige Attribut gesetzt, werden anschließend die Eigenschaften und die dazugehörigen Werte definiert, um das Erscheinungsbild der Klassen-Elemente oder der ID zu ändern.

Die folgenden Beispiele zeigen, wie Klassen und IDs mithilfe der CSS-Selektoren angesprochen und entsprechend formatiert werden:

Die zuvor definierte Klasse „headline“ soll im Beispiel mit einem blauen Hintergrund und weißer Schriftfarbe versehen werden.

 <style>
.headline{
color:white;
background-color:blue; 
} </style>

Verwendung CSS class_2Quelle: Screenshot W3schools Editor

Die zuvor definierte ID „hauptthema“ wird im Beispiel ebenfalls formatiert. Hintergrund, Rahmen und die Position sollen angepasst werden. Nach der Ansprache der ID folgen die auszuführenden Eigenschaften.

 <style> 
#hauptthema {
    background-color:green; 
    border:5px dotted; 
    float:right; } 
</style>

Verwendung CSS class_3Quelle: Screenshot W3schools Editor

Häufige Fehlerquellen bei der Anwendung

Eine der häufigsten Fehlerquellen ist die Schreibweise der Klassen- und ID-Namen. Die Bezeichnungen sind case-sensitiv, was bedeutet, dass Groß- und Kleinschreibung ausschlaggebend sind. Wird die Klasse beispielsweise mit „hauptthema“ definiert, im CSS aber mit „.Hauptthema“ angesprochen, kann die Formatierung nicht ausgespielt werden.

Die Namen dürfen außerdem keinerlei Umlaute oder Leerzeichen enthalten. Ziffern von null bis neun können für die Benennung genutzt werden, dürfen jedoch nicht zu Beginn der Bezeichnung stehen. Daher sollten Sie bei der Erstellung von HTML-Doc und CSS unbedingt auf eine korrekte Schreibweise achten.

Der Unterschied zwischen Klassen und IDs ist wichtiger, als er zunächst erscheint. Während Klassen nicht eindeutige Attribute sind und mehrere Elemente definieren, zeichnet die ID immer nur ein Element aus. Semantisch werden IDs in der Ausführung höher gewertet als Klassen.

Achten Sie bei der Definition im HTML-Dokument stets auf die korrekte Nutzungsweise und die korrekte Bezeichnung, um im CSS die gewollten Formatierungen oder CSS-Animationen umzusetzen.

css html für anfänger

Titelbild: xx / iStock / Getty Images Plus

Ursprünglich veröffentlicht am Aug 21, 2020 2:00:00 AM, aktualisiert am März 06 2023

Themen:

CSS Grundlagen