LU02: Fonts, CSS-Variablen, Cascade & Media Queries [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== LU02: Fonts, CSS-Variablen, Cascade & Media Queries ======

<WRAP center round box 80%>
**Ziel von LU02:** Sie bringen Ihr Projekt „Landingpage Alarado“ optisch näher ans Figma-Design, indem Sie
\\
  - die Schrift (Google Font) einbinden,
  - Designwerte als CSS-Variablen definieren und
  - mit Media Queries das Responsive-Layout für Mobile umsetzen.
</WRAP>

==== Lernziele ====
  * Sie können eine Google Font per ''<link>'' einbinden und als ''font-family'' verwenden.
  * Sie verstehen ''px'', ''em'' und ''rem'' und setzen Schriftgroessen konsistent um.
  * Sie können CSS-Variablen in '':root'' definieren und mit ''var(...)'' einsetzen.
  * Sie verstehen die CSS-**Kaskade** (Vererbung, Spezifität, Reihenfolge).
  * Sie können Media Queries für Responsive Design nutzen und mit DevTools testen.

----

===== 1) Fonts im Web =====
{{:de:modul:m291:learningunits:lu02:theorie:jon-tyson-x5bnzeywcug-unsplash_700.jpg?nolink&400|}}

==== Google Fonts via CDN ====
In vielen Projekten werden Fonts schnell über ein CDN eingebunden (z.B. Google Fonts). Das ist praktisch für Schulprojekte und schnelle Prototypen.

<WRAP center round box 80%>
**Typischer Aufbau im ''<head>''** (hier mit **Poppins**):
<code html>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
  rel="stylesheet"
/>
</code>
</WRAP>

<WRAP center round box 80%>
**Dann im CSS verwenden:**
<code css>
body {
  font-family: "Poppins", sans-serif;
}
</code>
</WRAP>

<WRAP center round tip 70%>
**Praxis-Hinweis:** In professionellen Projekten werden Fonts oft **lokal** gespeichert (Datenschutz, Performance, Offline-Fähigkeit). Für dieses Modul genügt zu Beginn das Einbinden via ''<link>''. ((CDN-Fonts sind bequem, aber Sie sind abhängig von einem externen Dienst.))
</WRAP>

==== Fonts lokal speichern ====
Wenn Fonts lokal im Projekt liegen, werden sie mit ''@font-face'' eingebunden.

<WRAP center round box 80%>
<code css>
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
</code>
</WRAP>

((Für lokale Fonts brauchen Sie die Font-Dateien im Projekt, idealerweise ''woff2''.))

==== Wichtige Font-Eigenschaften ====
  * ''font-family'': Schriftfamilie mit Fallback (z.B. ''sans-serif'')
  * ''font-weight'': Schriftschnitt (400 normal, 700 bold) ((Nicht jede Font bietet jede Weight-Stufe.))
  * ''font-style'': normal oder italic
  * ''text-transform'': Darstellung (z.B. ''uppercase'') ((Der Inhalt bleibt gleich, nur die Darstellung ändert sich.))
  * ''line-height'': Zeilenhöhe (Best Practice: **einheitenlos**, z.B. ''1.4'')

----

==== Einheiten bei Schriftgroessen ====

<WRAP center round box 80%>
**Wichtig:** Bei Schriftgroessen geht es nicht nur um „schön“, sondern auch um **Skalierung, Wartbarkeit und Accessibility**.
\\
Viele Menschen nutzen Browser-Zoom oder haben eine grössere Standard-Schrift eingestellt.
</WRAP>

=== px ===
  * ''px'' ist eine „fixe“ Design-Einheit: ''16px'' bleibt rechnerisch 16px.
  * Vorteil: direkt und einfach.
  * Nachteil: In grossen Projekten wird es schnell unübersichtlich, weil Anpassungen an vielen Stellen nötig werden.

((Browser-Zoom vergrössert zwar alles. Trotzdem ist ''px'' oft weniger flexibel, wenn Sie ein Designsystem skalieren oder mehrere Breakpoints sauber pflegen wollen.))

<WRAP center round box 80%>
<code css>
h1 { font-size: 64px; }
p  { font-size: 18px; }
</code>
</WRAP>

