Astro-Kurs 07: CSS-Grundlagen für Astro

Etappe 1 – Grundlagen · Lektion 7 von 11 · Lernziel: Farben, Abstände und Gestaltung in CSS einsetzen.

Voraussetzung: Grundlagen aus Lektion 6; arbeite im selben Projekt modellbau-webseite.

HTML und CSS haben unterschiedliche Aufgaben

HTML legt die Inhalte fest. CSS bestimmt, wie die Inhalte aussehen. Eine CSS-Regel besteht aus einem Selektor und Eigenschaften:

h1 {
  color: #147bb8;
  font-size: 2rem;
}

h1 bezeichnet alle Überschriften dieser Art. color ist die Textfarbe, font-size die Schriftgröße. CSS-Werte können beispielsweise in px, rem oder % angegeben werden.

Einfache Gestaltung

Füge am Ende deiner bestehenden Datei src/pages/index.astro einen Astro-Styleblock hinzu (außerhalb von </html> ist dies in .astro-Dateien möglich):

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f4f6f8;
    color: #243447;
    line-height: 1.6;
  }
  header, footer {
    background: #183247;
    color: white;
    padding: 20px;
  }
  main {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
  }
  h2 { color: #147bb8; }
  img { max-width: 100%; height: auto; }
</style>

Astro ordnet Styles innerhalb einer Komponente standardmäßig dieser Komponente zu. Für unsere einfache Startseite genügt ein Styleblock. Später lernen wir gemeinsam genutzte Styles und Komponenten kennen.

Abstände verstehen

• padding: Innenabstand zwischen Inhalt und Rand eines Elements.
• margin: Außenabstand zu benachbarten Elementen.
• max-width: maximale Breite, damit Text auf großen Monitoren nicht zu lang wird.
• margin: 0 auto: zentriert viele Blockelemente mit begrenzter Breite.

Klassen gezielt verwenden

<p class="hinweis">Neue Projekte folgen!</p>

.hinweis {
  background: #dfeef7;
  padding: 12px;
  border-radius: 8px;
}

Ergänze beide Teile in deiner Astro-Datei; die HTML-Zeile gehört in <main>, die CSS-Regel in den <style>-Block.

Übung

Ändere die Hintergrundfarbe und mache die Hauptüberschrift größer. Experimentiere mit dem padding von main.

Lösungshinweis: background im body anpassen; mit header h1 { font-size: 2.5rem; } die Überschrift ansprechen.

Weitere Informationen: Offizielle Astro-Dokumentation.