Dieser Artikel ist Teil 2 einer vierteiligen Serie zu den Grundlagen von HTML und CSS. Falls du HTML noch nicht kennst, starte mit Teil 1: HTML Grundlagen. Weiter geht es danach mit Teil 3: Flexbox und Grid und Teil 4: Responsive Webdesign.
HTML gibt einer Webseite ihre Struktur – aber ohne CSS sieht jede Seite gleich aus: schwarzer Text auf weißem Hintergrund, Standardschrift, keine Abstände. CSS (“Cascading Style Sheets”) ist die Sprache, mit der du festlegst, wie deine HTML-Elemente aussehen: Farben, Schriftarten, Abstände, Positionierung. Dieser Guide erklärt dir die drei wichtigsten CSS-Grundpfeiler: Selektoren, das Box-Model und die grundlegende Einbindung von CSS in deine Seite.
Inhaltsverzeichnis
Wie bindest du CSS überhaupt ein?
Es gibt drei Wege, CSS mit HTML zu verbinden. In der Praxis solltest du fast immer den dritten Weg nutzen:
- Inline-Styles (direkt im Tag, per
style-Attribut) – schnell, aber unübersichtlich und schlecht wartbar:<p style="color: red;">Text</p> - Interne Styles (im
<head>per<style>-Tag) – okay für kleine Testseiten, skaliert aber nicht. - Externe Stylesheets (eine eigene
.css-Datei, verlinkt per<link>) – der Standard in der professionellen Webentwicklung, weil Struktur (HTML) und Design (CSS) sauber getrennt bleiben.
<head>
<link rel="stylesheet" href="style.css">
</head>In der Datei style.css schreibst du dann deine eigentlichen Styling-Regeln.
Der Grundaufbau einer CSS-Regel
Jede CSS-Regel besteht aus einem Selektor (welches Element wird gestylt?) und einem Deklarationsblock in geschweiften Klammern (wie wird es gestylt?):
p {
color: darkblue;
font-size: 18px;
}Hier wird jedes <p>-Element auf der Seite dunkelblau eingefärbt und in 18px Schriftgröße dargestellt. color und font-size sind Eigenschaften (properties), darkblue und 18px sind deren Werte.
Selektoren: Elemente gezielt auswählen
Selektoren sind das Herzstück von CSS – sie bestimmen, WELCHE Elemente eine Regel betrifft. Die wichtigsten Typen für Einsteiger:
- Typ-Selektor – wählt alle Elemente eines Tags:
p { },h1 { } - Klassen-Selektor – wählt alle Elemente mit einer bestimmten
class:.hervorgehoben { }passt zu<p class="hervorgehoben">. Eine Klasse kann auf beliebig viele Elemente angewendet werden. - ID-Selektor – wählt genau ein Element mit einer bestimmten
id:#hauptmenü { }passt zu<nav id="hauptmenü">. Eine ID sollte pro Seite nur einmal vergeben werden. - Nachfahren-Selektor – wählt Elemente innerhalb eines anderen:
nav a { }stylt alle Links, die innerhalb eines<nav>liegen. - Kombinierte Selektoren – mehrere Klassen oder Bedingungen gleichzeitig:
.karte.aktiv { }trifft nur Elemente, die BEIDE Klassen tragen.
.karte {
border: 1px solid #ddd;
padding: 16px;
}
#hauptmenü {
background: #222;
}
nav a {
text-decoration: none;
}Faustregel für Einsteiger: Nutze Klassen für alles, was du wiederverwendbar stylen willst (die meisten Fälle), und IDs sparsam für einmalige Elemente oder JavaScript-Zugriffe.
Das Box-Model: Wie jedes Element seinen Platz einnimmt
Jedes HTML-Element wird vom Browser als rechteckige Box behandelt – auch wenn es visuell rund oder unsichtbar ist. Dieses Box-Model besteht aus vier Schichten, von innen nach außen:
- Content – der eigentliche Inhalt (Text, Bild)
- Padding – der Innenabstand zwischen Inhalt und Rahmen
- Border – der Rahmen der Box
- Margin – der Außenabstand zu anderen Elementen
.box {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}Wichtiger Stolperstein für Einsteiger: Standardmäßig wird width NUR auf den Content angewendet – Padding und Border kommen zusätzlich oben drauf. Eine Box mit width: 300px, padding: 20px und border: 2px ist also tatsächlich 344px breit (300 + 2×20 + 2×2). Um das zu vermeiden, setzt fast jedes moderne Projekt diese eine Zeile ganz am Anfang des Stylesheets:
* {
box-sizing: border-box;
}Mit box-sizing: border-box zählen Padding und Border ZUR angegebenen Breite dazu, nicht zusätzlich – das macht Layouts erheblich vorhersehbarer und ist heute Industriestandard.
Farben und Typografie
Farben lassen sich in CSS auf mehrere Arten angeben:
- Named colors:
color: red;,color: steelblue; - Hex-Werte:
color: #ff5733;(am gebräuchlichsten) - RGB/RGBA:
color: rgb(255, 87, 51);bzw. mit Transparenzrgba(255, 87, 51, 0.5)
Für Typografie sind diese Eigenschaften der Einstieg:
body {
font-family: "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #222;
}font-family gibt eine Liste von Schriftarten an (der Browser nutzt die erste verfügbare), line-height steuert den Zeilenabstand und ist für Lesbarkeit entscheidend – ein Wert zwischen 1.4 und 1.6 gilt für Fließtext als guter Standard.
Praxisbeispiel: Eine einfache Karte stylen
<div class="karte">
<h3>Produktname</h3>
<p>Kurze Beschreibung des Produkts.</p>
</div>.karte {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.karte h3 {
color: #111;
margin-top: 0;
}Diese wenigen Zeilen verwandeln ein unscheinbares <div> in eine moderne, abgerundete Karte mit dezentem Schatten – genau das Prinzip, das hinter den meisten Card-Layouts im Web steckt.
Wie geht es weiter?
Mit Selektoren und dem Box-Model kannst du bereits einzelne Elemente gezielt gestalten. Der nächste Schritt ist, ganze Layouts zu bauen – mehrere Boxen nebeneinander, Raster, responsive Anordnungen. Dafür gibt es zwei moderne CSS-Werkzeuge: Flexbox und Grid. Im dritten Teil dieser Serie lernst du, wann du welches einsetzt: CSS Flexbox und Grid: Moderne Layouts für Einsteiger erklärt.
Häufig gestellte Fragen zu CSS-Grundlagen
Was ist der Unterschied zwischen einer Klasse und einer ID in CSS?
Eine Klasse (.name) kann auf beliebig viele Elemente angewendet werden und ist der Standard für wiederverwendbares Styling. Eine ID (#name) sollte pro Seite nur einmal vergeben werden und wird oft für JavaScript-Zugriffe oder Sprungmarken genutzt.
Warum sieht meine Box größer aus, als ich es mit width angegeben habe?
Das ist das Standardverhalten des CSS-Box-Models: Padding und Border werden standardmäßig zur angegebenen Breite hinzuaddiert. Die Lösung ist box-sizing: border-box, wodurch Padding und Border innerhalb der angegebenen Breite bleiben.
Sollte ich Inline-Styles, interne oder externe Stylesheets verwenden?
Für jedes Projekt außer der allerkleinsten Testseite: externe Stylesheets. Sie trennen Struktur und Design sauber, sind wiederverwendbar über mehrere Seiten hinweg und lassen sich vom Browser cachen.
Was ist der Unterschied zwischen padding und margin?
Padding ist der Innenabstand zwischen dem Inhalt eines Elements und seinem Rahmen (innerhalb der Box), Margin ist der Außenabstand zu benachbarten Elementen (außerhalb der Box).
Muss ich alle CSS-Eigenschaften auswendig kennen?
Nein. Wie bei HTML reicht es, die häufigsten 30-40 Eigenschaften zu kennen und den Rest bei Bedarf nachzuschlagen. Mit Übung prägen sich die gängigsten Muster (Box-Model, Farben, Typografie) schnell ein.
Teil 2 von 4 dieser Serie
