Einleitung
Dauer: 30 Minuten
Wiederholung und Live Coding
Themen:
- CSS allgemein
- Aufbau von CSS-Regeln
Ziele: In das Thema CSS einsteigen
Rückblick letzter Termin
Feedback bzw. Fragen zu „Learn HTML“ bei freeCodeCamp
- Wer hat dieses Tutorial durchgespielt?
- Wie lange hat es gedauert?
- War es nützlich?
Live Coding
➔ Kurze Besprechung des Pizza-Konfigurators (Formular)
HTML haben wir sehr schnell behandelt. Bei Bedarf werden wir im Zusammenhang mit CSS und JavaScript zusätzlich einzelne HTML-Elemente besprechen.
Praktische Schnellübersicht der HTML-Elemente in diesem Cheat sheet bei Codecademy
Einführung in CSS
CSS steht für „Cascading Style Sheets“ und wird verwendet, um die Gestaltung und Darstellung von HTML-Dokumenten zu beeinflussen.
- Stylesheets sind Dateien, die CSS beinhalten
- Cascading („kaskadierend“) meint vereinfacht ausgedrückt, dass bestimmte CSS-Regeln Vorrang gegenüber anderen haben können.
CSS ist im Vergleich zu HTML deutlich umfangreicher und komplexer. Wir werden heute und beim nächsten Termin grundlegende Prinzipien und Beispiele von CSS kennenlernen.
Mit CSS werden Regeln zur Gestaltung bestimmter HTML-Elemente definiert. Betrachten wir z.B. folgende CSS-Regel:
h1 {
color: red;
text-decoration: underline;
}Wird diese Regel auf ein HTML-Dokument angewendet (wie das
genau geht werden wir noch sehen), dann bewirkt diese, dass
Hauptüberschriften (bzw. h1-Elemente) eine rote Schriftfarbe
erhalten und unterstrichen dargestellt werden.
Live Coding
➔ Beispiel in Codepen zeigen mit kurzen Bemerkungen zum Aufbau von
CSS-Regeln und weiteren Eigenschaften (z.B. Schriftgröße)
Weitere allgemeine Infos zu CSS bei Prog Content.