CSS-Start

1. CSS Grundlagen

ca 15'

Input David - oder: Lies das Script zu den CSS-Grundlagen

2. Website untersuchen

Lade diese Zip-Datei auf deinen Computer, entpacke sie, öffne die HTML-Datei im Browser.

Öffne den Inspektor, versuche herauszufinden wie es zu den verschiedenen Gestaltungen kommt. Welche Informationen wurden in die Website geschrieben, damit der Titel grün dargestellt wird? Welche damit es zu den gepunkteten Rahmen kommt?

3. Buchstabensalat

Speichere die HTML-Datei Buchstabensalat.html auf deinem Computer (Ctrl+Click und "Speichern unter" – oder: Link öffnen und "Seite speichern"/CMD+S).

Öffne sie im Texteditor.

Darin sind mehrere Buchstaben, die je in einem eigenen HTML-Element sind. Der CSS-Code, damit die Buchstaben an verschiedenen Orten auf dem Bildschirm erscheinen, ist schon vorhanden.

Aufgabe:

• style die Buchstaben möglichst vielfältig (Grösse, Farbe usw.)
• du möchtest ein bestimmtes Styling (z.B. "unterstrichen"), suche im Internet nach "CSS unterstrichen" oder ähnliches. Findest du die Information die du benötigst um dein Styling umzusetzen?

4. Optional: Texte formatieren

ca 20-40'

Um die CSS-Grundlagen zu üben, löse die Übung "Texte stylen". Die Anweisungen was man machen soll, sind im Quellcode, du musst die HTML-Datei herunterladen und im Texteditor öffnen; hier ist die Übung als HTML-Datei zum herunterladen.