Übungsaufgaben zu den CSS-Grundlagen: Selektoren, Box-Modell und Layout für Mitfahrgesuche

Übungsaufgaben zu den CSS-Grundlagen: Selektoren, Box-Modell und Layout für Mitfahrgesuche

https://bildung.social/@oerinformatik/

https://oer-informatik.de/css-grundlagen-uebungsaufgaben

CSS, Selektor, Kaskade, Spezifität, Box-Modell, Flexbox, Grid, Media Queries, Kontrast, Übungsaufgaben, Prüfungsvorbereitung

tl/dr; (ca. 56 min Lese- und Bearbeitungszeit): Übungen zu den CSS-Grundlagen rund um die Mitfahrgesuche des Mitfahrlabors: Du benennst die Bestandteile einer Regel, ordnest Selektoren Elementen zu, sagst mit der Spezifität vorher, welche Regel gilt, berechnest Maße mit dem Box-Modell, gestaltest eine Liste von Gesuchen mit Flexbox, findest den Fehler in einer Media Query für einen hochkant montierten Monitor und prüfst Farbkontraste nach WCAG 2.2 [AI-Assisted]. (Zuletzt geändert am 11.11.2026)

Dieser Artikel ist Teil einer Artikelreihe über die Grundlagen der Webentwicklung: HTML / CSS / Übungsaufgaben zu CSS / Bootstrap

Diese Übungsaufgaben gehören zum Artikel CSS-Grundlagen: Webseiten gestalten mit Selektoren, Box-Modell, Flexbox und Grid. Alle Aufgaben drehen sich um die Mitfahr-App „Mitfahrlabor“: Neben den Fahrtangeboten soll der Flurmonitor künftig auch Mitfahrgesuche zeigen, also Wünsche von Auszubildenden ohne Auto, die zu einer bestimmten Zeit an einem Haltepunkt abgeholt werden möchten.

Hinweise zur Bearbeitung: Bis zur Teil-1-Prüfung der IT-Berufe solltest Du die Basiskompetenz beherrschen, also Aufgabe 1.1 und Aufgabe 1.2. Als FIA, FIDP oder FIDV musst Du zur Teil-2-Prüfung Aufgaben auf Kernkompetenz-Ebene lösen können, das sind Aufgabe 2.1, Aufgabe 2.2 und Aufgabe 2.3. Von FIA wird zusätzlich erwartet, dass ihnen Aufgaben auf Profilkompetenz-Ebene (Aufgabe 3.1 und Aufgabe 3.2) keine Probleme bereiten. Notiere Deine Antworten zuerst vollständig, bevor Du die Beispiellösung aufklappst. CSS-Code kannst Du im Browser, mit den Entwicklerwerkzeugen (F12) und mit dem W3C-CSS-Validator ausprobieren; andere fachlich richtige Lösungen sind ebenso richtig.

Du möchtest eigene Aufgaben zum Üben von einem KI-Sprachmodell generieren lassen? Prompt ein-/ausblenden

Erstelle neue Übungsaufgaben zum Thema „CSS-Grundlagen: Selektoren, Box-
Modell und Layout für Mitfahrgesuche“.

Bauplan: Halte Dich an Aufbau, Kompetenzstufen, Operatoren,
Anforderungsbereiche, Punkte und Zeitschätzung, die im Artikel
https://oer-informatik.de/aufgaben-aufbau beschrieben sind.

Fachliche Grundlage:
- https://oer-informatik.de/css-grundlagen
- https://oer-informatik.de/szenario-mitfahrlabor
- Stilbeispiel: https://oer-informatik.de/css-grundlagen-uebungsaufgaben

Die Aufgaben sollen Inhalte zu diesen Schlagwörtern abdecken:
- CSS
- Selektor
- Kaskade
- Spezifität
- Box-Modell
- Flexbox
- Grid
- Media Queries
- Kontrast

Kompetenzstufe: Kernkompetenz (alternativ: Basiskompetenz, Profilkompetenz, Expertise)
Anzahl: 1 Aufgabe mit Teilaufgaben
Bearbeitungszeit in Minuten ca.: <5 bis 30 min>
Szenario: eines der Szenarien aus dem Bauplan

Vorgehen:
1. Lies zuerst die verlinkten Artikel. Kannst Du keine Webseiten
   abrufen, sag mir das, statt zu raten.
