# Übungsblatt 11 ## 1. CSS-Übung: Schrift **Aufgabenstellung**: Ergänzen Sie eine vorgegebene HTML-Seite um Schriftart, Farben und Schriftgrößen mit einem CSS-Stylesheet. #### Arbeitsschritte 1. Erstellen Sie ein CSS-Stylesheet und binden Sie es in diese HTML-Seite ein: [Nachricht](nachricht.html). 2. Verwenden Sie die Google Font "Open Sans". 3. Setzen Sie die Basis-Schriftgröße (``) auf `16px`. 4. Die Überschriften der ersten und zweiten Ebene sollen die Farbe `#005CA9` haben. 5. Text der Klasse `headline` soll eine dunkelgraue Farbe haben und eine kleinere Schriftgröße als die Basis-Schrift haben. 6. Text der Klasse `meta` soll eine hellgraue Farbe haben und eine kleinere Schriftgröße als `headline` haben. Außerdem soll der Text kursiv dargestellt werden. 7. Text der Klasse `source` soll unterstrichen sein. 8. Testen Sie, ob das relative Verhältnis der Schriftgrößen bestehen bleibt, wenn Sie die Basis-Schriftgröße anpassen (z.B. auf `10px`). ## 2. CSS-Übung: Selektoren **Aufgabenstellung**: Untersuchen Sie das folgende HTML-Dokument mit dem zugehörigen CSS-Stylesheet und geben Sie zu jedem Kalendereintrag die *Hintergrundfarbe*, *Schriftfarbe* und *unterstrichen/nicht unterstrichen* an. ![HTML mit CSS](uebung02.png) #### Antworten 1. Termine: 2. 10k-Lauf: 3. Elternabend: 4. Wocheneinkauf: 5. Yoga: 6. Handball-Training: 7. Mathearbeit: 8. Fußball-Training: 9. FCB vs. Eintracht: 10. Pizza-Tag!: ## 3. CSS-Übung **Aufgabenstellung**: Gestalten Sie das HTML-Formular zu Workshop-Anmeldung aus vorangegangen Übungsblättern individuell nach Ihren Ideen mit CSS. #### Arbeitsschritte 1. Nehmen Sie folgendes HTML-Formular als Grundlage: [Workshop-Anmeldung](workshop-anmeldung.html). Gerne können Sie dieses erweitern oder anpassen. 2. Sie können das folgende CSS-Stylesheet als Ausgangspunkt verwenden (freiwillig): [CSS-Stylesheet](styles_workshop.css). Hier sind ein paar Hilfestellungen zur Gestaltung von Checkbox, Radiobuttons und Select-Box bereits eingefügt (aus der Vorlesung nicht bekannt). 3. Ergänzen Sie das Stylesheet und ggf. das HTML-Dokument, so dass ein ansprechendes Design entsteht. (Umfang/Detailgrad und Stil wählen Sie selbst.)