CSS lernen ist der Schritt, mit dem aus einer nackten HTML-Seite eine Website wird, die gut aussieht. HTML legt fest, was auf deiner Seite steht – CSS bestimmt, wie es aussieht: Farben, Schriften, Abstände, Layout. Du brauchst dafür keine Vorkenntnisse im Programmieren und keine kostenpflichtige Software. In dieser Anleitung gehst du die Grundlagen Schritt für Schritt durch, mit Codebeispielen, die du direkt nachbauen kannst.
Inhaltsverzeichnis
- Was CSS macht – und warum das getrennt von HTML läuft
- Was du zum Starten brauchst
- Die CSS-Syntax verstehen
- CSS-Selektoren: die vier wichtigsten
- CSS in HTML einbinden
- Text und Schrift formatieren
- Farben in CSS angeben
- Das Box-Modell: der wichtigste Baustein
- Layouts bauen mit Flexbox und Grid
- Responsive Design mit Media Queries
- CSS-Variablen für konsistente Designs
- Dein Lernplan: realistische Etappen
- Fünf Fehler, die am Anfang Zeit kosten
- Deine erste Seite online stellen
- Wann sich CSS lernen lohnt – und wann nicht
- Häufige Fragen zu CSS
Sichere deinen Firmennamen: Mit dogado zur perfekten Domain
Der richtige Firmenname ist deine Markenidentität – die passende Domain macht ihn digital wirksam. Bei dogado reservierst du nicht nur einen Namen, sondern die technische Grundlage für deinen Online-Erfolg. Mit professioneller E-Mail, optimiertem Hosting und persönlicher Unterstützung starten wir deine digitale Präsenz.
Was CSS macht – und warum das getrennt von HTML läuft
CSS steht für Cascading Style Sheets. Die Sprache existiert aus einem einfachen Grund: Inhalt und Gestaltung sollen getrennt bleiben.
Stell dir eine Website mit 30 Unterseiten vor. Ohne CSS müsstest du jede Überschrift auf jeder Seite einzeln einfärben. Mit CSS schreibst du eine Regel in eine zentrale Datei – und alle 30 Seiten übernehmen sie. Änderst du die Farbe später, änderst du sie an genau einer Stelle.
CSS ist übrigens keine Programmiersprache. Es gibt keine Schleifen, keine Bedingungen, keine Logik im klassischen Sinn. Du beschreibst Regeln, der Browser setzt sie um. Das macht den Einstieg deutlich leichter als bei JavaScript oder PHP.
Was du zum Starten brauchst
Sehr wenig:
- Einen Texteditor. Visual Studio Code ist kostenlos und der Standard. Notepad oder TextEdit gehen zur Not auch.
- Einen Browser. Chrome, Firefox, Safari – egal. Die eingebauten Entwicklertools (Rechtsklick → „Untersuchen") zeigen dir live, welche CSS-Regeln auf ein Element wirken.
- Grundwissen in HTML. Du solltest wissen, was ein
<div>, ein<p>und ein<h1>ist. Mehr nicht.
Du brauchst zum Üben noch keinen Webspace. Eine HTML-Datei auf deinem Rechner reicht – du öffnest sie einfach per Doppelklick im Browser.
Die CSS-Syntax verstehen
Jede CSS-Regel folgt demselben Muster: Du sagst, welches Element du meinst, und dann was daran anders sein soll.
css
h1 {
color: #d32f2f;
}Aufgeschlüsselt:
h1ist der Selektor – er bestimmt, welche Elemente betroffen sind.colorist die Eigenschaft (Property).#d32f2fist der Wert.- Zusammen ergeben Eigenschaft und Wert eine Deklaration. Sie endet immer mit einem Semikolon.
Mehrere Deklarationen schreibst du untereinander in dieselben geschweiften Klammern:
css
h1 {
color: #d32f2f;
font-family: Helvetica, Arial, sans-serif;
font-size: 32px;
text-align: center;
}Zwei Dinge, die am Anfang oft schiefgehen: CSS unterscheidet Groß- und Kleinschreibung, und ein vergessenes Semikolon lässt alle folgenden Zeilen der Regel ins Leere laufen.
CSS-Selektoren: die vier wichtigsten
Selektoren entscheiden, welche Elemente eine Regel trifft. Für den Anfang reichen dir vier.
| Selektor | Schreibweise | Wirkt auf |
|---|---|---|
| Typ | h2 | alle Elemente dieses Typs |
| Klasse | .hinweis | alle Elemente mit class="hinweis" |
| ID | #navigation | genau ein Element mit id="navigation" |
| Universal | * | alle Elemente im Dokument |
In der Praxis arbeitest du fast immer mit Klassen. Sie sind wiederverwendbar und lassen sich beliebig kombinieren:
css
.hinweis {
background-color: #fff3cd;
padding: 16px;
border-left: 4px solid #ffc107;
}Im HTML weist du die Klasse ohne Punkt zu:
html
<p class="hinweis">Bitte beachte die Öffnungszeiten.</p>IDs solltest du sparsam einsetzen. Sie sind stärker gewichtet als Klassen, und wenn sich Regeln später widersprechen, gewinnt die ID – auch dann, wenn du das nicht willst. Diese Gewichtung heißt Spezifität: Bei konkurrierenden Regeln setzt sich die spezifischere durch, bei gleicher Spezifität die zuletzt notierte.
CSS in HTML einbinden
Es gibt drei Wege. Zwei davon brauchst du selten, einen ständig.
Externe CSS-Datei (der Standard)
Du legst eine Datei style.css an und verlinkst sie im <head> deines HTML-Dokuments:
html
<link rel="stylesheet" href="style.css">Das ist der Weg, den du nutzen solltest. Eine Datei, alle Seiten, eine Änderung wirkt überall.
Style-Block im HTML-Kopf
Für einzelne Seiten mit Sonderformatierung:
html
<head>
<style>
h2 { color: #305796; }
</style>
</head>Inline-Style direkt am Element
html
<h2 style="color: red;">Zwischenüberschrift</h2>Funktioniert, wird aber schnell unübersichtlich und überschreibt fast alles andere. Nutze es nur für schnelle Tests.
Text und Schrift formatieren
Die Eigenschaften, die du am häufigsten brauchst:
css
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333333;
}font-familyist eine Prioritätsliste. Der Browser nimmt die erste Schrift, die auf dem Gerät verfügbar ist. Setze ans Ende immer eine generische Familie wiesans-serifoderserifals Rückfallebene.font-sizegibst du inpx(feste Größe),rem(relativ zur Basisgröße des Dokuments) oderem(relativ zum Elternelement) an.remist für Fließtext meist die beste Wahl, weil es die Schriftgrößen-Einstellung des Nutzers respektiert.line-heightohne Einheit ist ein Faktor:1.6bedeutet 160 % der Schriftgröße. Für gute Lesbarkeit liegst du bei Fließtext mit Werten zwischen 1.5 und 1.7 richtig.font-weightsteuert die Strichstärke.normal(400) undbold(700) reichen in den meisten Fällen.
Dazu kommen text-align (left, center, right), text-decoration (etwa underline oder none, um Links die Unterstreichung zu nehmen) und text-transform (uppercase für Großbuchstaben, ohne den Text selbst ändern zu müssen).
Farben in CSS angeben
Vier Schreibweisen, alle gleichwertig:
css
.box {
color: red; /* Farbwort */
color: #d32f2f; /* Hexadezimal */
color: rgb(211, 47, 47); /* RGB */
color: rgba(211, 47, 47, 0.5); /* RGB mit 50 % Deckkraft */
}In der Praxis dominiert die Hex-Schreibweise. Das Doppelzeichen-Prinzip dahinter: Die sechs Stellen stehen paarweise für Rot, Grün und Blau. #ffffff ist Weiß, #000000 Schwarz.
Brauchst du Transparenz – etwa für eine halbdurchsichtige Overlay-Box –, nimm rgba() und den vierten Wert zwischen 0 und 1.
Für Hintergründe gilt dasselbe:
css
.karte {
background-color: #f5f5f5;
}Das Box-Modell: der wichtigste Baustein
Jedes HTML-Element ist für den Browser ein Rechteck. Dieses Rechteck besteht von innen nach außen aus vier Schichten:
- Content – der Inhalt selbst, steuerbar über
widthundheight - Padding – der Innenabstand zwischen Inhalt und Rahmen
- Border – der Rahmen
- Margin – der Außenabstand zu benachbarten Elementen
css
.karte {
width: 300px;
padding: 20px;
border: 1px solid #dddddd;
margin: 24px;
}Hier kommt der Punkt, an dem fast jeder Einsteiger einmal stolpert: Standardmäßig addiert der Browser Padding und Border zur angegebenen Breite. Die Box oben ist also nicht 300 Pixel breit, sondern 342.
Die Lösung ist eine Zeile, die du am besten an den Anfang jedes Stylesheets setzt:
css
* {
box-sizing: border-box;
}Damit rechnet der Browser Padding und Border in die Breite hinein. 300 Pixel bleiben 300 Pixel.
Ein zweites Detail: Untereinanderliegende Elemente lassen ihre vertikalen Außenabstände zusammenfallen. Haben zwei Absätze je 20 Pixel margin, liegen dazwischen 20 Pixel – nicht 40.
Layouts bauen mit Flexbox und Grid
Für Layouts gibt es zwei moderne Werkzeuge. Beide brauchst du.
Flexbox für eine Richtung
Flexbox ordnet Elemente entlang einer Achse an – horizontal oder vertikal. Ideal für Navigationen, Button-Reihen oder eine Kopfzeile mit Logo links und Menü rechts.
css
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}justify-contentverteilt entlang der Hauptachse (flex-start,center,space-between,space-around)align-itemsrichtet auf der Querachse aus (centerlöst zum Beispiel das Problem, Elemente vertikal zu zentrieren)gapsetzt den Abstand zwischen den Elementen – deutlich sauberer als Margins an jedem Kindflex-wrap: wraperlaubt einen Umbruch, wenn der Platz nicht reicht
Grid für zwei Richtungen
CSS Grid arbeitet mit Zeilen und Spalten gleichzeitig. Damit baust du ganze Seitenlayouts oder Kachelraster.
css
.raster {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}Die Einheit fr steht für „fraction" – einen Anteil am verfügbaren Platz. 1fr 1fr 1fr ergibt drei gleich breite Spalten. 2fr 1fr ergibt zwei Spalten, wobei die erste doppelt so breit ist.
Ein einzelnes Element kann sich über mehrere Spalten strecken:
css
.hero {
grid-column: 1 / 3;
}Faustregel: Reihe oder Spalte → Flexbox. Raster → Grid.
Responsive Design mit Media Queries
Deine Seite muss auf dem Smartphone genauso funktionieren wie am Monitor. Media Queries aktivieren CSS-Regeln erst ab oder bis zu einer bestimmten Bildschirmbreite.
css
.raster {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
@media (max-width: 768px) {
.raster {
grid-template-columns: 1fr;
}
}Ab Tablet-Breite abwärts wird aus dem Dreispalter eine einzige Spalte. Übliche Umbruchpunkte liegen bei 768 Pixeln (Tablet) und 480 Pixeln (Smartphone) – feste Regeln gibt es dafür aber nicht, orientiere dich an deinem Inhalt.
Damit das überhaupt greift, gehört ins <head> deiner HTML-Datei diese Zeile:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ohne sie zoomt das Smartphone die Desktop-Ansicht einfach herunter.
Manche Anpassungen brauchen gar keine Media Query. clamp() skaliert Werte fließend zwischen einem Minimum und einem Maximum:
css
h1 {
font-size: clamp(1.8rem, 5vw, 3rem);
}Die Überschrift ist nie kleiner als 1.8rem, nie größer als 3rem und passt sich dazwischen der Fensterbreite an.
CSS-Variablen für konsistente Designs
Sobald deine Seite mehr als ein paar Regeln hat, lohnen sich Variablen. Du definierst Farben und Abstände einmal zentral und rufst sie überall ab.
css
:root {
--farbe-primaer: #d32f2f;
--farbe-text: #333333;
--abstand: 24px;
}
.button {
background-color: var(--farbe-primaer);
color: #ffffff;
padding: var(--abstand);
}Willst du später die Markenfarbe ändern, änderst du eine Zeile. :root bedeutet dabei: gilt für das ganze Dokument.
Dein Lernplan: realistische Etappen
Wie lange es dauert, hängt davon ab, was du erreichen willst. Diese Aufteilung hat sich als Reihenfolge bewährt:
Woche 1 – Grundlagen. Syntax, Klassen-Selektoren, Farben, Schriftformatierung. Ziel: Du kannst einen bestehenden Text umgestalten.
Woche 2 – Box-Modell. Padding, Border, Margin, box-sizing. Ziel: Du bekommst Abstände dorthin, wo du sie haben willst. Das ist die Hürde, an der die meisten hängen bleiben – nimm dir Zeit dafür.
Woche 3 – Layout. Flexbox zuerst, danach Grid. Ziel: eine Seite mit Kopfzeile, Inhaltsbereich und Fußzeile.
Woche 4 – Responsive. Media Queries, relative Einheiten, Test auf dem Handy. Ziel: Deine Seite funktioniert auf jedem Gerät.
Für eine einfache eigene Website reichen diese vier Etappen. Wer beruflich Websites baut, lernt danach weiter – aber der Punkt, ab dem CSS nützlich für dich wird, kommt früher, als viele denken.
Wichtiger als jeder Zeitplan: Lerne an einem echten Projekt. Such dir eine Seite, die du selbst brauchst – eine Vereinsseite, ein Portfolio, eine Visitenkarte. Tutorials nachtippen bringt weniger als eine eigene Seite, bei der du an konkreten Problemen hängen bleibst und sie löst.
Fünf Fehler, die am Anfang Zeit kosten
- Alles mit IDs formatieren. Führt später zu Spezifitätskonflikten. Nutze Klassen.
box-sizing: border-boxvergessen. Kostet stundenlanges Rätseln über zu breite Boxen.- Feste Pixelbreiten für Container.
max-widthstattwidthverhindert horizontales Scrollen auf dem Handy. - Zu früh zu Frameworks greifen. Bootstrap oder Tailwind nehmen dir Arbeit ab – aber nur, wenn du verstehst, was sie tun.
- Nicht auf dem Handy testen. Die Entwicklertools deines Browsers haben eine Geräteansicht. Nutze sie von Anfang an.
Deine erste Seite online stellen
Solange du übst, reicht die HTML-Datei auf dem eigenen Rechner. Sobald jemand anderes deine Seite sehen soll, brauchst du zwei Dinge: eine Domain als Adresse und Webspace, auf dem die Dateien liegen.
Mit einem Webhosting-Paket von dogado lädst du deine HTML- und CSS-Dateien per FTP hoch, und die Seite ist erreichbar – eine Domain und ein SSL-Zertifikat sind bereits enthalten. Wenn du zuerst wissen willst, ob dein Wunschname noch frei ist, kannst du das im Domain-Check prüfen.
Arbeitest du mit WordPress, gilt dasselbe CSS-Wissen: Über den Customizer oder ein Child-Theme passt du das Design deines Themes an, ohne bei jedem Update alles zu verlieren. Dafür ist WordPress-Hosting die passende Basis, weil Serverumgebung und One-Click-Installation schon eingerichtet sind.
Die richtige Basis für dein WordPress-Projekt
Dein WordPress-Projekt braucht solides Hosting? Mit unserem WordPress-Hosting bekommst du optimierte Server, echte Sicherheit und Support, der antwortet. Starten kostet weniger als du denkst – schau dir unsere Pakete an.
Wann sich CSS lernen lohnt – und wann nicht
Ehrlich abgewogen:
CSS lohnt sich, wenn du deine Seite selbst kontrollieren willst, regelmäßig Anpassungen machst, ein Theme oder einen Baukasten feinjustieren möchtest oder ohnehin in Richtung Webentwicklung gehst. Auch wer nur die Grundlagen kennt, spart sich viele Rückfragen an Dienstleister.
CSS ist der Umweg, wenn du in erster Linie schnell online sein musst und dein Geschäft woanders liegt. Für diesen Fall gibt es zwei kürzere Wege: Mit dem Homepage-Baukasten baust du deine Seite per Drag-and-drop zusammen, ohne eine Zeile Code. Und wenn du das Thema komplett abgeben willst, übernimmt das dogado-Team die Website-Erstellung inklusive Design und Technik.
Beides schließt CSS übrigens nicht aus. Viele fangen mit einem Baukasten an und lernen die Grundlagen später, um gezielt einzelne Details anzupassen.
Homepage Baukasten: Deine Website mit dogado
Gestalte deine Website genauso, wie du sie dir vorstellst. Mit dem Drag-and-drop-Editor platzierst du Texte, Bilder und weitere Elemente mühelos an der gewünschten Stelle – ganz ohne eine einzige Zeile Code.
Häufige Fragen zu CSS
Kann ich CSS im Selbststudium lernen?
Ja. CSS ist eine der zugänglichsten Websprachen: Du siehst jede Änderung sofort im Browser, brauchst keine Installation und kannst den Code jeder Website mit den Entwicklertools ansehen. Ein Kurs kann strukturieren, notwendig ist er nicht.
Wie lange dauert es, HTML und CSS zu lernen?
Die Grundlagen beider Sprachen bekommst du bei regelmäßigem Üben in wenigen Wochen zusammen – genug, um eine einfache Website selbst zu bauen. Sicherheit bei komplexeren Layouts und sauberer Struktur kommt über Monate und über eigene Projekte.
Ist CSS eine Programmiersprache?
Nein. CSS ist eine Stylesheet-Sprache. Es beschreibt die Darstellung von Elementen, enthält aber keine Programmlogik wie Schleifen oder Bedingungen. Deshalb ist der Einstieg auch leichter als bei JavaScript.
Was ist der Unterschied zwischen Flexbox und Grid?
Flexbox ordnet Elemente entlang einer Achse an – also in einer Reihe oder einer Spalte. Grid arbeitet zweidimensional mit Zeilen und Spalten gleichzeitig. Für Navigationen nimmst du Flexbox, für Seitenlayouts und Kachelraster Grid.
Brauche ich CSS-Kenntnisse, wenn ich einen Baukasten nutze?
Nein, für den normalen Betrieb nicht. Baukästen und WordPress-Themes bringen fertige Designs mit. CSS-Grundlagen helfen dir aber, wenn du einzelne Details anpassen willst, die der Editor nicht abdeckt.
Womit sollte ich zuerst anfangen: HTML oder CSS?
Mit HTML. CSS bezieht sich immer auf HTML-Elemente – ohne zu wissen, was ein <div> oder ein <h1> ist, hast du nichts, worauf du deine Regeln anwenden kannst. Die Basics in HTML sind an einem Nachmittag machbar.
WhatsApp
