LU12.A01 - CSS Grundlagen

Live preview

1. Akzeptieren Sie das GitHub Classroom Assignment über den Link im Moodle-Kurs.
2. Klonen Sie Ihre persönliches Repository.
3. Bearbeiten Sie das CSS-File style.css und stylen Sie damit die Website in index.html.
   • Importieren Sie style.css in index.html
   • Halten Sie sich an die beschriebenen Styling-Anforderungen
   • Recherchieren Sie die benötigten Selektoren, Eigenschaften und Werte auf SelfHTML oder W3CSchools.
4. Validieren Sie Ihren HTML-Code auf Einhaltung der Standards.
5. Geben Sie Ihre Lösung mittels Push ins Repository ab.

1. Es soll einheitlich die Schriftfamilie Futura, sans-serif für alle Texte verwendet werden.
2. Der erste Absatz ist nicht gestyled.
3. Der zweite Absatz wird mit dem Klassenselektor p.remark formatiert, wo der Absatz von links um 70 Pixel eingerückt und ebenfalls links ein blauer Rand mit 15 Pixeln Dicke hinzugefügt wird. Der Abstand zu diesem Rand beträgt 10 Pixel.
4. Der dritte Absatz verwendet den Klassenselektor p.remark.warning, soll ein blauer Rahmen (durchgezogene Linie, Abstand links und rechts 9px, oben und unten 1.5px, der Text ist zentriert).
5. Der vierte Absatz mit der Klasse warning soll die Schrift-Farbe blau sein und die Fontgrösse auf 130% eingestellt sein. Aus Flexibilitätsgründen sollen die beiden Deklarationen einen eigen Selektor haben.
6. Der Text im Header und Footer ist links ausgerichtet. Die Schriftgrösse im Header und Footer soll auf 80% verkleinert und den Farbcode 00b3ee als Hintergrundfarbe aufweisen.
7. Die Schrift für Übertitel 1 + 2 haben die Farbe darkslateblue.
8. Die Schriftgrösse in der Navigation soll auf 90% verkleinert, als Schriftfarbe weiss und den Farbcode 778899 als Hintergrund aufweisen. Der Text in der Navigation zentriert ausgerichtet.

Daniel Garavaldi, Kevin Maurizi