css basics: farben, abstände, boxen & layout – mit vielen beispielen
Best viewed in 800×600 Frame-free No Flash
>>> CSS ist die Farbe auf dem Pinsel: ohne CSS geht’s auch, aber mit CSS sieht’s endlich nach Webseite aus.
CSS: Die wichtigsten Grundlagen

CSS lernen: einfach, praktisch, ohne großes Drama

CSS ist dafür da, dass deine HTML-Seite nicht wie ein blankes Formular aussieht. Mit CSS regelst du Farben, Schriften, Abstände, Rahmen, und das ganze Layout. Wenn HTML das Gerüst ist, dann ist CSS die Tapete, der Boden und die Möbel. Man muss es nicht komplizierter machen als es ist.

Viele starten mit CSS und wundern sich, warum plötzlich nichts klappt. Meist ist es nur ein kleiner Fehler: die Datei ist nicht eingebunden, ein Selector passt nicht, oder du hast dich vertippt. Das Gute: CSS verzeiht viel. Das Schlechte: CSS sagt dir nicht immer, was falsch ist. Darum arbeiten wir hier mit vielen kleinen Beispielen. Du kopierst sie, testest sie, und dann änderst du eine Sache. So lernst du schnell.

Mini-Tipp

Wenn du an CSS schraubst: ändere immer nur eine Regel und aktualisiere dann. Wenn du zehn Dinge auf einmal machst, weißt du später nicht mehr, was geholfen hat und was kaputt ging.

1) CSS einbinden

Am saubersten ist eine externe Datei, zum Beispiel style.css. Die bindest du im HTML im <head> ein. So bleibt alles ordentlich, und du kannst viele Seiten mit einem Stylesheet steuern. 

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

Es gibt auch Inline-CSS, das ist CSS direkt am Element. Das geht, ist aber auf Dauer unübersichtlich. Für kleine Tests ist es ok, für ganze Seiten eher nicht. 

<p style="color:#ff0000;">Roter Text</p>

2) Wie CSS-Regeln aufgebaut sind

Eine CSS-Regel besteht aus einem Selector und den Eigenschaften. Selector bedeutet: “wen will ich stylen?”. Eigenschaften sind dann Dinge wie color, margin und border. 

p {
  color: #111111;
  margin: 10px 0;
}

Der Selector hier ist p, also alle Absätze. Wenn du nur einen bestimmten Absatz willst, nimmst du eine Klasse. Klassen fangen mit Punkt an. 

.hinweis {
  background: #fff1a8;
  border: 1px solid #000;
}

Und dann setzt du in HTML: <div class="hinweis">...</div>. Fertig. Wenn das nicht klappt, ist es meist ein Tippfehler im Klassennamen. Passiet ständig.

3) Farben: Text, Hintergrund und Links

Farben in CSS sind einfach. Du setzt z.B. die Textfarbe mit color und den Hintergrund mit background oder background-color. Du kannst Hex-Werte nutzen, oder auch Farbnamen. Hex ist meistens genauer. 

body {
  background: #f1e9b6;
  color: #1a1a1a;
}

a { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: #0047ab; }

Links haben oft verschiedene Zustände: normal, besucht, hover. Das sind Pseudo-Klassen. Pseudo klingt fancy, ist aber nur “ein Zustand”. Wenn du das einmal gesehen hast, nutzt du es überall.

4) Abstände: margin und padding

Zwei Wörter, die du lieben und hassen wirst: margin und padding. Margin ist Außenabstand, padding ist Innenabstand. Wenn du das verwechselst, sieht alles schnell schief aus. Aber du gewöhnst dich dran. 

.box {
  margin: 12px;       /* außen */
  padding: 12px;      /* innen */
  border: 1px solid #000;
}

Du kannst Abstände auch pro Seite setzen: margin-top, margin-right, margin-bottom, margin-left. Oder kurzform: margin: oben rechts unten links. 

.box {
  margin: 10px 20px 30px 40px;
}

Das wirkt am Anfang wie Zahlenlotto, aber es ist logisch: im Uhrzeigersinn. Wenn du nur zwei Werte angibst, ist es “oben/unten” und “links/rechts”. Das ist ziemlich praktisch.

5) Rahmen und “Kästen”: border

Rahmen sind der Klassiker. Ein Rahmen besteht aus Dicke, Stil und Farbe. So: 

.kasten {
  border: 2px solid #8a8a8a;
  background: #fff7cf;
}

Es gibt auch dotted und dashed. Damit kannst du einen “Hinweis”-Look bauen. Das ist gut für kleine Callouts. 

.hinweis {
  border: 2px dashed #7a6b00;
  background: #fff1a8;
}

6) Schrift: font-family und font-size

