Style

main {
    max-width: 900px;
    margin: 0 auto;
}

nav {
    border-bottom: 1px solid gray;
    padding: 10px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: black;
    text-decoration: none;
}

Dieses CSS legt grundlegende Formatierungen für bestimmte HTML-Elemente fest. Hier die Erklärung:

1. main

   • max-width: 900px;
     Beschränkt die maximale Breite des <main>-Elements auf 900 Pixel.
   • margin: 0 auto;
     Zentriert das <main>-Element horizontal, indem oben und unten kein Rand (0) und an den Seiten automatisch gleichmäßiger Abstand (auto) gesetzt wird.

2. nav

   • border-bottom: 1px solid gray;
     Fügt dem unteren Rand des <nav>-Elements eine 1 Pixel dicke, durchgezogene, graue Linie hinzu.

3. nav ul li

   • display: inline;
     Ändert die Standardanzeige der Listenpunkte (<li>), sodass sie horizontal nebeneinander statt vertikal untereinander erscheinen.

4. nav ul li a

   • color: black;
     Setzt die Textfarbe der Links (<a>) in den Listenpunkten auf schwarz.
   • text-decoration: none;
     Entfernt die Standardunterstreichung der Links.

Zusammen ergibt sich ein Layout, bei dem der Hauptinhalt zentriert dargestellt wird und die Navigation als horizontale Leiste mit einem klaren unteren Rand erscheint, wobei die Links ein schlichtes, nicht unterstrichenes Design haben.