# Aufgaben zu CSS

![](https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fgit-blob-9f03ad484c03da5c92c68e83040780ff566848f6%2Fralph.png?alt=media)

## Styling von "Über mich"

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

**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`](https://www.w3schools.com/css/css_margin.asphttps://www.w3schools.com/css/css_margin.asp)) und kursiv ([`font-style`](https://www.w3schools.com/css/css_font_style.asp)) sein sollen.&#x20;
3. Style die **Tabelle**:&#x20;
   1. Definiere für alle Tabellen-Header `<th>`, dass sie Linksbündig ([`text-align`](https://www.w3schools.com/css/css_text_align.asp)) sein sollen und eine helle Hintergrundfarbe ([`background-color`](https://www.w3schools.com/css/css_background.asp)) haben.
   2. Definiere für alle Tabellen-Zellen `<th>` und `<td>` einen Innenabstand ([`padding`](https://www.w3schools.com/css/css_padding.asp)) 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](https://www.w3schools.com/html/html_table_borders.asp).
4. Formatiere selber noch etwas, worauf du Lust hast.
5. Kopiere den Code in den [CSS-Validator](https://jigsaw.w3.org/css-validator/#validate_by_input) 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.&#x20;
3. Setze für die Adressblöcke die Eigenschaft `display` auf `inline-block` und die Breite auf unter 40%. Was passiert?&#x20;
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.&#x20;

<figure><img src="https://4156320524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMu14VA5QCGUUq6RkR_%2Fuploads%2Fa2WOH2maxTlaw3pZIr3V%2Fimage.png?alt=media&#x26;token=af2d8da0-78e3-4290-bcd9-54fbac580450" alt=""><figcaption></figcaption></figure>
