Aufgabe

  1. Suche im HTML eine Stelle mit einer Klasse (class).

  2. Suche eine Stelle mit einer ID (id).

  3. Erstelle eine neue Box mit einer eigenen Klasse.

  4. Vergib einer Überschrift eine ID und style sie im CSS.

Erklärung

In HTML gibt es zwei wichtige Möglichkeiten, Elemente zu kennzeichnen:

  • Klassen (class)
    → für mehrere Elemente

  • IDs (id)
    → nur für ein einziges Element

Beide werden genutzt, um Elemente gezielt mit CSS zu gestalten.

Technische Umsetzung

Klasse verwenden

HTML:

<section class="box special-box">
  <p>Diese Box ist etwas Besonderes.</p>
</section>

CSS:

.special-box {
  background-color: #222222;
  color: white;
}

➡ Eine Klasse kann beliebig oft verwendet werden.

ID verwenden

HTML:

<h2 id="alarm">Warnung</h2>

CSS:

#alarm {
  color: red;
}

 

Grundlegende Fachkonzepte

class

  • Mehrfach verwendbar

  • Wird mit . im CSS angesprochen

id

  • Eindeutig

  • Wird mit # im CSS angesprochen

Best Practice

  • Klassen für Layout & Design

  • IDs für besondere Einzelstellen

Last modified: Tuesday, 16 December 2025, 9:09 AM