Mit font-family bestimmst du die Schrift. Du gibst am besten mehrere an, damit der Browser eine Alternative hat. font-size regelt die Größe. Und line-height macht Text lesbarer. 

body {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

Wenn Text zu eng steht, wird er anstrengend. Ein bisschen Luft wirkt sofort besser. Das ist so eine Regel, die viele unterschätzen.

7) Layout: block, inline und einfache Spalten

In HTML gibt es Elemente, die “Block” sind (nehmen die ganze Breite) und welche die “Inline” sind (laufen im Text). Das kannst du mit display steuern. 

.inline {
  display: inline;
}

.block {
  display: block;
}

Für zwei Spalten gibt es mehrere Wege. Heute nutzt man oft Grid oder Flex. Aber selbst mit einfachen Mitteln geht viel. Mit Flex kannst du z.B. schnell zwei Bereiche nebeneinander legen: 

.zweispalten {
  display: flex;
  gap: 12px;
}

.zweispalten .links { flex: 1.2; }
.zweispalten .rechts { flex: 0.8; }

Und fürs Handy kannst du das einfach umstellen. Wenn der Bildschirm klein ist, sollen die Spalten untereinander. Das machst du mit einer Media Query. 

@media (max-width: 920px) {
  .zweispalten {
    flex-direction: column;
  }
}

Media Queries sind ein echter Gamechanger. Du musst nicht alles neu bauen, du sagst nur: “ab hier bitte anders”. Wenn du das einmal drauf hast, wirst du Webseiten viel entspannter bauen.

8) Hover-Effekte: Links, Buttons, Navigation

Hover bedeutet: die Maus ist drüber. Das ist super für Navigation und Buttons. Du kannst damit zeigen: “hier passiert was”. Beispiel für einen Button: 

.btn {
  background: #e6e6e6;
  border: 2px solid #8a8a8a;
  padding: 7px 12px;
  text-decoration: none;
  color: #000;
}

.btn:hover {
  background: #d4d4d4;
}

Wenn du willst, kannst du den Rahmen beim Hover auch “umdrehen”, dann sieht es gedrückt aus. Das ist ein netter Effekt und kostet fast nichts.

9) Tabellen stylen

Tabellen sind nicht nur “Daten”. Sie sind auch eine sehr klare Darstellung, wenn du Regeln, Werte oder Listen zeigst. Gute Tabellen sind Gold, schlechte Tabellen sind Stress. 

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border: 1px solid #000; padding: 8px 10px; text-align: left; }
th { background: #d7d7d7; }
tr:nth-child(even) td { background: #f7f7f7; }

border-collapse sorgt dafür, dass die Linien sauber zusammenfallen. Und nth-child macht Zebrastreifen, damit man Zeilen besser lesen kann. Das ist ein kleiner Trick, aber sehr wirkungsvoll.

10) Typische Fehler (und wie du sie schnell findest)

Hier sind die Klassiker, die jedem mal passieren:

  • CSS-Datei ist nicht eingebunden (Pfad stimmt nicht)
  • Du schreibst .box im CSS, aber im HTML heißt es class="bbox"
  • Eine spätere Regel überschreibt die frühere Regel
  • Du vergisst das Semikolon am Ende einer Zeile
  • Du vertippst dich bei einer Eigenschaft (z.B. bakground)

Wenn du Debuggen willst: schau in den Browser. Da gibt es Entwicklerwerkzeuge. Dort siehst du, welches CSS greift, und welches durchgestrichen ist. Das ist extrem hilfreich. Wenn du das einmal nutzt, willst du nie wieder ohne.

Merksatz

CSS ist oft nicht “kaputt”, es wird nur überschrieben. Erst prüfen, dann fluchen.

Mini-FAQ

Zum Schluss noch ein paar kurze Fragen. Nicht zu lang, damit du weiter bauen kannst.

FAQ

Was ist CSS?

CSS ist die Stylesprache fürs Web. Sie bestimmt, wie HTML aussieht.

Warum greift meine Regel nicht?

Meist ist der Selector falsch oder eine andere Regel kommt später und gewinnt. Manchmal ist es auch nur ein Tippfehler.

Was ist besser: Inline-CSS oder externe Datei?

Externe Datei ist besser, weil alles zentral ist. Inline ist ok für kleine Tests aber auf Dauer wird es unübersichtlich.

Wie mache ich zwei Spalten, die am Handy untereinander sind?

Mit Flex oder Grid und einer Media Query. Erst nebeneinander, dann bei kleiner Breite auf column umstellen.

Das war der praktische CSS-Einstieg. Wenn du diese Beispiele verstanden hast, kannst du schon sehr viel bauen: Navigation, Boxen, Tabellen, Buttons und ein sauberes Layout. Der Rest ist Feintuning und Geschmack. Und ein bischen Geduld.