HTML baut die Struktur — CSS macht sie schön. Hier lernst du, wie du Elemente gezielt ansprichst und ihnen Farbe, Form und Stil gibst.
CSS steht für Cascading Style Sheets — eine Stilsprache, die beschreibt, wie HTML-Elemente aussehen sollen. „Cascading" bedeutet, dass Regeln sich überlagern und die spezifischste gewinnt.
Der Selektor wählt das Element. Die Deklaration sagt, wie es aussehen soll.
Eigene .css-Datei, verlinkt im <head>.
<head>
<link rel="stylesheet"
href="style.css">
</head>
Vorteil: Saubere Trennung von Inhalt (HTML) und Design (CSS). Mehrere Seiten können dieselbe CSS-Datei teilen.
CSS direkt im HTML-Dokument im <style>-Tag.
<head>
<style>
h1 { color: red; }
</style>
</head>
Vorteil: Alles in einer Datei. Nachteil: Nicht wiederverwendbar für andere Seiten.
Direkt am Element per style-Attribut.
<h1 style="color: red;">
Titel
</h1>
Nachteil: Höchste Spezifität, schwer wartbar, vermischt Inhalt und Design. Sollte vermieden werden!
Selektoren bestimmen, welche HTML-Elemente gestylt werden. Vom einfachen Element bis zur komplexen Kombination.
Wählt alle Elemente eines Typs: p, h1, a
p {
color: #333;
line-height: 1.6;
}
Betrifft alle <p>-Elemente auf der Seite. Einfach, aber ungenau.
Wählt Elemente mit einer bestimmten Klasse: .highlight
.highlight {
background: yellow;
}
/* Im HTML: */
<p class="highlight">...</p>
Klassen sind wiederverwendbar — mehrere Elemente können dieselbe Klasse haben. Ein Element kann auch mehrere Klassen haben: class="highlight big".
Wählt genau ein Element: #header
#header {
background: navy;
}
/* Im HTML: */
<div id="header">...</div>
IDs sind einzigartig — jede ID darf pro Seite nur einmal vorkommen. Höhere Spezifität als Klassen.
Nachfahren, direkte Kinder, Mehrfach-Selektoren.
/* Nachfahre (irgendwo drin) */
nav a { color: white; }
/* Direktes Kind */
ul > li { margin: 0.5rem; }
/* Mehrere auf einmal */
h1, h2, h3 { font-weight: bold; }
Leerzeichen = Nachfahre, > = direktes Kind, Komma = mehrere Selektoren gleichzeitig.
Stil für bestimmte Zustände: :hover, :first-child
a:hover {
color: red;
text-decoration: underline;
}
li:first-child {
font-weight: bold;
}
:hover = Maus darüber, :focus = Element fokussiert, :nth-child() = bestimmtes Kind-Element.
Wenn mehrere Regeln dasselbe Element betreffen, gewinnt die spezifischere. Die Spezifität berechnet sich aus der Art der Selektoren.
Ändere die Werte und beobachte in Echtzeit, was passiert. So bekommst du ein Gefühl für die wichtigsten CSS-Eigenschaften.
color — Textfarbefont-size — Schriftgrößefont-family — Schriftartfont-weight — Schriftdicketext-align — Ausrichtungline-height — Zeilenabstandbackground — Hintergrundpadding — Innenabstandmargin — Außenabstandborder — Rahmenborder-radius — Eckenrundungwidth / height — GrößeFeste Größe, unabhängig vom Kontext.
font-size: 16px; — immer gleich groß, egal wo. Einfach, aber nicht flexibel bei verschiedenen Bildschirmgrößen.
Relativ zur Schriftgröße des <html>-Elements.
1rem = Schriftgröße von <html> (meist 16px). 1.5rem = 24px. Skaliert gut für responsive Designs!
Relativ zum Elternelement oder Viewport.
width: 50% = halbe Breite des Elternelements. 100vw = volle Viewport-Breite, 100vh = volle Viewport-Höhe. Perfekt für Vollbild-Layouts.
Klicke links auf einen Selektor, dann rechts auf die passende Beschreibung.
Ordne die Selektoren von der niedrigsten zur höchsten Spezifität.
#nav .link ID + Klassep Element#nav #logo ID + ID.card Klassediv.card.active Element + 2 Klassen7 Fragen rund um Selektoren, Spezifität und CSS-Grundlagen.
p, .class, #id
color: red;
:hover (Maus drüber), :focus (fokussiert).
„Diese Lerneinheit, die ihr gerade benutzt, ist selbst mit HTML und CSS gebaut. Welche CSS-Eigenschaften könnt ihr auf dieser Seite erkennen? Findet mindestens 5 verschiedene."
Öffnet die Browser-DevTools (F12) und untersucht die Seite. Sammelt eure Funde, 5 Minuten.