Aufgaben

Erledigen Sie folgende Aufgaben mit der "Rom-Website". Sie finden die Dateien im css-Ordner.

1. Geben Sie in der Datei index.html allen h1-Elementen die Klasse header und allen h2-Elementen die Klasse subheader.
2. Passen Sie die CSS-Klassen header und subheader an. In der header Klasse soll die Hintergrundfarbe (background-color) auf den Wert gold gesetzt werden. Die Klasse subheader soll die Hintergrundfarbe beige erhalten.
3. Erstellen Sie eine Klasse list-item. Transformieren Sie den Text, sodass nur Grossbuchstaben benutzt werden (text-transform) und die Nummerierung durch römische Zahlen ersetzt werden (list-style-type). Wenden Sie die Klasse dann auf die Listenelemente der geordneten Liste in der Datei index.html an.
4. Erstellen Sie zwei Klassen für section-Elemente. Die erste Klasse (section-a) soll ein helles Grau (z.B. die Graustufe 240) beinhalten. Die zweite Klasse (section-b) soll einen etwas dunkleren Grauton besitzen. Wenden Sie die beiden Klassen dann auf die section-Elemente in der Datei index.html an. Die Hintergrundfarbe der section-Elemente soll sich abwechseln.
5. Kopieren Sie die Klasse citation in die CSS-Datei. Wenden Sie die Klasse dann auf das Blockzitat an. Finden Sie heraus, was margin und padding bewirken.
6. Passen Sie die Linkfarbe im Menü an. Wenn man über einen Menü-Link fährt, dann soll sich die Linkdarstellung verändern ("Hover-Effekt"). Informieren Sie sich über den :hover-Selektor in CSS.

.citation {
    background-color: rgb(200, 200, 200);
    padding: 20px;
    display: block;
    text-align: center;
    margin: 50px;
    font-style: italic;
}