Grundlagen von CSS

Was ist CSS und wozu dient es?

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Erscheinungsbild von HTML-Dokumenten zu gestalten. Während HTML für die Struktur und den Inhalt einer Webseite zuständig ist, bestimmt CSS das gesamte visuelle Design.

Mit CSS können Sie:

Farben, Schriftarten und Schriftgrössen festlegen
Abstände und Ränder definieren
Layouts und Positionierungen erstellen
Animationen und visuelle Effekte hinzufügen
Das Erscheinungsbild für verschiedene Bildschirmgrössen anpassen

CSS ermöglicht die Trennung von Inhalt und Design, was zahlreiche Vorteile bietet:

Bessere Wartbarkeit durch separierte Dateien
Konsistentes Erscheinungsbild auf der gesamten Website
Schnellere Ladezeiten durch Wiederverwendung von Styles
Einfache Möglichkeit, das gesamte Design zu aktualisieren, ohne die HTML-Struktur zu ändern

Wie bindet man CSS ein?

Es gibt drei Hauptmethoden, um CSS in Ihre HTML-Dokumente einzubinden:

1. Externe Stylesheet-Datei (empfohlen)

Sie erstellen eine separate CSS-Datei (z.B. styles.css) und binden diese im <head>-Bereich Ihres HTML-Dokuments ein:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Dies ist die bevorzugte Methode für die meisten Websites, da:

Eine CSS-Datei für mehrere HTML-Seiten verwendet werden kann
Browser die CSS-Datei cachen können, was die Ladezeiten verbessert
Die Trennung von HTML und CSS die Wartung erleichtert

2. Internes Stylesheet

Sie platzieren CSS-Code direkt im <head>-Bereich Ihres HTML-Dokuments:

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: navy;
    }
  </style>
</head>

Diese Methode ist nützlich für:

Einzelne Seiten mit einzigartigem Styling
Schnelles Testen oder Prototyping
Kleine Projekte mit nur einer HTML-Datei

3. Inline-Styles

Sie fügen CSS direkt zu einzelnen HTML-Elementen hinzu:

<p style="color: red; font-size: 18px;">Dieser Text ist rot und grösser.</p>

Diese Methode sollte sparsam verwendet werden, da:

Sie die Trennung von Inhalt und Design aufhebt
Styles nicht wiederverwendbar sind
Der HTML-Code schwerer lesbar wird
Die Wartung komplizierter ist

Selektoren, Eigenschaften und Werte

CSS besteht aus drei Hauptkomponenten:

Selektoren

Selektoren bestimmen, welche HTML-Elemente gestylt werden sollen. Hier sind die grundlegenden Selektortypen:

Elementselektoren

Wählen alle Elemente eines bestimmten Typs aus:

p {
  /* Styles für alle Absätze */
}

h1 {
  /* Styles für alle h1-Überschriften */
}

Klassenselektoren

Wählen Elemente basierend auf dem Klassenattribut aus:

.highlight {
  /* Styles für alle Elemente mit class="highlight" */
}

In HTML:

<p class="highlight">Dieser Absatz ist hervorgehoben.</p>

ID-Selektoren

Wählen ein Element basierend auf seiner eindeutigen ID aus:

#header {
  /* Styles für das Element mit id="header" */
}

In HTML:

<div id="header">Kopfbereich</div>

Kombinatoren

Um komplexere Auswahlmuster zu erstellen:

/* Alle p-Elemente innerhalb eines div */
div p {
  color: blue;
}

/* Alle p-Elemente, die direkte Kinder eines div sind */
div > p {
  font-weight: bold;
}

Eigenschaften

Eigenschaften definieren, was Sie an den ausgewählten Elementen ändern möchten. Beispiele:

color: Textfarbe
font-size: Schriftgrösse
background-color: Hintergrundfarbe
margin: Aussenabstand
padding: Innenabstand
border: Rahmen
width: Breite
height: Höhe

Werte

Werte geben an, wie eine Eigenschaft angewendet werden soll:

