Intro

Was ihr nach diesem Kapitel können solltet

Ihr solltet ein vorgegebenes Design einspaltig nachbauen können, sodass es visuell übereinstimmt. Dafür verwendet ihr ausschließlich CSS über externe Stylesheets - noch ganz ohne Flexbox/Grid.

Farben aus der Vorlage korrekt übernehmen (Hintergrund, Text, Buttons, Akzente) - per Hex/RGB/HSL
Schriftarten passend wählen bzw. einbinden (Google Fonts o.ä.) und mit sinnvollem Font-Stack als Fallback versehen
Schriftgrößen & -gewichte an die Vorlage anpassen (Überschriften vs. Fließtext unterscheiden), Einheiten mit rem
Abstände über das Box-Modell nachbauen & in eigenen Worten das Boxmodel erklären: padding, margin, border, inkl. box-sizing: border-box
Bilder passend skalieren und zuschneiden, Hintergrundbilder einsetzen

Recap: Wo stehen wir?

Bisher (Session 1–2): nur HTML

<article class="card">
  <h2>Produktname</h2>
  <p>Eine kurze Beschreibung des Produkts.</p>
  <button>In den Warenkorb</button>
</article>

Neuer semantischer Tag! Wann verwendet man `<article>`?

<article> steht für einen in sich abgeschlossenen Inhalt, der auch für sich alleine Sinn ergeben würde - z.B. wenn man ihn herauslöst und woanders einbettet.

Typische Beispiele:

Ein Blogpost oder Newsartikel
Eine Produktkarte in einem Shop
Ein Kommentar oder Forenbeitrag
Ein Social-Media-Post

Faustregel: Kann der Block alleine stehen? → <article>. Ist es nur ein thematischer Abschnitt einer Seite → <section>. Ist es nur ein Container fürs Styling ohne Bedeutung → <div>.

Und neues Attribut! Was ist `class`?

class ist ein HTML-Attribut, mit dem wir Elementen einen selbst gewählten Namen geben. Der Name hat für den Browser keine Bedeutung - er dient uns als „Etikett“, damit wir die Elemente später mit CSS (oder JavaScript) gezielt ansprechen können.

<article class="card">...</article>
<article class="card featured">...</article>

Mehrere Elemente dürfen dieselbe Klasse haben → alle Karten sehen gleich aus
Ein Element kann mehrere Klassen haben (durch Leerzeichen getrennt)
Den Namen sollte man nach der Bedeutung wählen (card, warning), nicht nach dem Aussehen (red-box)

Und was ist `id`?

Neben class gibt es noch das Attribut id. Auch damit gibt man einem Element einen Namen, aber mit einem wichtigen Unterschied: Eine id darf im ganzen Dokument nur ein einziges Mal vorkommen.

<header id="seitenkopf">...</header>
<article class="card">...</article>
<article class="card">...</article>

	`class`	`id`
Wie oft pro Seite?	beliebig oft	genau einmal
Wie viele pro Element?	mehrere (`class="card featured"`)	nur eine
Typischer Einsatz	Styling von wiederkehrenden Elementen	ein einzigartiges Element, Sprungmarke (`seite.html#seitenkopf`), Verknüpfung mit Formularfeldern oder JavaScript
In CSS	`.card`	`#seitenkopf`

Wie wir Klassen und IDs in CSS ansprechen (.card { ... }, #seitenkopf { ... }), sehen wir gleich bei den Selektoren.

Das ist reine Struktur - der Browser zeigt es mit Standard-Styles an
Kein Layout, keine Farben, keine Schriftgestaltung nach unseren Wünschen
Heute: Wir fangen an, dieses HTML gestalten zu können

HTML = was es ist (Bedeutung/Struktur) CSS = wie es aussieht (Präsentation)