=== em ===
  * ''1em'' entspricht der **berechneten Schriftgroesse** (''font-size'') des aktuellen Elements.
  * ''em'' wirkt wie ein Faktor: ''2em'' ist doppelt so gross wie die Schriftgroesse des Eltern-Elements.

((Historisch stammt „em“ aus der Typografie. In CSS ist ''em'' eine Recheneinheit: 1em = aktuelle ''font-size''.))

<WRAP center round box 80%>
<code css>
body { font-size: 16px; }  /* Basis */
h1   { font-size: 2em; }   /* 2 × 16px = 32px */
</code>
</WRAP>

**Die typische EM-Falle**
Wenn mehrere Eltern-Elemente die Schrift bereits verändern, multipliziert sich der Effekt:

<WRAP center round box 80%>
<code css>
body { font-size: 1.2em; }  /* 1.2 × 16px = 19.2px */
div  { font-size: 1.3em; }  /* 1.3 × 19.2px = 24.96px */
h1   { font-size: 2em; }    /* 2 × 24.96px = 49.92px */
</code>
</WRAP>

((Darum ist ''em'' für globale Typografie manchmal schwerer zu kontrollieren, wenn viel verschachtelt wird.))

**Wann ist em sinnvoll**
  * Für Proportionen innerhalb einer Komponente: Padding, Icon-Grössen, Abstände, die mit dem Text mitwachsen sollen.

<WRAP center round box 80%>
<code css>
button {
  font-size: 1rem;
  padding: 0.8em 1.2em; /* wächst mit der Button-Schrift */
}
</code>
</WRAP>

=== rem ===
  * ''1rem'' ist relativ zur Schriftgroesse des Root-Elements ''html''.
  * Vorteil: bleibt konsistent, egal wie tief ein Element verschachtelt ist.

<WRAP center round box 80%>
<code css>
html { font-size: 16px; }
h1   { font-size: 4rem; }      /* 64px */
p    { font-size: 1.125rem; }  /* 18px */
</code>
</WRAP>

((Mit ''rem'' vermeiden Sie „Schriftgroessenvermehrung“ durch verschachtelte Elemente.))

==== Empfehlung für dieses Modul ====
  * Für Schriftgroessen überwiegend **rem** verwenden.
  * **em** gezielt innerhalb von Komponenten einsetzen.
  * **px** sparsam einsetzen, z.B. für 1px Linien oder sehr feine Details.

==== line-height ====
Setzen Sie ''line-height'' möglichst **einheitenlos**, z.B.:

<WRAP center round box 80%>
<code css>
body { line-height: 1.4; }
</code>
</WRAP>

((Einheitenlose ''line-height'' skaliert automatisch mit der Schriftgroesse.))

----

===== 2) CSS-Variablen =====

==== Was sind CSS-Variablen ====
CSS-Variablen sind benannte Werte, die Sie einmal zentral definieren und dann überall wiederverwenden.

<WRAP center round box 80%>
<code css>
:root {
  --primary: #263fa9;
  --text: #223344;
  --h1-size: 4rem;
}

body { color: var(--text); }
button { background: var(--primary); }
h1 { font-size: var(--h1-size); }
</code>
</WRAP>

==== Warum lohnt sich das ====
  * **Wiederverwendbarkeit:** weniger Copy/Paste, weniger Fehler
  * **Wartbarkeit:** 1 Änderung in '':root'' wirkt im ganzen Projekt
  * **Lesbarkeit:** Namen sind verständlicher als zufällige Hex-Zahlen

<WRAP center round box 80%>
**Vergleich zu Print-Design**
\\
CSS-Variablen funktionieren ähnlich wie Absatz- und Zeichenstile: Sie definieren Werte zentral und wenden sie konsistent an.
</WRAP>

----

===== 3) CSS Cascade =====
{{:de:modul:m291:learningunits:lu02:theorie:ezgi-kimball-jg8jcmefhdg-unsplash_700.jpg?nolink&500|}}
\\
//Viele CSS-Regeln funktionieren nach dem Prinzip "Wasserfall" -> Styles, die für Elemente ganz "oben" im HTML definiert wurden, vererben sich an Elemente weiter "unten" in der HTML-Struktur (gemeint sind Kinder-Elemente)//

<WRAP center round box 80%>
**Was ist die Kaskade**
\\
Die CSS-Kaskade entscheidet, welche CSS-Regel am Ende wirklich angewendet wird, wenn mehrere Regeln dasselbe Element betreffen.
</WRAP>