h1 {
  color: blue;               /* Farbname */
  font-size: 24px;           /* Pixelwert */
  margin: 10px 20px 15px 5px; /* Mehrere Werte */
  text-align: center;        /* Schlüsselwort */
  border: 1px solid #000000; /* Kombinierte Werte */
}

Grundlegende CSS-Syntax

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock:

selektor {
  eigenschaft1: wert1;
  eigenschaft2: wert2;
  eigenschaft3: wert3;
}

Beispiel:

p {
  color: #333333;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

Kommentare in CSS

Kommentare sind wichtig für die Dokumentation Ihres Codes und werden vom Browser ignoriert:

/* Dies ist ein CSS-Kommentar */

/*
  Mehrzeilige Kommentare
  sind auch möglich
*/

body {
  color: black; /* Ein Kommentar am Ende einer Zeile */
}

Kommentare helfen Ihnen und anderen Entwicklern, den Code zu verstehen, besonders wenn Sie zu einem späteren Zeitpunkt zum Projekt zurückkehren.

Die Kaskade und Spezifität

CSS steht für “Cascading Style Sheets” - der Begriff “Cascading” (Kaskade) ist entscheidend für das Verständnis, wie CSS funktioniert:

Kaskade: Wenn mehrere Regeln auf dasselbe Element angewendet werden, werden sie in einer bestimmten Reihenfolge ausgewertet.
Spezifität: Wenn widersprüchliche Regeln auf das gleiche Element angewendet werden, gewinnt die spezifischere Regel.

Die Spezifität wird folgendermassen berechnet (von höchster zu niedrigster Priorität):

Inline-Styles (direkt im HTML mit dem style-Attribut)
ID-Selektoren
Klassenselektoren, Attributselektoren, Pseudoklassen
Elementselektoren

Beispiel für Spezifität:

#main-content p {
  color: blue; /* Höhere Spezifität */
}

p {
  color: red; /* Niedrigere Spezifität */
}

In diesem Fall würden Absätze innerhalb des Elements mit id="main-content" blau sein, während alle anderen Absätze rot wären.

Übung: Erste Schritte mit CSS

Erstellen Sie eine neue HTML-Datei mit folgendem Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine erste CSS-Seite</title>
  <!-- Hier wird später das CSS eingebunden -->
</head>
<body>
  <header>
    <h1>Willkommen zu meiner Website</h1>
    <p id="intro">Dies ist meine erste mit CSS gestaltete Webseite.</p>
  </header>

  <main>
    <h2>Über mich</h2>
    <p>Ich lerne gerade HTML und CSS.</p>

    <h2>Meine Hobbys</h2>
    <ul>
      <li class="wichtig">Webentwicklung</li>
      <li>Fotografie</li>
      <li class="wichtig">Reisen</li>
    </ul>
  </main>

  <footer>
    <p>&copy; 2025 Meine Website</p>
  </footer>
</body>
</html>

Erstellen Sie eine neue Datei namens styles.css im gleichen Ordner und binden Sie diese in Ihre HTML-Datei ein.
Fügen Sie folgende Styles in Ihre CSS-Datei ein:

Setzen Sie die Schriftart für den gesamten Body auf Arial, Helvetica oder sans-serif
Ändern Sie die Textfarbe des <h1>-Elements auf eine Farbe Ihrer Wahl
Geben Sie dem Element mit der ID “intro” einen hellgrauen Hintergrund und einen Innenabstand von 10px
Stellen Sie alle Listenelemente mit der Klasse “wichtig” fett dar und geben Sie ihnen eine andere Farbe
Fügen Sie dem <footer>-Element einen oberen Rand hinzu und zentrieren Sie den Text

Experimentieren Sie mit verschiedenen Selektoren und Eigenschaften, um weitere Anpassungen vorzunehmen.

Im nächsten Kapitel werden wir uns mit der Textformatierung in CSS beschäftigen und lernen, wie wir Schriftarten, -grössen, -farben und weitere Texteigenschaften anpassen können.