Was ist CSS?

CSS = Cascading Style Sheets

CSS beschreibt, wie HTML-Elemente dargestellt werden.

Eine CSS-Rule besteht immer aus:

/* "rule" */
selektor {
  eigenschaft: wert; /* property: value */
  eigenschaft: wert; /* property: value */
}

p {
  color: darkslategray;
  font-size: 18px;
}

Selektor: welches Element(e) wird gestylt?
Eigenschaft (property): was wird verändert?
Wert: wie soll es aussehen?

CSS einbinden: 3 Möglichkeiten

1) Inline (im HTML-Attribut)

<p style="color: red; font-weight: bold;">Achtung!</p>

2) Internal (im `<style>`-Tag im `<head>`)

<head>
  <style>
    p { color: darkslategray; }
  </style>
</head>

CSS einbinden: External (Standard!)

style.css

p {
  color: darkslategray;
  font-size: 18px;
}

index.html

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

Selektoren: Die Basics

<p>Ein normaler Absatz</p>
<p class="highlight">Ein hervorgehobener Absatz</p>
<p id="intro">Der Einleitungstext</p>

/* Element-Selektor: trifft ALLE <p> */
p {
  line-height: 1.5;
}

/* Klassen-Selektor: trifft alle Elemente mit class="highlight" */
.highlight {
  background-color: yellow;
}

/* ID-Selektor: trifft GENAU EIN Element (id muss einzigartig sein) */
#intro {
  font-weight: bold;
}

Selektoren: Kombinationen (kurzer Ausblick)

<article class="card">
  <h2>Titel</h2>
  <p>Text im Artikel</p>
</article>
<p>Text außerhalb</p>

/* Nachfahren-Selektor: trifft <p> INNERHALB von .card */
.card p {
  color: gray;
}

/* Mehrere Klassen kombinieren (kein Leerzeichen!) */
.card.featured {
  border: 2px solid gold;
}

/* Mehrere Selektoren gleichzeitig ansprechen */
h1, h2, h3 {
  font-family: sans-serif;
}

Die Kaskade (kurz & wichtig)

Was passiert, wenn mehrere Regeln auf dasselbe Element zutreffen?

p {
  color: blue;
}

.highlight {
  color: red;
}

<p class="highlight">Welche Farbe habe ich?</p>

→ Rot. Klassen-Selektoren sind “spezifischer” als Element-Selektoren.

Merkregel für den Anfang: Element < Klasse < ID < inline style

Bei gleicher Spezifität gewinnt: die später definierte Regel.

Die Kaskade: Herkunft zählt auch

Eine Seite kann Styles aus allen drei Einbindungsarten gleichzeitig enthalten: externe Datei, <style>-Tag im Head, und style-Attribut am Tag. Was gewinnt, wenn sie sich widersprechen?

<head>
  <link rel="stylesheet" href="style.css" /> <!-- h1 { color: blue; } -->
  <style>
    h1 { color: green; }
  </style>
</head>
<body>
  <h1 style="color: red;">Überschrift</h1>
</body>

→ Rot. Die Faustregel: „Je näher am Tag, desto stärker wirkt es.”

externe Datei < <style> im Head < style-Attribut am Tag

Das ist ein zusätzlicher Mechanismus, neben der Selektor-Spezifität von oben. Beide zusammen ergeben die vollständige Kaskade. In der Praxis gilt: inline style-Attribute möglichst vermeiden, damit die externe Datei die Kontrolle behält.