THM Notes
WebP 1
VorlesungSoSe 26CSSBootstrapSelektorenBoxmodellFlexboxGridResponsiv

WebP 1 – CSS und Bootstrap

28. April 2026WebP 1
Modulglossar

Zusammenfassung

CSS (Cascading Style Sheets) ist die Sprache, die das Aussehen von HTML-Seiten bestimmt. Während HTML sagt was auf der Seite ist, sagt CSS wie es aussieht — Farben, Schriften, Abstände, Layouts. CSS besteht aus Regeln nach dem Schema Selektor { Eigenschaft: Wert; }. Eine wichtige Eigenschaft von CSS ist die Kaskade: Mehrere Regeln können dasselbe Element betreffen, und eine definierte Reihenfolge (Spezifität) entscheidet, welche gewinnt. Für komplexe Layouts gibt es moderne Werkzeuge wie Flexbox und Grid. Damit Webseiten auf Smartphones genauso gut aussehen wie auf Monitoren, nutzt man Media Queries und den mobile-first-Ansatz. Fertige CSS-Frameworks wie Bootstrap erleichtern die Arbeit enorm.

Schlüsselbegriffe

CSS

Cascading Style Sheets. Die Sprache zur Gestaltung von HTML-Seiten: Farben, Schriften, Abstände, Layout. CSS-Regeln folgen immer dem Schema: Selektor { Eigenschaft: Wert; }

Selektor

Der Teil einer CSS-Regel, der bestimmt, welche HTML-Elemente die Regel betrifft. Beispiele: p (alle Absätze), .box (alle Elemente mit class='box'), #logo (das Element mit id='logo').

Kaskade

Das 'C' in CSS — mehrere CSS-Regeln können dasselbe Element betreffen. Die Kaskade legt fest, welche Regel gewinnt: Reihenfolge, Herkunft und Spezifität bestimmen das Ergebnis.

Spezifität

Wie 'stark' eine CSS-Regel ist. Rangfolge: !important > Inline-Style > ID (#) > Klasse (.) > Element. Eine ID-Regel überschreibt immer eine Klassen-Regel, auch wenn sie weiter oben steht.

Boxmodell

Jedes HTML-Element ist eine rechteckige Box mit vier Schichten: content (Inhalt) → padding (Innenabstand) → border (Rahmen) → margin (Außenabstand).

Flexbox

Ein CSS-Layout-Modus für eine Zeile (oder Spalte) voller Elemente. Mit display: flex werden Kindelemente nebeneinander angeordnet und können flexibel wachsen oder schrumpfen.

CSS Grid

Ein CSS-Layout-Modus für zweidimensionale Raster. Mit display: grid lassen sich Seiten in Zeilen und Spalten aufteilen — ideal für ganze Seitenlayouts.

Media Query

Eine CSS-Bedingung, die Regeln nur bei bestimmten Bildschirmgrößen anwendet. Beispiel: @media (min-width: 600px) { ... } gilt nur auf Bildschirmen ab 600 px Breite.

Bootstrap

Ein CSS-Framework von Twitter (2011). Liefert vorgefertigte CSS-Klassen für Raster, Buttons, Formulare und mehr. Das Rastersystem basiert auf 12 Spalten.

Pseudo-Klasse

Spezielle CSS-Selektoren, die den Zustand eines Elements beschreiben (z. B. :hover für Mauszeigerkontakt, :focus bei Tastatureingabe).

Viewport

Der sichtbare Bereich einer Webseite im Browser. Die Größe des Viewports variiert je nach Gerät (Mobiltelefon, Tablet, Desktop) und kann in CSS angesprochen werden.

Kernkonzepte

Wie CSS in HTML eingebunden wird

CSS kann auf drei Wegen angewendet werden:
<!-- 1. Externe Stylesheet-Datei (empfohlen) -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
 
<!-- 2. Inline-Style (nur für Ausnahmen) -->
<p style="color: red;">Roter Text</p>
 
<!-- 3. <style>-Block im <head> (für kleine Projekte) -->
<head>
  <style>
    p { color: blue; }
  </style>
</head>
Klausurrelevant
Immer externe CSS-Dateien bevorzugen. So bleibt die Trennung von HTML (Struktur) und CSS (Aussehen) erhalten. Inline-Styles sind schwer wartbar und schwer überschreibbar.

Selektoren

CSS-Regeln folgen immer dem Schema:
selektor {
  eigenschaft: wert;
}

Die wichtigsten Selektoren

SelektorSyntaxTrifft auf
Elementp { }Alle <p>-Elemente
Klasse.box { }Alle Elemente mit class="box"
ID#logo { }Das Element mit id="logo"
Dynamika:hover { }Links beim Drüberfahren mit der Maus
Kombinationdiv p { }<p> innerhalb von <div>
/* Element-Selektor */
p {
  color: black;
  font-size: 16px;
}
 
/* Klassen-Selektor */
.highlight {
  background-color: yellow;
}
 
/* ID-Selektor */
#haupttitel {
  font-size: 2em;
  font-weight: bold;
}
 