2. Steht bei einer Angabe noch ein Platzhalter in <…>, frag mich
   zuerst danach. Richte Punkte und Zahl der Teilaufgaben nach der
   Bearbeitungszeit (ca. 0,9 min je Punkt).
3. Gib je Aufgabe Titel mit Kompetenzstufe, Ausgangssituation und
   Teilaufgaben mit Operator und Punktzahl aus, dazu die geschätzte
   Bearbeitungszeit.
4. Gib die Beispiellösungen mit Punkteverteilung erst aus, wenn ich
   danach frage.

Aufgabe 1.1: Bestandteile einer CSS-Regel benennen (Basiskompetenz)

Im Stylesheet für die Liste der Mitfahrgesuche steht diese Regel:

.gesuch .ort {
  font-weight: bold;
  font-size: 1.3rem;
}

Ergänze die Tabelle. (6 Punkte)

Aufgabe 1.2: Selektoren Elementen zuordnen (Basiskompetenz)

Die Seite mit den Gesuchen beginnt mit diesem HTML-Ausschnitt. Die Buchstaben in den Kommentaren bezeichnen jeweils das Element, das in derselben Zeile beginnt; (C) und (D) bezeichnen die beiden Links.

<nav>                                                    <!-- (A) -->
  <ul>                                                   <!-- (B) -->
    <li><a href="#gesuche">Gesuche</a></li>              <!-- (C) -->
    <li><a href="https://oer-informatik.de/szenario-mitfahrlabor">Über das Projekt</a></li> <!-- (D) -->
  </ul>
</nav>
<section id="gesuche">                                   <!-- (E) -->
  <h2>Offene Gesuche</h2>                                <!-- (F) -->
  <ul class="gesuche">                                   <!-- (G) -->
    <li class="gesuch bald">…</li>                       <!-- (H) -->
    <li class="gesuch">…</li>                            <!-- (I) -->
    <li class="gesuch">…</li>                            <!-- (J) -->
  </ul>
</section>

Gib für jeden Selektor an, welche der Elemente (A) bis (J) er auswählt. Wählt ein Selektor keines davon aus, notiere „keines“. (7 Punkte)

Aufgabe 2.1: Vorhersagen, welche Regel gilt (Kernkompetenz)

Für die Tabelle der Rückfahrten haben mehrere Personen im Projektteam Regeln ergänzt. Das HTML sieht so aus:

<section id="nach-hause">
  <table class="abfahrten">
    <tbody>
      <tr class="heute">
        <td>16:15</td>
        <td class="plaetze wenig">1</td>
      </tr>
    </tbody>
  </table>
</section>

Im Stylesheet stehen in dieser Reihenfolge:

/* Regel 1 */ td { color: #1b1b1b; }
/* Regel 2 */ .abfahrten td { color: #1d4f91; }
/* Regel 3 */ #nach-hause .plaetze { color: #5c3d00; }
/* Regel 4 */ td.plaetze.wenig { color: #b3261e; }
/* Regel 5 */ tr.heute { color: #0b6b2e; font-weight: bold; }

1. Gib die Spezifität der fünf Selektoren in der Form (IDs, Klassen, Elemente) an. (5 Punkte)

2. Bestimme, in welcher Farbe die Zelle mit der Uhrzeit 16:15 und die Zelle mit der 1 angezeigt werden, und begründe. (3 Punkte)

3. Erkläre, ob die beiden Zellen fett dargestellt werden. (2 Punkte)

4. Die Person, die Regel 4 geschrieben hat, wundert sich, warum ihre Farbe nicht erscheint. Sie schlägt vor, !important zu ergänzen. Beurteile den Vorschlag und nenne eine bessere Lösung. (2 Punkte)

Aufgabe 2.2: Maße mit dem Box-Modell berechnen (Kernkompetenz)

Jedes Gesuch soll als Kärtchen erscheinen. Für die Kärtchen gilt bei einer Grundschrift von 20 px (html { font-size: 125%; }):

.gesuch {
  width: 15rem;
  padding: 0.8rem;
  border: 3px solid #1d4f91;
  margin: 0.5rem;
}

Die Kärtchen stehen in einem Flex-Container mit flex-wrap: wrap, dessen Inhaltsbereich 1000 px breit ist und der selbst keinen Innenabstand hat.

1. Berechne die sichtbare Breite (mit Rahmen) eines Kärtchens und den Platz, den es mit Außenabstand belegt. (2 Punkte)

2. Berechne beide Werte und die Breite des Inhaltsbereichs erneut, nachdem box-sizing: border-box ergänzt wurde. (3 Punkte)

3. Bestimme für beide Fälle, wie viele Kärtchen nebeneinander in eine Zeile passen. (2 Punkte)

4. Erläutere, warum die Hintergrundfarbe eines Kärtchens im Innenabstand zu sehen ist, im Außenabstand aber nicht. (1 Punkt)

Aufgabe 2.3: Die Liste der Mitfahrgesuche gestalten (Kernkompetenz)

Für den Flurmonitor gibt es eine neue Seite gesuche.html mit den offenen Mitfahrgesuchen. Wer kein Auto hat, gibt dort Haltepunkt, Richtung und ein Zeitfenster an, in dem die Abholung passt. Namen werden auf dem Monitor nicht gezeigt. Die Klasse bald kennzeichnet Gesuche, deren Zeitfenster in weniger als einer Stunde beginnt. Im main der Seite steht:

<section id="gesuche">
  <h2>Gesucht am <time datetime="2026-11-16">Montag, 16. November</time></h2>
  <ul class="gesuche">
    <li class="gesuch bald">
      <p class="ort">Gütersloh</p>
      <p>Hauptbahnhof, ZOB Steig 3</p>
      <p>zur Schule, <time datetime="06:30">06:30</time> bis <time datetime="07:00">07:00</time> Uhr</p>
    </li>
    <li class="gesuch">
      <p class="ort">Werther (Westf.)</p>
      <p>Kirchplatz</p>
      <p>zur Schule, <time datetime="06:45">06:45</time> bis <time datetime="07:15">07:15</time> Uhr</p>
    </li>
    <li class="gesuch">
      <p class="ort">Halle (Westf.)</p>
      <p>Marktplatz</p>
      <p>nach Hause, <time datetime="15:15">15:15</time> bis <time datetime="16:00">16:00</time> Uhr</p>
    </li>
    <li class="gesuch">
      <p class="ort">Bad Salzuflen</p>
      <p>Busbahnhof</p>
      <p>nach Hause, <time datetime="16:00">16:00</time> bis <time datetime="16:45">16:45</time> Uhr</p>
    </li>
  </ul>
</section>

Die Datei css/gesuche.css ist bereits eingebunden und enthält:

:root {
  --farbe-akzent: #1d4f91;
  --farbe-warnung: #fff1c2;
  --abstand: 1rem;
}

html {
  font-size: 125%;
}

body {
  margin: 0;
  padding: var(--abstand);
  font-family: "Segoe UI", Arial, sans-serif;
  color: #1b1b1b;
}

Ergänze css/gesuche.css um Regeln, die folgende Anforderungen erfüllen. Nutze die vorhandenen Variablen und ändere das HTML nicht. (8 Punkte)

• Die Gesuche stehen ohne Aufzählungszeichen und ohne Einrückung nebeneinander, mit dem Abstand --abstand zwischen den Kärtchen; reicht die Breite nicht, beginnt eine neue Zeile.

• Jedes Gesuch ist ein Kärtchen mit 15rem Breite, Innenabstand --abstand und einem 2 px breiten Rahmen in der Akzentfarbe mit leicht abgerundeten Ecken.

• Die Absätze im Kärtchen haben keine Außenabstände.

• Der Ort steht fett in 1.3rem.

• Gesuche mit der Klasse bald sind mit der Warnfarbe hinterlegt und tragen zusätzlich vor dem Ort den fett gedruckten Text „Bald:“, damit die Information nicht allein über die Farbe vermittelt wird.

.gesuche {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gesuch {
  width: 15rem;
  padding: var(--abstand);
  border: 2px solid var(--farbe-akzent);
  border-radius: 0.4rem;
}

.gesuch p {
  margin: 0;
}

.gesuch .ort {
  font-size: 1.3rem;
  font-weight: bold;
}

.bald {
  background-color: var(--farbe-warnung);
}

.bald::before {
  content: "Bald: ";
  font-weight: bold;
}

Aufgabe 3.1: Das Layout für einen hochkant montierten Monitor reparieren (Profilkompetenz)

Am zweiten Flurmonitor vor dem Lehrerzimmer sollen Gesuche, Angebote und der Hinweis der Schulverwaltung gemeinsam erscheinen. Das HTML enthält im main in dieser Reihenfolge <section id="gesuche">, <section id="angebote"> und <aside>. Das Stylesheet lautet:

@media (orientation: portrait) {
  main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "gesuche"
      "angebote"
      "hinweis";
  }
}

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "gesuche angebote"
    "gesuche hinweis";
  gap: 1rem;
}

#gesuche {
  grid-area: gesuche;
}

#angebote {
  grid-area: angebote;
}

aside {
  grid-area: hinweis;
}

1. Skizziere, wie die drei Bereiche auf einem quer montierten Monitor angeordnet sind, und gib die Breitenverhältnisse an. (2 Punkte)

2. Nach der Montage meldet der Hausmeister: „Der Monitor hängt hochkant, aber die Seite sieht genauso aus wie auf dem Monitor im Eingang, nur schmaler.“ Erkläre die Ursache. (3 Punkte)

3. Das Team entscheidet sich für ein anderes Hochformat: Der Hinweis soll oben über die ganze Breite stehen, darunter Gesuche und Angebote gleich breit nebeneinander. Notiere die korrigierte Media Query und gib an, wo sie im Stylesheet stehen muss. (4 Punkte)

4. Im Hochformat erscheint der Hinweis nun als Erstes, im HTML steht das aside aber am Ende. Beurteile, ob das ein Problem ist, und begründe. (2 Punkte)

@media (orientation: portrait) {
  main {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hinweis hinweis"
      "gesuche angebote";
  }
}

Aufgabe 3.2: Kontrastmängel finden und beheben (Profilkompetenz)

Ein Teammitglied hat für die Gesuche-Seite ein eigenes Farbschema entworfen. Die Grundschrift beträgt 20 px, der Seitenhintergrund ist weiß (#ffffff).

:root {
  --text: #999999;
  --akzent: #2a78d6;
  --fokus: #ffcc00;
}

body {
  color: var(--text);
  background-color: #ffffff;
}

h2 {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--akzent);
}

thead th {
  font-weight: normal;
  color: #ffffff;
  background-color: var(--akzent);
}

a:focus-visible {
  outline: 2px solid var(--fokus);
}

.gesuch {
  border: 1px solid #dddddd;
}

.bald {
  color: #c0392b;
}

Ein Kontrastrechner liefert diese Werte:

1. Prüfe für den Fließtext, die Überschriften h2, die Tabellenköpfe und den Fokusrahmen, ob sie die Anforderungen der WCAG 2.2 in Stufe AA erfüllen. Begründe jeweils mit dem passenden Grenzwert. (4 Punkte)

2. Der Rahmen der Kärtchen hat einen noch geringeren Kontrast. Beurteile, ob das ein Mangel im Sinne der WCAG ist. (1 Punkt)

3. Die Regel .bald erfüllt die Kontrastanforderung. Erläutere, welcher andere Mangel trotzdem besteht, und wie er behoben wird. (2 Punkte)

4. Schlage für die festgestellten Mängel geänderte Farben bzw. Deklarationen vor und gib an, wie Du ihre Eignung nachweist. (4 Punkte)

:root {
  --text: #595959;      /* 7,0:1 auf Weiß */
  --akzent: #1d4f91;    /* 8,1:1 mit Weiß, auch für den Tabellenkopf */
  --fokus: #b3261e;     /* 6,5:1 auf Weiß */
}

a:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

Links und weitere Informationen

• zum Nachlesen: CSS-Grundlagen: Webseiten gestalten mit Selektoren, Box-Modell, Flexbox und Grid

• zum Prüfen: W3C: CSS Validation Service

• zu Kontrasten: WebAIM Contrast Checker

• als Nachschlagewerk: MDN Web Docs: CSS-Referenz

Hinweis zur Nachnutzung als Open Educational Resource (OER)

Dieser Artikel und seine Texte, Bilder, Grafiken, Code und sonstiger Inhalt sind - sofern nicht anders angegeben - lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: “Übungsaufgaben zu den CSS-Grundlagen: Selektoren, Box-Modell und Layout für Mitfahrgesuche” von oer-informatik.de (H. Stein), Lizenz: CC BY 4.0. Der Artikel wurde unter https://oer-informatik.de/css-grundlagen-uebungsaufgaben veröffentlicht, die Quelltexte sind in weiterverarbeitbarer Form verfügbar im Repository unter https://gitlab.com/oer-informatik/programmierung/web-grundlagen. Erstellt mit KI-Assistenz; von mir umfassend redaktionell überarbeitet, geprüft und freigegeben. Stand: 11.11.2026.

[Kommentare zum Artikel lesen, schreiben] / [Artikel teilen] / [gitlab-Issue zum Artikel schreiben]