5. Klassen und IDs

Mit Klassen können wir mehrere Elemente gleichzeitig stylen. IDs sind hingegen für einzigartige Elemente gedacht.

.mein-design {
  border: 2px solid #bfff41;
}
/* In HTML: <p class="mein-design"> */

5. Klassen und IDs

Klassen und IDs sind wie Namensschilder, die du deinen HTML-Elementen gibst, damit du sie im CSS gezielt ansprechen kannst. Stell dir vor, du hast zehn Absätze (p-Tags) auf deiner Seite. Wenn du im CSS schreibst, dass p-Tags eine rote Schrift haben sollen, werden alle zehn rot. Was aber, wenn nur der erste und der letzte Absatz rot sein sollen? Hier kommen Klassen ins Spiel. Du gibst diesen zwei Absätzen einfach das Attribut class="highlight". Im CSS schreibst du dann einen Punkt vor den Namen (.highlight), und schon werden nur diese speziellen Absätze rot gefärbt. Klassen sind also für Gruppen gedacht; du kannst sie so oft benutzen, wie du willst. Eine ID ist dagegen etwas ganz Besonderes. Sie ist wie eine Personalausweisnummer: Sie darf auf einer Seite nur ein einziges Mal vergeben werden. Wenn du ein Element hast, das absolut einzigartig ist, wie zum Beispiel das Logo oben links, gibst du ihm eine ID (id="haupt-logo"). Im CSS sprichst du IDs mit einer Raute (#haupt-logo) an. Weil IDs so einzigartig sind, haben sie im CSS mehr "Macht" als Klassen. Wenn eine ID etwas anderes sagt als eine Klasse, gewinnt fast immer die ID. In der Praxis nutzt man aber meistens Klassen, weil sie flexibler sind und man sie immer wieder verwenden kann.