🛠️Aufgaben zu CSS

Styling von "Über mich"

Style deine Website "Über mich" und ¨berprüfe nach jedem Schritt das Ergebnis im Browser.

Typografie:

1. Das ganze Dokument soll die Schriftart "Arial" und die Zeilenhöhe 1.5 haben

2. Definiere in der Seite "Über mich" für alle <h1> eine Farbe und eine Schriftart

3. Links sollen dunkelgrau und unterstrichen sein. Bei Mouse-Over über die Links sollen die Schrift schwarz werden.

Blöcke stylen:

1. Der Header soll eine eigene Hintergrundfarbe deiner Wahl haben.

2. Füge den beiden Adressblöcken in HTML eine Klasse class="address" hinzu und definiere dafür in CSS, dass diese links etwas eingerückt sind (margin-left) und kursiv (font-style) sein sollen.

3. Style die Tabelle:

   1. Definiere für alle Tabellen-Header <th>, dass sie Linksbündig (text-align) sein sollen und eine helle Hintergrundfarbe (background-color) haben.

   2. Definiere für alle Tabellen-Zellen <th> und <td> einen Innenabstand (padding) von 8px.

   3. Entferne die Zwischenräume der Tabellenzellen und zeichne die Tabellenlinien stattdessen in einem Hellgrau (#aaaaaa), 1px breit - siehe w3schools.com/html/html_table_borders.asp.

4. Formatiere selber noch etwas, worauf du Lust hast.

5. Kopiere den Code in den CSS-Validator und korrigiere allfällige Fehler.

Zustzaufgaben für schnelle Lernende:

1. Das erste Hobby soll eine fette Schrift haben, die anderen nicht (mit Pseudoselektor lösen)

2. Färbe mit dem geeigneten Pseudoselektor den Hintergrund jeder 2. Zeile der Tabelle hellgelb.

3. Setze für die Adressblöcke die Eigenschaft display auf inline-block und die Breite auf unter 40%. Was passiert?

4. Wende einen Filter auf dein Bild an: Normal soll es blass/heller oder sogar schwarz-weiss sein, wenn die Maus drüber fährt, soll es in den richtigen Farben erscheinen.