6 - CSS Selektor

1. Platziere den Cursor direkt auf dem Element <header><h1>
2. Mit Menu >Navigation >Schnell bearbeiten (Ctrl+E) öffnest du das Eingabefenster für die CSS-Stile
3.  Wähle erst das H1-Element im Header
   (Du kannst deine Wahl präziser "selektieren", indem du das H1-Element im Header formatierst)
4. Setzte die Bezeichnung der Elternelements "header" vor "h1", so dass due "header h1" formatierst:
   
   • Textfarbe (Dunkelrot): color:#a30000;
   • Innenabstand: padding: 8px;
5. Formatiere das H2-Element im Article: <h2>
   
   • Textfarbe (Dunkelrot): color:#a30000;
   • Innenabstand: padding: 8px;
   • Wenn du die selbe Farbe und den gleichen Abstand willst, kannst du die beiden CSS-Deklarationen
     aus den oberen CSS-Code ("header h1") kopieren und darunter ("h2") einfügen.
6. Beachte: "header h1" formatiert nur das H1-Element im Header, "h2" formatiert alle H2-Elemente
7. Platziere den Cursor direkt auf dem Element <p>
8. Speichere deine Datei
9. Mit Klick auf den Button "Live-Vorschau" kannst du deine Seite im Browser öffnen

Weiter, ein Layout mit Html5-Elementen erstellen

Code-Beispiel CSS (Der Html-Code bleibt unverändert)

body {
    color:#4c4c4c;
    background: #c1c1c1;
    font-family: Arial,sans-serif;
}

#container {
    background:#ffffff;
    width:500px;
    margin:auto;
}

header h1 {
    color:#a30000;
    padding: 8px;
}

h2 {
    color:#a30000;
    padding: 8px;
}