EMZETT.CSS (Cascading Style Sheets) legt das Aussehen von HTML fest. Du schreibst Regeln:
selektor {
eigenschaft: wert;
eigenschaft: wert;
}Ergebnis
- Der Selektor wählt Elemente aus
- Eine Deklaration besteht aus Eigenschaft, Doppelpunkt, Wert und Semikolon
- Kommentare:
/* Das ist ein Kommentar */
CSS einbinden
| Weg | Beispiel | Wann |
|---|---|---|
| Externe Datei | <link rel="stylesheet" href="stil.css"> | Standard, wiederverwendbar, wird gecacht |
| Interner Block | <style> ... </style> im <head> | kleine Seiten, Tests |
| Inline | <p style="color: red"> | nur für Ausnahmen, z. B. dynamische Werte |
Mehrere Dateien kannst du mit @import "datei.css"; laden (besser: mehrere <link>-Tags oder einen Bundler).
Die Kaskade: Warum "Cascading"?
Mehrere Regeln können auf dasselbe Element passen. Der Browser entscheidet nach drei Dingen:
- Wichtigkeit (
!importantschlägt normale Regeln, nur im Notfall nutzen) - Spezifität: genauere Selektoren gewinnen (
#id>.klasse>element) - Reihenfolge: bei gleichem Gewicht gewinnt die spätere Regel
Ergebnis
Vererbung
Manche Eigenschaften werden von Eltern an Kinder vererbt, vor allem Text-Eigenschaften (color, font-family, font-size, line-height, text-align). Layout-Eigenschaften (margin, padding, border, background) werden nicht vererbt.
Ergebnis
Mit inherit, initial und unset steuerst du das ausdrücklich:
Ergebnis
Einheiten
| Einheit | Bedeutung | Typisch für |
|---|---|---|
px | Bildschirmpunkt | Rahmen, feine Abstände |
% | Prozent des Elternelements | Breiten |
rem | Vielfaches der Schriftgröße des html-Elements (meist 16 px) | Schrift, Abstände (empfohlen) |
em | Vielfaches der Schriftgröße des aktuellen Elements | Abstände relativ zum Text |
vw, vh | 1 % der Fensterbreite/-höhe | Vollbild-Abschnitte |
ch | Breite der "0" | Zeilenlänge (max-width: 65ch) |
fr | Anteil am Platz (Grid) | Spalten |
deg, s, ms | Grad, Zeit | Rotation, Animation |
Nutze rem für Schriftgrößen, damit die Einstellung der Nutzerin (Schrift vergrößern) wirkt.
Selektoren-Vorschau
Ergebnis
Mehr dazu im nächsten Kapitel.
Werte kurz schreiben (Shorthands)
Ergebnis
Fehler finden
Öffne die Entwicklerwerkzeuge (F12) und wähle ein Element aus. Rechts siehst du alle Regeln, die gelten. Durchgestrichene Regeln wurden von anderen überschrieben, gelbe Warnzeichen zeigen ungültige Werte. Du kannst Werte live ändern.
Merke
- Regel = Selektor + Deklarationen (
eigenschaft: wert;) - CSS am besten in einer externen Datei
- Kaskade: Wichtigkeit, Spezifität, Reihenfolge
- Text-Eigenschaften werden vererbt, Layout-Eigenschaften nicht
remfür Schrift und Abstände,%/fr/vwfür Layout- Shorthand-Eigenschaften wie
margin,padding,border,fontfassen mehrere Werte zusammen
Aufgabe
Gestalte eine Seite mit Überschrift, drei Absätzen und einer Liste: eigene Farben, Schriftgröße in rem, mehr Zeilenabstand und einen Rahmen um die Liste.