CSS lernen ist der schnellste Weg, aus einer nackten HTML-Seite eine Website zu machen, die du herzeigen kannst. Farben, Schriften, Abstände, Spalten, die Darstellung am Handy – all das steuerst du mit ein paar Zeilen Code.
Du brauchst dafür keinen Kurs und keine teure Software. Ein Texteditor und ein Browser reichen. Die Grundlagen sitzen nach einem konzentrierten Wochenende, für sichere Layouts solltest du ein paar Wochen Übung einplanen.
Dieser Beitrag geht die Grundlagen der Reihe nach durch – vom Aufbau einer einzelnen Regel bis zum fertigen Layout. Jedes Beispiel kannst du direkt kopieren und ausprobieren.
Inhaltsverzeichnis
- Was ist CSS?
- Was du vorher können solltest
- So ist eine CSS-Regel aufgebaut
- CSS in HTML einbinden: drei Wege
- Die Selektoren, die du wirklich brauchst
- Farben, Schrift und Abstände
- Das Box-Modell verstehen
- Layouts bauen mit Flexbox und Grid
- Darstellung auf allen Bildschirmgrößen
- Die Kaskade: warum manche Regeln gewinnen
- CSS-Variablen für weniger Wiederholung
- Die Werkzeuge, mit denen du übst
- Typische Fehler beim Einstieg
- CSS lernen: dein Lernplan für vier Wochen
- Von der Übungsdatei zur eigenen Website
- Häufige Fragen zu CSS
- Bring dein erstes Projekt online
Deine perfekte Domain — mit nur einem Klick
Du willst online durchstarten? Bei easyname findest du über 480 Domain-Endungen — von klassischen .com und .at bis zu kreativen Spezialdomains. Finde in Sekunden deine Wunschadresse, sicher dir deinen Namen und mach dein Projekt sichtbar.
Was ist CSS?
CSS steht für Cascading Style Sheets. Es ist eine Gestaltungssprache, mit der du festlegst, wie die Inhalte einer Website dargestellt werden. Entwickelt und laufend erweitert wird sie vom World Wide Web Consortium (W3C).
Dahinter steht ein einfacher Gedanke: die Trennung von Inhalt und Gestaltung.
- HTML beschreibt, was auf der Seite steht – eine Überschrift, ein Absatz, ein Bild.
- CSS beschreibt, wie das aussieht – 24 Pixel groß, dunkelblau, zentriert, mit 20 Pixel Abstand nach unten.
Diese Trennung spart dir später sehr viel Arbeit. Willst du die Farbe aller Überschriften ändern, passt du eine einzige Zeile an – und die Änderung greift auf jeder Unterseite deines Projekts.
Was du vorher können solltest
Ein bisschen HTML. Viel ist es nicht: Überschriften (<h1> bis <h6>), Absätze (<p>), Container (<div>), Links (<a>) und Bilder (<img>) decken den Großteil ab. CSS greift auf genau diese Elemente zu.
Mit diesen zwei Dateien bist du startklar. Speichere sie im selben Ordner:
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meine erste Seite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Willkommen</h1>
<p>Das ist mein erster Absatz.</p>
</body>
</html>Daneben eine leere Datei namens style.css. Die Zeile mit viewport merkst du dir gleich – ohne sie funktioniert später die Anpassung an Handybildschirme nicht.
So ist eine CSS-Regel aufgebaut
Jede Regel folgt demselben Muster:
css
Selektor {
Eigenschaft: Wert;
}Drei Bausteine:
- Selektor – welche Elemente angesprochen werden, zum Beispiel
h1 - Eigenschaft – was verändert wird, zum Beispiel
color - Wert – wie es verändert wird, zum Beispiel
#08111b
Jede Zeile endet mit einem Strichpunkt. In der Praxis:
css
h1 {
color: #08111b;
font-family: Arial, sans-serif;
font-size: 32px;
text-align: center;
}Mehrere Selektoren trennst du mit Beistrichen:
css
h1, h2, h3 {
font-family: Arial, sans-serif;
}Ein Hinweis, der dir später Fehlersuche erspart: CSS unterscheidet Groß- und Kleinschreibung. .Menue und .menue sind zwei verschiedene Klassen.
CSS in HTML einbinden: drei Wege
Direkt im Element
html
<h2 style="color: red;">Zwischenüberschrift</h2>Funktioniert, wird aber schnell unübersichtlich. Nur für seltene Sonderfälle sinnvoll.
Im Kopfbereich der Seite
html
<head>
<style>
h2 { color: #08111b; font-size: 24px; }
</style>
</head>Praktisch für Einzelseiten und zum schnellen Ausprobieren.
In einer eigenen CSS-Datei
Das ist der Weg, den du dir angewöhnen solltest:
html
<link rel="stylesheet" href="style.css">Alle Seiten deines Projekts greifen auf dieselbe Datei zu. Der Browser lädt sie einmal und behält sie im Zwischenspeicher – das verkürzt die Ladezeiten deiner Seite spürbar.
Die Selektoren, die du wirklich brauchst
Typselektor – alle Elemente einer Art:
css
p { line-height: 1.6; }Klassenselektor – alle Elemente mit einer bestimmten Klasse. Im CSS mit Punkt, im HTML ohne:
css
.hinweis {
background-color: #fec600;
padding: 16px;
}html
<p class="hinweis">Bitte beachten!</p>ID-Selektor – ein einzelnes, einmaliges Element. Im CSS mit Raute, im HTML ohne:
css
#navigation { background-color: #08111b; }Universalselektor – alle Elemente:
css
* { box-sizing: border-box; }In der Praxis arbeitest du fast immer mit Klassen. Sie sind mehrfach verwendbar und lassen sich kombinieren. IDs setzt du sparsam ein – sie lassen sich später nur schwer überschreiben.
Farben, Schrift und Abstände
Farben
css
.beispiel {
color: #fec600; /* hexadezimal */
color: rgb(254, 198, 0); /* RGB */
color: rgba(254, 198, 0, 0.5); /* RGB mit Deckkraft */
}Die hexadezimale Schreibweise dominiert: eine Raute, dann sechs Zeichen – je zwei für Rot, Grün und Blau. Bei rgba() steuert der vierte Wert die Deckkraft von 0 bis 1. Für Hintergründe nutzt du background-color, für Verläufe linear-gradient().
Schrift
css
body {
font-family: "DM Sans", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
}Bei font-family gibst du immer mehrere Schriften an – findet der Browser die erste nicht, nimmt er die nächste. Am Ende steht eine allgemeine Familie wie sans-serif. Für Fließtext haben sich 16 bis 18 Pixel bewährt, ein Zeilenabstand zwischen 1.5 und 1.7 macht längere Texte deutlich lesbarer.
Bei den Maßeinheiten reichen drei: px für feste Werte, em bezogen auf das übergeordnete Element, rem bezogen auf die ganze Seite. rem ist meist die beste Wahl, weil sich damit alles über eine einzige Angabe skalieren lässt.
Abstände
Zwei Eigenschaften, ein Unterschied, den du dir gut merken solltest:
paddingist der Innenabstand – zwischen Inhalt und Rahmen.marginist der Außenabstand – zwischen dem Element und seinen Nachbarn.
css
.karte {
padding: 24px;
margin: 16px 0;
border: 1px solid #dddddd;
border-radius: 8px;
}Bei mehreren Werten gilt die Reihenfolge im Uhrzeigersinn: oben, rechts, unten, links.
Das Box-Modell verstehen
Wenn ein Layout nicht so aussieht wie gedacht, liegt es fast immer hier. Der Browser stellt jedes Element als rechteckige Box dar, die von innen nach außen aus vier Schichten besteht:
- Inhalt – gesteuert über
widthundheight - Innenabstand (
padding) - Rahmen (
border) - Außenabstand (
margin)
Standardmäßig rechnet der Browser Innenabstand und Rahmen zur angegebenen Breite dazu. Eine Box mit width: 200px und padding: 20px ist damit in Wahrheit 240 Pixel breit. Genau daraus entstehen die meisten Layout-Überraschungen.
Die Lösung passt in drei Zeilen und gehört an den Anfang jeder CSS-Datei:
css
* {
box-sizing: border-box;
}Ab jetzt sind 200 Pixel wirklich 200 Pixel – Innenabstand und Rahmen inklusive. Deine Berechnungen gehen auf.
Zweiter Punkt: Block-Elemente wie <div>, <p> oder <h1> beginnen immer in einer neuen Zeile und nehmen die volle Breite ein. Inline-Elemente wie <a>, <span> oder <strong> bleiben im Textfluss und sind nur so breit wie ihr Inhalt.
Layouts bauen mit Flexbox und Grid
Flexbox für eine Richtung
Flexbox ordnet Elemente entlang einer Achse an – nebeneinander oder untereinander. Ideal für Navigationen, Buttonleisten und Kachelreihen.
css
.navigation {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
}Die wichtigsten Stellschrauben:
flex-direction:rownebeneinander,columnuntereinanderjustify-content: Verteilung entlang der Hauptachsealign-items: Ausrichtung quer dazuflex-wrap: mitwrapdürfen Elemente umbrechengap: Abstand zwischen den Elementen
Grid für zwei Richtungen
Grid arbeitet mit Zeilen und Spalten gleichzeitig – damit baust du ganze Seitenraster.
css
.raster {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}Die Einheit fr steht für einen Anteil des verfügbaren Platzes. 1fr 1fr 1fr ergibt drei gleich breite Spalten, 2fr 1fr macht die erste doppelt so breit. Einzelne Elemente ziehst du gezielt über mehrere Spalten:
css
.hervorgehoben {
grid-column: 1 / 3;
}Als Faustregel: Flexbox für Elemente in einer Reihe, Grid für das Seitenraster. Beides lässt sich kombinieren.
Darstellung auf allen Bildschirmgrößen
Der Großteil deiner Besucherinnen und Besucher kommt vom Handy. Dafür gibt es Media Queries – eine Bedingung, bei deren Zutreffen die Regeln darin gelten.
css
.raster {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
.raster {
grid-template-columns: 1fr;
}
}Bis 768 Pixel Breite werden aus drei Spalten eine – die Kacheln stapeln sich und bleiben lesbar. Bedingungen lassen sich auch kombinieren:
css
@media screen and (min-width: 600px) and (max-width: 900px) {
body { font-size: 17px; }
}Ein bewährter Ansatz: zuerst für kleine Bildschirme gestalten, dann über min-width nach oben erweitern. Und die Zeile aus dem ersten Beispiel nicht vergessen – ohne <meta name="viewport"> im Kopfbereich greift keine einzige dieser Regeln am Handy.
Die Kaskade: warum manche Regeln gewinnen
Das „C" in CSS steht für Cascading. Treffen mehrere Regeln auf dasselbe Element zu, entscheiden drei Prinzipien:
Spezifität. Je genauer der Selektor, desto stärker wiegt er. ID sticht Klasse, Klasse sticht Elementname.
Reihenfolge. Bei gleicher Spezifität gewinnt die Regel weiter unten. Deshalb gehören allgemeine Regeln nach oben, Sonderfälle nach unten.
Vererbung. Manche Eigenschaften geben sich an untergeordnete Elemente weiter. Setzt du font-family auf body, erben alle Elemente darin die Schriftart. Abstände und Rahmen werden nicht vererbt.
css
p { color: gray; } /* schwach */
.text { color: blue; } /* stärker */
#intro { color: green; } /* am stärksten */Bei <p class="text" id="intro"> gewinnt Grün.
Es gibt auch !important, womit du jede andere Regel überstimmst. Setz das nur im Notfall ein – sonst kämpfst du später gegen deine eigenen Ausnahmen an.
CSS-Variablen für weniger Wiederholung
Sobald dein Projekt wächst, willst du Farben und Abstände zentral festlegen. Dafür gibt es eigene Variablen:
css
:root {
--farbe-primaer: #fec600;
--farbe-text: #08111b;
--abstand: 24px;
}
.button {
background-color: var(--farbe-primaer);
color: var(--farbe-text);
padding: var(--abstand);
}:root steht für das oberste Element deiner Seite, die Variablen gelten damit überall. Eine Farbänderung kostet dich künftig eine Zeile.
Die Werkzeuge, mit denen du übst
Ein Texteditor. Visual Studio Code ist kostenlos, läuft auf Windows, macOS und Linux und färbt deinen Code ein, sodass Fehler auffallen.
Die Entwicklerwerkzeuge deines Browsers. Hast du schon. Rechtsklick auf ein Element, dann „Untersuchen" – du siehst das komplette CSS dahinter, kannst Werte direkt ändern und das Ergebnis sofort sehen. Das ist mit Abstand das nützlichste Lernwerkzeug überhaupt, und fast alle übersehen es am Anfang.
Eine Nachschlagequelle. Die MDN Web Docs dokumentieren jede CSS-Eigenschaft ausführlich und aktuell.
Typische Fehler beim Einstieg
- Der Strichpunkt fehlt. Dann wird die Regel und oft auch die nächste ignoriert.
- Klasse und ID verwechselt. Im CSS
.klasseund#id, im HTML jeweils ohne diese Zeichen. - Die Datei ist nicht verlinkt. Passiert gar nichts, prüfe zuerst den Pfad im
<link>-Element. - Der Browser zeigt eine alte Version. Neu laden mit <kbd>Strg</kbd> + <kbd>F5</kbd> beziehungsweise <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>.
box-sizingvergessen. Dann stimmen deine Breiten nicht.- Viewport-Zeile fehlt. Dann greifen die Media Queries am Handy nicht.
CSS lernen: dein Lernplan für vier Wochen
Lesen allein reicht nicht. Rechne mit vier bis fünf Stunden pro Woche.
Woche 1 – Grundlagen. HTML-Datei mit Überschriften, Absätzen und Liste anlegen, CSS-Datei verlinken. Mit Farben, Schriftgrößen und Zeilenabständen spielen.
Woche 2 – Box-Modell. Drei Kacheln mit Rahmen, Innen- und Außenabstand bauen. Werte verändern, das Box-Modell parallel in den Entwicklerwerkzeugen mitverfolgen.
Woche 3 – Layouts. Navigationsleiste mit Flexbox, dreispaltiges Raster mit Grid. Danach beides zu einer Startseite mit Kopfbereich, Inhalt und Fußzeile kombinieren.
Woche 4 – Bildschirmgrößen und Aufräumen. Media Queries ergänzen, CSS-Variablen einführen, die Datei sortieren.
Danach kannst du eine einfache Website eigenständig gestalten. Alles Weitere – Übergänge, Animationen, Pseudoklassen wie :hover – baut auf genau diesen Grundlagen auf.
Von der Übungsdatei zur eigenen Website
Irgendwann soll deine Seite nicht mehr nur lokal am Rechner liegen. Dafür brauchst du zwei Dinge.
Eine eigene Domain ist deine Adresse im Netz. Bei easyname stehen über 480 Domainendungen zur Auswahl – von .at über .com bis zu Endungen wie .dev oder .design, die zu einem Entwicklungsprojekt oder Portfolio gut passen. Ob dein Wunschname frei ist, siehst du in Sekunden über den Domain Check.
Webhosting ist der Speicherplatz für deine Dateien. Du lädst HTML und CSS hoch, und die Seite ist unter deiner Domain erreichbar. Für ein handgeschriebenes Projekt genügt ein kleiner Tarif; wächst dein Vorhaben, wechselst du später auf ein größeres Webhosting-Paket.
Praktisch beim Lernen: Auf einem eigenen Paket legst du beliebig viele Übungsprojekte in Unterordnern ab und richtest dir gleich E-Mail-Adressen zu deiner Domain ein.
Wenn du zwischendurch schnell etwas online bringen willst, ohne selbst zu schreiben, ist der Homepage-Baukasten eine Alternative. Deine CSS-Kenntnisse bleiben trotzdem wertvoll – sie erklären dir, warum eine Seite so aussieht, wie sie aussieht.
Deine Website in besten Händen: Webhosting für dein Projekt
Profitiere von ultraschnellen SSD-Servern, kostenloser SSL-Verschlüsselung und persönlichem Support. Mit easyname Webhosting bringst du deine Website in wenigen Minuten online – sicher, stabil und sorgenfrei.
Häufige Fragen zu CSS
Ist CSS eine Programmiersprache?
Nein. CSS ist eine Gestaltungssprache. Es gibt keine Schleifen und keine Bedingungen im klassischen Sinn – du beschreibst Zustände, keine Abläufe. Genau das macht den Einstieg so zugänglich.
Wie ist eine CSS-Datei aufgebaut?
Aus einer Reihe von Regeln. Jede Regel besteht aus einem Selektor und einem Block in geschweiften Klammern, in dem Eigenschaft-Wert-Paare stehen, getrennt durch Strichpunkte. Üblich ist die Reihenfolge: allgemeine Regeln oben, spezielle unten.
Wie macht man ein CSS?
Du legst eine Textdatei mit der Endung .css an, schreibst deine Regeln hinein und verlinkst sie im Kopfbereich deiner HTML-Datei mit <link rel="stylesheet" href="style.css">. Mehr braucht es nicht.
Welches Programm brauche ich für CSS?
Einen Texteditor und einen Browser. Beides hast du bereits. Ein Editor mit Syntaxhervorhebung wie Visual Studio Code macht die Arbeit angenehmer, ist aber keine Voraussetzung.
Wie lange dauert es, CSS zu lernen?
Die Grundlagen an einem konzentrierten Wochenende. Für sichere Layouts mit Flexbox und Grid solltest du vier bis sechs Wochen mit regelmäßiger Übung einplanen.
Soll ich gleich mit einem CSS-Framework starten?
Lern zuerst reines CSS. Frameworks nehmen dir Arbeit ab, verstecken aber die Grundlagen. Wer Box-Modell und Kaskade verstanden hat, kommt mit jedem Framework schnell zurecht.
Bring dein erstes Projekt online
CSS lernst du am schnellsten, indem du etwas Echtes baust. Sichere dir deine Wunschdomain und stell dein Projekt online – bei Fragen erreichst du unser Support-Team telefonisch und per E-Mail.
Deine perfekte Domain — mit nur einem Klick
Du willst online durchstarten? Bei easyname findest du über 480 Domain-Endungen — von klassischen .com und .at bis zu kreativen Spezialdomains. Finde in Sekunden deine Wunschadresse, sicher dir deinen Namen und mach dein Projekt sichtbar.
E-Mail-Login leicht gemacht: Unsere meistgesuchten Anleitungen
Der Weg ins Postfach sollte schnell und unkompliziert sein – doch manchmal hakt es beim Login. In unseren Schritt-für-Schritt-Guides erfährst du, wie du dich zuverlässig beim GMX Login anmeldest, den A1 Webmail-Zugang nutzt oder Probleme beim Hotmail Login löst – inklusive Hilfe bei Störungen, vergessenen Passwörtern und Kontoeinstellungen.
Auch für alle, die Microsoft-Dienste nutzen, haben wir die passende Anleitung: Unser Ratgeber zum Office 365 Login zeigt dir, wie du dich schnell bei Microsoft 365 anmeldest und typische Login-Probleme behebst.
WhatsApp