/* Dynamischer Selektor (Pseudoklasse) */
a:hover {
  color: red;
  text-decoration: underline;
}

Kaskade und Spezifität

Was passiert, wenn mehrere Regeln dasselbe Element betreffen?
p { color: black; }      /* Verliert */
.text { color: blue; }   /* Verliert */
#intro { color: red; }   /* Gewinnt — ID hat höchste Spezifität */
Die Rangfolge von schwach nach stark:
  1. Element-Selektor (p, div)
  2. Klassen-Selektor (.klasse)
  3. ID-Selektor (#id)
  4. Inline-Style (style="..." im HTML)
  5. !important — überschreibt alles (nur im Notfall verwenden!)
p { color: red !important; } /* Gewinnt immer — aber sparsam einsetzen! */

Das Boxmodell

Jedes HTML-Element ist eine Rechteck-Box mit vier Schichten. Von innen nach außen:
┌─────────────────────────────────────────┐
│                 margin                  │
│   ┌─────────────────────────────────┐   │
│   │             border              │   │
│   │   ┌─────────────────────────┐   │   │
│   │   │         padding         │   │   │
│   │   │   ┌─────────────────┐   │   │   │
│   │   │   │    content      │   │   │   │
│   │   │   └─────────────────┘   │   │   │
│   │   └─────────────────────────┘   │   │
│   └─────────────────────────────────┘   │
└─────────────────────────────────────────┘
SchichtCSS-EigenschaftBedeutung
contentwidth, heightDer eigentliche Inhalt (Text, Bild)
paddingpaddingInnenabstand (zwischen Inhalt und Rahmen)
borderborderRahmen um das Element
marginmarginAußenabstand (zwischen diesem und anderen Elementen)
.karte {
  width: 300px;
  height: 150px;
  padding: 20px;           /* 20px auf allen vier Seiten */
  border: 2px solid black;
  margin: 10px;            /* 10px Abstand zu anderen Elementen */
}
 
/* Einzelne Seiten setzen: */
.karte {
  padding-top: 10px;
  padding-right: 20px;
  margin-left: 5px;
  border-bottom: 1px dashed gray;
}
Tipp
Kurzschreibweise für padding und margin: padding: oben rechts unten links (Uhrzeigersinn). padding: 10px 20px setzt oben/unten auf 10px und links/rechts auf 20px.
Info
Margin-Kollaps: Bei übereinanderstehenden Block-Elementen addieren sich die Margins nicht — der größere gewinnt. Wenn div unten margin-bottom: 20px hat und das folgende p margin-top: 10px, beträgt der Abstand 20px (nicht 30px).

Layouting

Position

Mit position steuert man, wie ein Element im Seitenfluss positioniert wird:
WertBedeutung
staticStandard — Element folgt normalem Fluss
relativeElement bleibt im Fluss, kann aber verschoben werden
absoluteElement aus dem Fluss genommen, relativ zum nächsten positionierten Elternelement
fixedImmer sichtbar, relativ zum Browser-Fenster (z. B. Sticky-Header)
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Responsivität und Mobile-First

Webseiten werden heute öfter auf dem Smartphone als auf dem Desktop aufgerufen. Mobile-first bedeutet: Erst für kleine Bildschirme gestalten, dann für größere erweitern.
/* Basisstil für Handys */
.container {
  font-size: 14px;
  padding: 10px;
}
 
/* Ab 600px (Tablets) */
@media (min-width: 600px) {
  .container {
    font-size: 16px;
    padding: 20px;
  }
}
 
/* Ab 1024px (Desktops) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Flexbox — für eine Zeile von Elementen

Flexbox eignet sich für Navigationsleisten, Karten in einer Reihe, zentrierte Inhalte.
.nav {
  display: flex;
  gap: 16px;                 /* Abstand zwischen Elementen */
  justify-content: center;   /* Horizontal zentrieren */
  align-items: center;       /* Vertikal zentrieren */
}
<nav class="nav">
  <a href="/">Start</a>
  <a href="/über">Über uns</a>
  <a href="/kontakt">Kontakt</a>
</nav>

CSS Grid — für zweidimensionale Layouts

Grid eignet sich für Seitenlayouts mit mehreren Bereichen (Sidebar + Hauptinhalt).
.seite {
  display: grid;
  grid-template-columns: 200px 1fr;  /* Sidebar + Hauptinhalt */
  grid-template-rows: auto 1fr auto; /* Header + Inhalt + Footer */
  gap: 20px;
  min-height: 100vh;
}
<div class="seite">
  <header>Navigation</header>
  <aside>Sidebar</aside>
  <main>Hauptinhalt</main>
  <footer>Fußzeile</footer>
</div>
Tipp
Faustregel: Flexbox für eine Dimension (alles in einer Zeile/Spalte), Grid für zwei Dimensionen (Zeilen UND Spalten gleichzeitig).

Bootstrap

