Lädt...

HTML-Klassen

Nach div kommen wiederverwendbare class-Aufkleber für Styles.

Warum gemeinsame Namen besser sind

Gemeinsame Namen halten Styles konsistent.

Direkte Antwort

class="note" schreiben, teilen, mehrere Namen mit Leerzeichen. In CSS .note. Kein # in der Attributwert.

📊 class in HTML vs CSS

Place	What you write	Role
HTML attribute	class="note"	Labels the element (no leading dot)
CSS selector	.note	Selects elements that have that class
Multiple names	class="card featured"	Space-separated list in HTML
Same idea in CSS	.card.featured	Element that has both classes (advanced combining)

Gemeinsame Klasse auf mehreren Elementen

Zwei Absätze mit class="note".

Shared class

html

HTML Code

<p class="note">Save often.</p>
<p class="note">Use clear names.</p>
<style>
.note { color: #0b4; font-weight: 600; }
</style>

Gemeinsames Beispiel lesen

beide note
.note wählt die Gruppe
Tippfehler bricht den Style

Mehrere Klassen auf einem Element

card und featured zusammen.

Multiple classes on one element

html

HTML Code

<div class="card featured">
<h2>Featured tip</h2>
<p>Classes can combine on one box.</p>
</div>
<style>
.card { padding: 12px; border: 1px solid #444; }
.featured { border-color: #0a7; }
</style>

Mehrklassenbeispiel lesen

zwei Tokens
.card + .featured
keine Kommas im Attribut

Namensgewohnheiten

Kurze klare Rollen-Namen.

Übung

zwei tip-Absätze
.tip stylen
zweite Klasse
Tippfehler beheben

Typische Fehler

im class-Attribut
Kommas statt Leerzeichen
.note im HTML

Kurzfassung

class = CSS/JS-Hook
teilen und kombinieren
als Nächstes: id

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache