{"id":14338,"date":"2026-08-13T12:57:47","date_gmt":"2026-08-13T05:57:47","guid":{"rendered":"\/de\/tutorials\/?p=14338"},"modified":"2026-08-11T12:58:12","modified_gmt":"2026-08-11T05:58:12","slug":"css-klasse","status":"publish","type":"post","link":"\/de\/tutorials\/css-klasse\/","title":{"rendered":"Was ist eine CSS-Klasse? Ein umfassender Leitfaden zur Verwendung des CSS-Selektors"},"content":{"rendered":"

Eine CSS-Klasse ist ein Attribut, das in HTML verwendet wird, um bestimmte Elemente auszuwählen und zu gestalten<\/strong>. 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.<\/p>

Gehen Sie folgendermaßen vor, um Ihre Website mithilfe einer CSS-Klasse zu gestalten:<\/p>

    \n
  1. Öffnen Sie Ihr CSS-Stylesheet.<\/strong> In dieser Datei (z. B. style.css) legen Sie die Gestaltungsregeln fest.<\/li>\n\n\n\n
  2. Definieren Sie die CSS-Klasse.<\/strong> Erstellen Sie eine „Regel“, indem Sie Ihrer Klasse einen Namen wie .my-class<\/strong> geben und Eigenschaften wie color: blue; festlegen.<\/li>\n\n\n\n
  3. Öffnen Sie Ihr HTML-Dokument.<\/strong> Diese Datei (z. B. index.html) enthält die Inhalte, die Sie gestalten möchten.<\/li>\n\n\n\n
  4. Suchen Sie das HTML-Element, das Sie gestalten möchten.<\/strong> Wählen Sie das Element aus, das Sie ändern möchten, z. B. einen Absatz <p><\/strong> oder ein <div>-Element<\/strong>.<\/li>\n\n\n\n
  5. Weisen Sie dem HTML-Element die CSS-Klasse zu.<\/strong> Fügen Sie dem öffnenden Tag des Elements das Attribut class=”my-class” hinzu, um es mit der zuvor definierten Gestaltungsregel zu verknüpfen.<\/li>\n<\/ol>

    Wie funktioniert eine CSS-Klasse?<\/h2>

    Eine CSS<\/a>-Klasse funktioniert wie eine wiederverwendbare „Kennzeichnung“, die Ihre HTML-Struktur mit Ihren CSS-Regeln verknüpft<\/strong>.<\/p>

    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.<\/p>

    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.<\/p>

    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<\/strong> erstellen.<\/p>

    Fügen Sie anschließend class=”alert”<\/strong> 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<\/strong> vornehmen. Alle fünf Felder werden dann automatisch aktualisiert.<\/p>

    Wie verwenden Sie eine CSS-Klasse, um ein HTML-Element zu gestalten?<\/h2>

    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<\/strong>.<\/p>

    1. Öffnen Sie Ihr CSS-Stylesheet<\/h3>

    Zunächst benötigen Sie einen Ort, an dem Sie Ihre CSS-Regeln eintragen können. Sie haben zwei Möglichkeiten:<\/p>