Bootstrap ist ein CSS-Framework — ein vorgefertigtes Paket von CSS-Klassen und Komponenten. Entwickelt 2011 von Twitter-Entwicklern, heute Open Source.
Warum Bootstrap?
  • Vorgefertigte Stile für Buttons, Formulare, Karten, Modals, Tabellen
  • Eingebautes responsives 12-Spalten-Raster
  • Browser-Kompatibilität ist bereits gelöst

Bootstrap einbinden

Option 1: CDN (einfach, kein Download nötig)
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
Option 2: npm (für Projekte mit Build-Tooling)
npm install bootstrap

Das Bootstrap-Rastersystem

Bootstrap teilt die Seitenbreite in 12 Spalten. Mit class="col-X" bestimmt man, wie viele Spalten ein Element einnimmt.
<div class="container">
  <div class="row">
    <div class="col-md-8">Hauptinhalt (8 von 12 Spalten)</div>
    <div class="col-md-4">Sidebar (4 von 12 Spalten)</div>
  </div>
</div>
KlasseBildschirmbreite
col-Alle Größen
col-sm-Ab 576px (Smartphone quer)
col-md-Ab 768px (Tablet)
col-lg-Ab 992px (Desktop)
col-xl-Ab 1200px (Großer Monitor)

Bootstrap-Komponenten (Beispiele)

<!-- Button -->
<button class="btn btn-primary">Absenden</button>
<button class="btn btn-outline-danger">Abbrechen</button>
 
<!-- Karte -->
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Kartentitel</h5>
    <p class="card-text">Etwas Text dazu.</p>
    <a href="#" class="btn btn-primary">Los geht's</a>
  </div>
</div>
 
<!-- Alert -->
<div class="alert alert-warning">
  Achtung! Bitte alle Felder ausfüllen.
</div>

Bootstrap Icons und Fontawesome

Für Symbole (Icons) gibt es eigene Icon-Bibliotheken:
<!-- Bootstrap Icons (CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
 
<!-- Icon einbetten -->
<i class="bi bi-house"></i>        <!-- Haus-Icon -->
<i class="bi bi-envelope"></i>     <!-- E-Mail-Icon -->
 
<!-- Fontawesome (Alternative) -->
<i class="fa-solid fa-house"></i>

Lernkarten

Frage

Was bedeutet das 'C' in CSS (Cascading Style Sheets)?

Antwort

Cascading = kaskadierend. Mehrere CSS-Regeln können dasselbe Element betreffen. Die Kaskade legt eine Rangfolge fest: Spezifität und Reihenfolge bestimmen, welche Regel gewinnt.

Frage

Welche vier Schichten hat das Boxmodell, von innen nach außen?

Antwort

content → padding (Innenabstand) → border (Rahmen) → margin (Außenabstand). Jedes HTML-Element ist eine solche Box.

Frage

Was ist der Unterschied zwischen Flexbox und Grid?

Antwort

Flexbox ist eindimensional: Elemente werden in einer Zeile oder einer Spalte angeordnet. Grid ist zweidimensional: Elemente werden in einem Raster aus Zeilen UND Spalten angeordnet.

Frage

Was ist eine Media Query und wofür braucht man sie?

Antwort

Eine Bedingung in CSS, die Regeln nur bei bestimmten Bildschirmgrößen anwendet. Syntax: @media (min-width: 600px) { ... }. Damit werden Seiten responsiv — sie passen sich an Smartphone, Tablet und Desktop an.

Frage

Auf wie viele Spalten basiert das Bootstrap-Raster?

Antwort

12 Spalten. Mit class='col-md-6' nimmt ein Element 6 von 12 Spalten ein (= 50% der Breite). Zwei solche Elemente nebeneinander füllen die volle Breite.

Frage

Welche Spezifitäts-Rangfolge gilt in CSS?

Antwort

Von schwach nach stark: Element-Selektor < Klassen-Selektor < ID-Selektor < Inline-Style < !important. Eine ID-Regel überschreibt immer eine Klassen-Regel.

Frage

Was ist der Unterschied zwischen padding und margin?

Antwort

padding erzeugt einen Innenabstand zwischen dem Inhalt und dem Rahmen des Elements. margin erzeugt einen Außenabstand zwischen dem Rahmen des Elements und benachbarten Elementen.

Frage

Welche Funktion hat die CSS-Eigenschaft box-sizing: border-box;?

Antwort

Sie sorgt dafür, dass padding und border in die berechnete Breite und Höhe eines Elements eingerechnet werden, anstatt sie hinzuzufügen. Das macht Layouts berechenbarer.

Übungsfragen

Welcher CSS-Selektor trifft auf alle Elemente mit class='hinweis' zu?

In welcher Reihenfolge sind die Boxmodell-Schichten von innen nach außen angeordnet?

Was macht display: flex an einem Container-Element?

Was bedeutet 'mobile-first' bei der CSS-Entwicklung?

Welche Bootstrap-Klasse sorgt dafür, dass ein Element 6 von 12 Spalten auf Tablets (ab 768px) einnimmt?

Wie verhält sich ein Element mit der Eigenschaft position: fixed?