CSS
Ein Cascade Style Sheet legt fest, wie die einzelnen HTML-Elemente zu formatieren sind (Grösse, Farbe, Position, Schriftart, etc.).
Das kann entweder direkt im html-Dokument zwischen style-Tags stehen, oder besser in einer separaten Datei, die im head des Dokuments eingebunden wird, z.B.
<head> <link rel="stylesheet" href="intro.css"> <!-- noch mehr Dinge, wie z.B. Encoding, Titel, etc. --> </head>
Selektoren
Es gibt 3 grundsätzliche Varianten, Elemente für die Formatierung auszuwählen:
- Der Name des html-Elements, z.B.
h1,img,div, etc. - Die Klasse des Elements, z.B.
.meinmenu(beachten Sie den führenden Punkt), wenn ein Element gibt, das das Attributclass=“meinmenu”hat. Mehrere Elemente können die gleiche Klasse haben. Ein Element kann auch mehrere Klassen haben, diese werden durch Leerschläge getrennt, z.B.class=“inhalt wichtig”. - Die ID des Elements, z.B.
#footer, das ein einzelnes Element mitid=“footer”beschreibt. Es darf nur ein einziges Element pro id geben.
Diese Selektoren können dann auch miteinander kombiniert werden. Siehe https://www.w3schools.com/cssref/css_selectors.asp für eine gute Übersicht.
Properties
Auf https://www.w3schools.com/cssref/default.asp finden Sie eine Übersicht aller CSS-Eigenschaften, die für HTML-Element festgelegt werden können.
Aufgabe: Dark-Mode Theme für Beispiel-Webseite
- Auf https://ofi.tech-lab.ch/2021/teach/d0571f1e/webdev/ gibt es einen Ordner
css-intro(plus die Dateicss-intro.zip, die diesen Ordner enthält). - Kopieren Sie diesen Ordner auf Ihren Computer, z.B. indem Sie die zip-Datei herunterladen und entpacken (nur weil es in 7zip geöffnet wird, ist der Ordner noch nicht entpackt).
- Öffnen Sie dann die lokale Datei
css-intro.html, einmal im Browser, um die Seite zu betrachen, einmal in NotePad++ (erst das Programm starten, dann File→Open, bzw. Datei→Öffnen). - Öffnen Sie dann zusätzlich die Datei
intro.cssin NotePad++. - Gehen in der Datei
intro.cssalle Einträge durch und bestimmen Sie von Hand, welche Elemente durch diese Einträge alle beinflusst werden. - Ändern Sie in der Datei
intro.cssdie Farben der Elemente so ab, dass ein “Dark-Theme” entsteht (dunkler Hintergrund, helle Schriftfarbe). Speichern Sie dazu nach jeder Änderung ab und laden Sie die Seite im Browser neu (mit Ctrl-Shift-R, bzw. Shift-Klick Reload). Überprüfen Sie, dass Ihre Änderung auch wie gewohnt funktioniert. - Öffnen Sie im Browser auch die Debug-Konsole mit F12. Damit können Sie die Elemente überprüfen und sogar live die CSS-Attribute verändern oder hinzufügen (allerdings werden diese nicht gespeichert, dass müssen Sie in NotePad++ dann übernehmen).