==== Vererbung ====
Einige Eigenschaften werden von Eltern an Kinder **vererbt**.

  * Häufig vererbt: ''color'', ''font-*'', ''line-height'', ''text-transform''
  * Meist nicht vererbt: ''background-*'', ''margin/padding'', ''border'', ''width/height'', ''display''

<WRAP center round box 80%>
<code css>
body {
  font-family: "Poppins", sans-serif;
  color: #223344;
  line-height: 1.4;
}
</code>
</WRAP>

==== Überschreiben ====
Wenn zwei Regeln dieselbe Eigenschaft setzen, gilt diese Reihenfolge:

  - **Wichtigkeit:** ''!important'' gewinnt ((Nur im Ausnahmefall verwenden.))
  - **Spezifität:** ID schlägt Klasse, Klasse schlägt Element
  - **Reihenfolge:** bei gleicher Spezifität gewinnt die spätere Regel

<WRAP center round box 80%>
<code css>
a { color: black; }
.menu a { color: gray; }
a.active { color: blue; }
#special a { color: red; }
</code>
</WRAP>

==== Reihenfolge im CSS ====
Bei gleicher Spezifität gewinnt die Regel, die später im CSS steht.

<WRAP center round box 80%>
<code css>
.menu a { color: gray; }
.menu a { color: green; } /* gewinnt, weil später */
</code>
</WRAP>

Für ein vertieftes Verständnis schauen Sie sich diese interaktive Darstellung an:
[[https://2019.wattenberger.com/blog/css-cascade|CSS Cascade]]

----

===== 4) Media Queries und Responsive Design =====
{{:de:modul:m291:learningunits:lu02:theorie:media-queries.webp| Responsive Media Queries: Desktop, Tablet, Mobile}}

==== Was macht eine Media Query ====
Media Queries passen die Darstellung an verschiedene Bildschirmbreiten an. Der Inhalt bleibt gleich, nur das Layout ändert sich.

==== Breakpoints ====
Ein Breakpoint ist eine Breite, bei der Sie das Layout anpassen, weil es sonst nicht mehr sauber wirkt.

<WRAP center round box 80%>
<code css>
@media (width < 1024px) { ... }
</code>
</WRAP>

Typische Hinweise, dass ein Breakpoint nötig ist:
  * Elemente überlappen oder stossen sich
  * Navigation passt nicht mehr
  * 2 Spalten werden zu eng
  * horizontales Scrollen entsteht

<WRAP center round tip 70%>
**Merksatz:** Ein Breakpoint ist ein Layout-Umbruchpunkt, nicht ein „Handy-Mass“.
</WRAP>

==== Beispiel aus unserem Projekt ====
Desktop: Text links, Bild rechts.
Mobile: Bild oben, Text darunter.

<WRAP center round box 80%>
<code css>
#hero-section { flex-direction: row; }

@media screen and (width < 1024px) {
  #hero-section { flex-direction: column-reverse; }
}
</code>
</WRAP>

==== Media Queries und Kaskade ====
Media Queries folgen denselben Regeln wie normales CSS:
  * Bei aktivem Breakpoint überschreiben Sie nur die Eigenschaften, die sich ändern.
  * Bei gleicher Spezifität gewinnt die Regel, die später kommt.

----

===== 5) Responsive Testing mit DevTools =====
{{:de:modul:m291:learningunits:lu02:theorie:screenshot_2026-02-02_at_00.23.31.png?direct&1100| Screenshot Chromebrowser mit Dev-Tools }}

  * Öffnen Sie DevTools (Chrome/Edge: F12)
  * Aktivieren Sie Device Toolbar (Handy/Tablet Symbol)
  * Testen Sie:
    - Breitenwechsel über/unter 1024px
    - Presets (z.B. iPhone, iPad)
    - Hoch-/Querformat
  * Prüfen Sie:
    - Überlappungen oder abgeschnittene Bereiche
    - horizontales Scrollen
    - Lesbarkeit der Schrift

<WRAP center round box 80%>
**Praxis-Tipp**
\\
Wenn etwas nicht greift: DevTools → „Styles“ öffnen und schauen, welche Regel durchgestrichen ist. Das ist Kaskade in Aktion.
</WRAP>