IAD – Cheat Sheet

HTML & CSS Grundlagen. Links siehst du den Code, rechts das Resultat. Wie in den Browser-Webtools kannst du einzelne Eigenschaften mit der Checkbox ein- und ausschalten und Werte im Dropdown ändern.

1. CSS in HTML einbinden

Das Stylesheet wird im <head> mit einem <link>-Element eingebunden. Der Pfad in href ist relativ zur HTML-Datei. Pfade innerhalb der CSS-Datei (z.B. zu Fonts oder Bildern) sind dagegen relativ zur CSS-Datei – darum ../fonts/….

index.html
<!-- Checkbox = Stylesheet an/aus --> 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Velowerkstatt</title>
</head>
<body>
  <!-- Inhalt -->
</body>
</html>
Ordnerstruktur
projekt/
├── index.html
├── css/
│   └── styles.css
├── fonts/
│   └── spacegrotesk-regular.woff2
└── images/
    └── hero-velo.svg
Die 3 Möglichkeiten
<!-- 1. Extern (empfohlen!) -->
<link rel="stylesheet" href="css/styles.css">

<!-- 2. Intern im <head> -->
<style>
  h1 { color: red; }
</style>

<!-- 3. Inline (vermeiden) -->
<h1 style="color: red;">Titel</h1>
Resultat

Velowerkstatt Zürich

Schnelle Reparaturen, faire Preise und Express-Service für dein Velo.

Termin buchen

Tipp: Schalte den <link> aus – so sieht die Seite aus, wenn der Pfad falsch ist (häufigster Fehler!). Prüfen kannst du das in den Webtools unter Netzwerk: Eine rote 404 bedeutet «Datei nicht gefunden».

2. Heading-Struktur (h1–h6)

Überschriften bilden das Inhaltsverzeichnis der Seite – für Screenreader und Suchmaschinen. Regeln: genau ein <h1> pro Seite, keine Stufen überspringen (nach h2 kommt h3, nicht h4) und die Stufe nach Bedeutung wählen, nicht nach Grösse – die Grösse macht man mit CSS.

index.html
<h1>Velowerkstatt Zürich</h1>

  <h2>Unsere Leistungen</h2>
    <h3>Reparatur</h3>
      <h4>Platten flicken</h4>
        <h5>Preis</h5>
          <h6>inkl. MwSt.</h6>
    <h3>Express-Service</h3>

  <h2>Kontakt</h2>
/* Grösse kommt aus dem CSS, nicht vom Tag */
h2 { }
Resultat (Browser-Standardgrössen)

h1 Velowerkstatt Zürich

h2 Unsere Leistungen

h3 Reparatur

h4 Platten flicken

h5 Preis
h6 inkl. MwSt.

h3 Express-Service

h2 Kontakt

Tipp: Die Einrückung zeigt die Gliederung. Ein h2 darf auch klein aussehen – entscheidend ist die Struktur, nicht die Optik.

3. Schriften einbinden mit @font-face

Mit @font-face wird eine Schriftdatei (am besten .woff2) unter einem Namen registriert. Pro Schriftschnitt (Regular, Medium, Bold …) braucht es einen eigenen Block. Wichtig: @font-face alleine ändert noch nichts – die Schrift muss danach mit font-family verwendet werden.

css/styles.css
/* 1. Schrift registrieren (einmal pro Schnitt) */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/spacegrotesk-regular.woff2')
       format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/spacegrotesk-bold.woff2')
       format('woff2');
  font-weight: 700;
}
/* 2. Schrift verwenden */
.font-preview { }
Resultat

Velowerkstatt Zürich – schnelle Reparaturen, faire Preise.

Tipp: Schalte font-family aus – dann wird wieder die Schrift vom body geerbt. Ein Schnitt, der nicht per @font-face geladen wurde (z.B. 300), wird vom Browser durch den nächstliegenden ersetzt.

4. Box-Model

Jedes Element ist eine Box aus vier Schichten: content (Inhalt), padding (Innenabstand), border (Rahmen) und margin (Aussenabstand). Mit box-sizing: border-box gilt die width inklusive padding und border – das macht das Rechnen viel einfacher.

css/styles.css
.box {
}
Kurzschreibweise
/* 1 Wert: alle 4 Seiten */
margin: 20px;
/* 2 Werte: oben/unten  links/rechts */
margin: 20px 40px;
/* 4 Werte: oben rechts unten links (Uhrzeigersinn) */
margin: 10px 20px 30px 40px;
/* Element horizontal zentrieren */
margin: 0 auto;
Resultat
Inhalt .box
  • margin
  • border
  • padding
  • content

Sichtbare Breite der Box: –

Achtung: Viele Reset-Stylesheets setzen * { box-sizing: border-box; } für alle Elemente. Ohne diese Regel gilt content-box (Standard).

5. Bilder (<img>)

Ein Bild wird mit <img> eingefügt. Das Attribut alt beschreibt den Inhalt (für Screenreader und falls das Bild nicht lädt) und ist Pflicht. Ohne CSS wird ein Bild in seiner Originalgrösse angezeigt – und ragt so schnell aus seinem Container heraus.

index.html
<div class="img-parent">
  <img src="images/hero-velo.svg"
       alt="Illustration eines Velos">
</div>
css/styles.css
.img-parent img {
}
Resultat – Container unten rechts ziehen ↘
.img-parent Illustration eines Velos

Tipp: Mit width: 100% passt sich das Bild automatisch der Breite des Eltern-Elements an – verändere die Breite des Containers und schau, wie das Bild mitwächst. max-width: 100% (statt width) verkleinert nur, vergrössert aber nie über die Originalgrösse. height: auto behält das Seitenverhältnis, display: block entfernt den kleinen Spalt unter dem Bild.

6. Flexbox

Flexbox ordnet Elemente in einer Richtung an (Zeile oder Spalte). Die Eigenschaften gehören auf den Container, nicht auf die Items. justify-content verteilt entlang der Hauptachse, align-items richtet quer dazu aus.

css/styles.css
.flex-container {
}
index.html
<div class="flex-container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
Resultat
.flex-container
.itemA
.itemB
mit mehr
Inhalt
.itemC

Tipp: Bei flex-direction: column tauschen die Achsen – justify-content wirkt dann vertikal, align-items horizontal.

7. Grid

Jedes Grid braucht einen Container, welcher die Elemente beinhaltet. Dieser Container bestimmt mit grid-template-columns, wie die Elemente angeordnet werden. 1fr bedeutet «ein Teil vom verfügbaren Platz». Gibt es mehr Elemente als Spalten, wird automatisch auf eine neue Zeile umgebrochen.

css/styles.css
.grid-container {
}
index.html
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <!-- … bis 6 -->
</div>
Resultat
.grid-container
.item1
.item2
.item3
.item4
.item5
.item6

Tipp: Für responsive Layouts die Anzahl Spalten in einer @media-Query reduzieren, z.B. auf 1fr fürs Handy.