Was ist eine CSS-Klasse? Ein umfassender Leitfaden zur Verwendung des CSS-Selektors
Aug 11, 2026
/
Faradilla A.
/
6 Min. Lesezeit
Eine CSS-Klasse ist ein Attribut, das in HTML verwendet wird, um bestimmte Elemente auszuwählen und zu gestalten. Damit können Sie dieselben Gestaltungsregeln – etwa für Farbe, Schriftgröße oder Abstände – gleichzeitig auf mehrere Elemente anwenden, anstatt jedes Element einzeln zu programmieren.
Gehen Sie folgendermaßen vor, um Ihre Website mithilfe einer CSS-Klasse zu gestalten:
- Öffnen Sie Ihr CSS-Stylesheet. In dieser Datei (z. B. style.css) legen Sie die Gestaltungsregeln fest.
- Definieren Sie die CSS-Klasse. Erstellen Sie eine „Regel“, indem Sie Ihrer Klasse einen Namen wie .my-class geben und Eigenschaften wie color: blue; festlegen.
- Öffnen Sie Ihr HTML-Dokument. Diese Datei (z. B. index.html) enthält die Inhalte, die Sie gestalten möchten.
- Suchen Sie das HTML-Element, das Sie gestalten möchten. Wählen Sie das Element aus, das Sie ändern möchten, z. B. einen Absatz <p> oder ein <div>-Element.
- Weisen Sie dem HTML-Element die CSS-Klasse zu. Fügen Sie dem öffnenden Tag des Elements das Attribut class=”my-class” hinzu, um es mit der zuvor definierten Gestaltungsregel zu verknüpfen.
Wie funktioniert eine CSS-Klasse?
Eine CSS-Klasse funktioniert wie eine wiederverwendbare „Kennzeichnung“, die Ihre HTML-Struktur mit Ihren CSS-Regeln verknüpft.
Wenn Sie einem HTML-Element eine Klasse zuweisen, weisen Sie den Browser an, im Stylesheet nach der Gestaltungsdefinition für diese Klasse zu suchen und sie auf das entsprechende Element anzuwenden.
Dadurch entsteht eine klare Trennung der Aufgabenbereiche. Ihre HTML-Datei enthält den Inhalt (das „Was“), während das Stylesheet die Darstellung (das „Wie es aussieht“) festlegt.
Stellen Sie sich beispielsweise vor, Sie haben auf Ihrer Website fünf Hinweisfelder, die alle einen roten Rahmen und fettgedruckten Text benötigen. Anstatt jedes Feld einzeln zu gestalten, können Sie in Ihrem CSS eine einzige Klasse namens .alert erstellen.
Fügen Sie anschließend class=”alert” zu jedem der fünf Felder in Ihrem HTML-Code hinzu. Wenn Sie den Rahmen später in Blau ändern möchten, müssen Sie die Änderung nur einmal in der Definition der Klasse .alert vornehmen. Alle fünf Felder werden dann automatisch aktualisiert.
Wie verwenden Sie eine CSS-Klasse, um ein HTML-Element zu gestalten?
Um ein HTML-Element mithilfe einer CSS-Klasse zu gestalten, öffnen Sie Ihr CSS-Stylesheet und definieren Sie die Gestaltungsregeln. Öffnen Sie anschließend Ihre HTML-Datei, suchen Sie das Element, das Sie gestalten möchten, und weisen Sie diesem Element die CSS-Klasse zu.
1. Öffnen Sie Ihr CSS-Stylesheet
Zunächst benötigen Sie einen Ort, an dem Sie Ihre CSS-Regeln eintragen können. Sie haben zwei Möglichkeiten:
- Internes CSS. Sie können Ihre CSS-Regeln direkt in Ihrem HTML-Dokument innerhalb von <style></style>-Tags einfügen, die sich typischerweise im <head>-Bereich befinden. Diese Methode eignet sich für kleine Projekte oder zum Testen, kann jedoch dazu führen, dass Ihre HTML-Datei unübersichtlich wird.
- Externes Stylesheet. Diese Methode wird für die meisten Projekte empfohlen. Erstellen Sie eine separate Datei mit der Erweiterung .css, z. B. style.css. So bleiben Ihre Styles übersichtlich und vom Inhalt getrennt.
Verknüpfen Sie diese Datei anschließend mit Ihrem HTML-Dokument, indem Sie im entsprechenden Abschnitt ein Tag einfügen:
<head> <link rel="stylesheet" href="style.css"> </head>
Für den Rest dieses Tutorials gehen wir davon aus, dass Sie eine externe style.css-Datei verwenden.
2. Definieren Sie die CSS-Klasse
Definieren Sie in Ihrer style.css-Datei eine Klasse, indem Sie einen Punkt (.) gefolgt von einem Namen Ihrer Wahl eingeben. Dieser Name ist der Selektor. Fügen Sie anschließend geschweifte Klammern {} hinzu und tragen Sie darin Ihre CSS-Eigenschaften (die Regeln) ein.
.highlight {
font-weight: bold;
color: green;
background-color: #f0f0f0;
}Dieser Code erstellt eine Klasse namens highlight. Jedes HTML-Element, dem diese Klasse zugewiesen wird, erhält fettgedruckten, grünen Text auf einem hellgrauen Hintergrund.
Sie können auch spezifischere Selektoren erstellen. Um beispielsweise nur <h1>-Elemente zu gestalten, die sich innerhalb eines Elements mit der Klasse highlight befinden, schreiben Sie:
.highlight h1 {
/* This rule only applies to h1 tags inside .highlight */
color: red;
}3. Öffnen Sie Ihr HTML-Dokument
Öffnen Sie nun die HTML-Datei (z. B. index.html), die den Inhalt enthält, den Sie gestalten möchten. Dazu können Sie einen beliebigen Texteditor wie VS Code oder direkt den Dateimanager Ihres Hosting-Anbieters verwenden.
Kunden des Managed Webhosting von Hostinger können über hPanel → Websites → Verwalten → Dateimanager auf den Dateimanager zugreifen. Suchen Sie anschließend die HTML-Datei und doppelklicken Sie darauf, um den Code-Editor zu öffnen.
4. Suchen Sie das HTML-Element, das Sie gestalten möchten
Sehen Sie sich Ihren HTML-Code an und identifizieren Sie die Elemente, die Sie gestalten möchten. Beispielsweise können mehrere Absätze (<p>) als Warnhinweise dienen oder Sie möchten ein bestimmtes <div> gestalten, das eine Autorenbiografie enthält.
Überlegen Sie, welche Elemente einen gemeinsamen Zweck oder Inhaltstyp haben. Beispielsweise können alle <h2>-Tags eine gemeinsame Klasse erhalten, während alle Call-to-Action-Schaltflächen eine andere Klasse bekommen. Die logische Gruppierung von Elementen ist entscheidend für den effektiven Einsatz von Klassen.
💡 Profi-Tipp
Um die Codestruktur Ihrer Website im Frontend zu überprüfen, verwenden Sie das Entwicklertool Ihres Webbrowsers zum Untersuchen von Elementen. Klicken Sie dazu mit der rechten Maustaste auf den Bildschirm und wählen Sie Untersuchen aus.
5. Weisen Sie dem HTML-Element die CSS-Klasse zu
Um Ihre CSS-Regel anzuwenden, fügen Sie dem öffnenden Tag des HTML-Elements das class-Attribut hinzu. Als Wert des Attributs verwenden Sie den Klassennamen, den Sie in Ihrer CSS-Datei definiert haben, jedoch ohne den Punkt.
Verwenden Sie die Klasse .highlight und wenden Sie sie auf einen Absatz an:
<p class="highlight">This paragraph will be bold, green, and have a gray background.</p>
Sie können diese Klasse auf beliebig viele Elemente anwenden:
<div class="highlight">This whole division gets the style.</div> <p>This is a normal paragraph.</p> <p class="highlight">This paragraph also gets the style.</p>
Nachdem Sie sowohl Ihre HTML- als auch Ihre CSS-Datei gespeichert haben, öffnen Sie die HTML-Datei in Ihrem Browser. Sie sehen dann, dass die Stile auf alle Elemente angewendet wurden, denen Sie die Klasse zugewiesen haben.
Vorteile der Verwendung von CSS-Klassen
CSS-Klassen bieten bei der Webentwicklung mehrere wesentliche Vorteile, insbesondere in Bezug auf Effizienz, Organisation und Wartbarkeit.
- Wiederverwendbarkeit. Das ist der größte Vorteil. Sie können eine Gestaltungsregel einmal definieren (z. B. .button-primary) und diese Klasse auf alle primären Schaltflächen Ihrer Website anwenden. So müssen Sie nicht für jede Schaltfläche denselben Code erneut schreiben.
- Wartbarkeit. Mit Klassen können Sie das Design Ihrer Website einfach aktualisieren. Um die Farbe aller primären Schaltflächen zu ändern, müssen Sie die Definition der Klasse .button-primary in Ihrer CSS-Datei nur einmal bearbeiten. Die Änderung wird automatisch auf jedes Element angewendet, das diese Klasse verwendet.
- Organisation und Lesbarkeit. Klassen helfen dabei, den Inhalt (HTML) von der Darstellung (CSS) zu trennen. Diese „Trennung der Aufgabenbereiche“ macht Ihren Code übersichtlicher, semantischer und für Sie oder andere Entwickler leichter zu lesen, zu verstehen und zu debuggen.
- Flexibilität. Ein HTML-Element kann mehrere Klassen haben. Beispielsweise kann <button class=”button button-primary”> Basis-Styles von .button und bestimmte Farb-Styles von .button-primary übernehmen. Mit diesem flexiblen, modularen Ansatz können Sie komplexe Designs erstellen, indem Sie einfache Klassen miteinander kombinieren.
Tipps zum Umgang mit CSS-Klassen
Um CSS-Klassen zu beherrschen, reicht es nicht aus, sie lediglich zum Laufen zu bringen. Entscheidend ist auch, Best Practices für sauberen, skalierbaren und wartbaren Code anzuwenden. Die folgenden Tipps helfen Ihnen dabei, CSS wie ein Profi zu schreiben.
Verwenden Sie klare und aussagekräftige Namen
Ein Klassenname sollte beschreiben, was ein Element ist oder warum es gestaltet wird – nicht, wie es gestaltet wird. Ein Name wie .alert-danger ist beispielsweise aussagekräftiger und besser wiederverwendbar als .red-text-bold.
Wenn Sie Warnmeldungen später blau darstellen möchten, ist der Name .alert-danger weiterhin sinnvoll, während .red-text-bold irreführend wäre. Verwenden Sie klare, logische Namen, die den Zweck der Komponente beschreiben.
Nutzen Sie weitere CSS-Selektoren
Klassen sind nicht die einzige Möglichkeit, Elemente auszuwählen. Wenn Sie weitere Selektoren kennen, können Sie effizienteres CSS schreiben.
- ID-Selektor. Eine ID (#my-id) ähnelt einer Klasse, muss jedoch für ein einzelnes Element auf einer Seite eindeutig sein. Sie ist spezifischer als eine Klasse. Bei einem Konflikt haben ihre Regeln daher immer Vorrang.
- Elementselektor. Sie können alle Elemente eines bestimmten Typs wie p oder h2 gestalten. Das eignet sich gut, um grundlegende Styles festzulegen, beispielsweise eine Standardschriftgröße für alle Absätze.
- Kombinatoren. Sie können Selektoren kombinieren, um Elemente gezielter auszuwählen. Beispielsweise wählt .sidebar p nur Absätze aus, die sich innerhalb eines Elements mit der Klasse sidebar befinden.
Minimieren Sie die Eigenschaften innerhalb einer Klasse
Erstellen Sie kleine, wiederverwendbare Klassen, die jeweils eine bestimmte Aufgabe gut erfüllen. Anstatt beispielsweise eine einzige große Klasse wie .page-sidebar-box zu erstellen, die Layout, Farbe und Schriftart festlegt, können Sie mehrere Klassen verwenden: .box (für das Layout), .sidebar-theme (für die Farbe) und .featured-text (für die Schriftart).
Sie können diese dann in Ihrem HTML-Code kombinieren: <div class=”box sidebar-theme featured-text”>. Dieser modulare Ansatz ist in hohem Maße wiederverwendbar und wartungsfreundlich.
Organisieren Sie CSS-Klassen in Gruppen
Je umfangreicher Ihre style.css-Datei wird, desto schwieriger kann die Verwaltung werden. Organisieren Sie Ihre Klassen, indem Sie sie mithilfe von Kommentaren gruppieren.
Sie können beispielsweise Abschnitte für „Layout“, „Buttons“, „Forms“ und „Typography“ erstellen. So können Sie Ihre Styles später wesentlich leichter finden und bearbeiten.
/* --- Button Styles --- */
.button {
/* base button styles */
padding: 10px 15px;
border-radius: 5px;
}
.button-primary {
/* primary button styles */
background-color: blue;
color: white;
}
/* --- Form Styles --- */
.form-input {
/* input styles */
border: 1px solid #ccc;
padding: 8px;
}Der nächste Schritt beim Erlernen von CSS
Nachdem Sie die Grundlagen von CSS-Klassen beherrschen, sollten Sie sich als Nächstes mit responsivem Design und fortgeschrittenen Layout-Techniken beschäftigen. Nutzer rufen Ihre Website auf Smartphones, Tablets und Desktop-Computern auf. Daher ist es wichtig, Ihre Styles entsprechend anzupassen.
Dabei ist es besonders wichtig, CSS-Breakpoints zu verstehen. Damit können Sie je nach Bildschirmgröße des Nutzers unterschiedliche Styles anwenden. So sorgen Sie dafür, dass Ihre Website auf jedem Gerät gut aussieht.
Bei komplexeren Projekten ist ein Nachschlagewerk hilfreich. Setzen Sie ein Lesezeichen für unseren CSS-Spickzettel, um Eigenschaften, Selektoren und Syntax schnell nachzuschlagen.
Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.
Faradilla, auch bekannt als Ninda, ist Content Marketing Specialist bei Hostinger mit über fünf Jahren Erfahrung und einem zehnjährigen Hintergrund als Linguistin. Sie möchte Technologie für alle zugänglich machen, indem sie komplexe Anleitungen in klare und leicht verständliche Schritt-für-Schritt-Guides verwandelt. In ihrer Freizeit interessiert sie sich für Biowissenschaften oder schaut gerne lustige Tiervideos. Vernetzen Sie sich mit ihr auf LinkedIn.
Comments
0 responses