Genauso wichtig wie die Elemente selbst sind die leeren Räume dazwischen – der sogenannte „Whitespace“ oder „Leerraum“. Er hilft dem Auge, sich zu orientieren und schafft eine aufgeräumte, professionelle Ästhetik.

• margin (Außenabstand): Nutze margin, um den Abstand zwischen verschiedenen Elementen (z.B. zwischen einer Überschrift und dem folgenden Absatz) zu definieren.
• padding (Innenabstand): padding ist der Abstand innerhalb eines Elements, zwischen seinem Inhalt und seinem Rand (z.B. der Abstand eines Textes zu den Rändern eines Buttons).
• Konsistenz ist der Schlüssel: Lege dir ein paar feste Abstandsgrößen fest und nutze diese immer wieder. Das sorgt für Harmonie und ein professionelles Erscheinungsbild.

/* Beispiel für Abstände in CSS / .card { padding: 20px; / Innenabstand für eine Box / margin-bottom: 30px; / Außenabstand nach unten */
border: 1px solid #ddd;
}

button {
padding: 10px 20px; /* 10px oben/unten, 20px links/rechts */
margin-top: 15px;
}

Dein erster Schritt zum visuellen Webdesign

Du siehst: Mit grundlegendem Wissen über HTML für die Struktur und CSS für das Styling kannst du deine Website komplett transformieren. Du musst nicht alles auf einmal lernen. Fang klein an: Ändere die Farben deiner Überschriften, experimentiere mit Schriftgrößen und spiele mit den Abständen.

Alles notwendige Wissen findest du auch in meinen Büchern zu CSS und Webdesign, die speziell für Einsteiger konzipiert sind. Es ist ein tolles Gefühl, die eigene Website mit ein paar Zeilen Code zum Leben zu erwecken.

Welches Styling-Element wirst du als Nächstes auf deiner Website ausprobieren? Hast du einen Lieblings-CSS-Trick, den du gerne teilst? Ich freue mich auf deine Kommentare.

Wer mit HTML und CSS anfängt, denkt oft zuerst an komplizierte Formeln, Klammern und die Angst, etwas falsch zu machen. Aber eigentlich ist CSS der Malkasten des Internets. Es ist das Werkzeug, mit dem du eine leere Leinwand (dein HTML) in eine Website verwandelst, die nicht nur funktioniert, sondern auch gut aussieht und sich gut anfühlt.

Im Frühjahr 2025 sehe ich mehr denn je: Gutes Webdesign muss nicht kompliziert sein. Es geht um die Stimmung! Warum wirkt ein blasses Grün beruhigend (wie ihr hier auf meiner Seite seht)? Warum nutzen Banken oft Blau? Jede Farbe, jede Schriftart und jeder Abstand hat eine Bedeutung und beeinflusst, wie Besucher deine Inhalte wahrnehmen.

In diesem Beitrag möchte ich dir zeigen, dass du kein Grafik-Profi sein musst, um eine schöne und effektive Website zu bauen. Mit ein paar einfachen CSS-Befehlen und einem grundlegenden Verständnis von Webdesign-Prinzipien kannst du die Wirkung deiner Texte und Bilder komplett verändern. Das ist der Moment, in dem aus Code plötzlich Gefühl wird. Genau diesen spielerischen Zugang versuche ich auch in meinen CSS-Büchern für Einsteiger zu vermitteln – denn am Ende soll das Basteln am eigenen Web-Projekt vor allem eines: Spaß machen!

1. Farbenlehre für deine Website: Mehr als nur „Rot“ oder „Grün“

Farben sind das erste, was uns ins Auge springt. Sie erzeugen Emotionen und leiten den Blick. Mit CSS gibst du deinen HTML-Elementen Farbe – aber wie wählst du die richtigen Töne?

• Der „3-Farben-Trick“: Für Einsteiger ist es am einfachsten, sich auf 2-3 Hauptfarben zu beschränken.
  • Primärfarbe: Deine Hauptfarbe (z.B. dein Firmen-Blau, dein persönliches Grün).
  • Sekundärfarbe: Eine Akzentfarbe, die die Primärfarbe ergänzt (oft ein Kontrast oder eine Abstufung).
  • Neutralfarbe: Für Texte und Hintergründe (Grautöne, Cremeweiß, Schwarz) – diese Farben halten sich dezent im Hintergrund.
• Tools helfen dir: Du musst kein Experte sein! Nutze Online-Tools wie Adobe Color Wheel oder Coolors, um harmonische Farbpaletten zu finden. Du bekommst dort direkt die passenden CSS-Codes (Hex-Werte oder RGB) zum Kopieren.
• Kontraste sind König: Gerade bei Texten ist ein hoher Kontrast zwischen Schrift- und Hintergrundfarbe entscheidend für die Lesbarkeit. Helles Gelb auf Weiß? Vergiss es! Dunkler Text auf hellem Hintergrund (oder umgekehrt) ist immer die beste Wahl für Anfänger. Mit CSS-Eigenschaften wie color und background-color spielst du hiermit.

Ein Beispiel:

/* Beispiel für Farbauswahl in CSS / body { background-color: #f8f8f8; / Helles Grau als Hintergrund / color: #333333; / Dunkles Grau für den Haupttext */
}
h1 {
color: #4CAF50; /* Deine Akzentfarbe (hier: ein frisches Grün) */
}

Hast du dich schon mal gefragt, wie Profis herausfinden, welche Schriftart eine Website nutzt? Oder warum ein Bild auf deinem Smartphone plötzlich ganz anders aussieht als am Laptop?Die Antwort liegt direkt vor deiner Nase – auf deiner Tastatur. Es ist die F12-Taste.

Was ist das „Geheimmenü“ deines Browsers?

Wenn du in Chrome, Firefox oder Edge auf F12 drückst (oder Rechtsklick -> „Untersuchen“ wählst), öffnen sich die sogenannten Entwickler-Tools. Keine Sorge, das sieht im ersten Moment nach Matrix-Code aus, ist aber eigentlich dein bester Freund beim Lernen von HTML und CSS.

3 Dinge, die du heute mit F12 ausprobieren solltest:

1. Der Inspektor (Der Röntgenblick): Klicke auf das kleine Pfeil-Symbol ganz links oben in den Entwickler-Tools und fahre dann mit der Maus über die Webseite. Du siehst sofort, welches HTML-Tag für welches Element verantwortlich ist. Es ist wie Malen nach Zahlen für Profis!
2. Live-Design-Check (CSS in Echtzeit): Du willst wissen, wie deine Website mit einer blauen statt einer grünen Überschrift aussieht? Klicke die Überschrift an und ändere im rechten Fensterbereich (unter „Styles“) einfach den Farbwert. Keine Angst: Diese Änderungen siehst du nur du. Sobald du die Seite neu lädst, ist alles wieder beim Alten. Es ist der perfekte Sandkasten zum Experimentieren.
3. Der Mobile-Check: Klicke auf das kleine Symbol, das wie ein Smartphone und ein Tablet aussieht. Jetzt kannst du testen, wie deine Seite auf einem iPhone, einem Pixel oder einem iPad aussieht. Unverzichtbar, wenn du modernes, responsives Webdesign lernen willst.

Warum das für dich wichtig ist

Besonders wenn du meine Bücher zu HTML und CSS liest, ist die F12-Taste dein wichtigstes Werkzeug. Du musst Code nicht nur theoretisch verstehen – du kannst ihn auf jeder Website der Welt „live“ beobachten und von den Großen lernen.

Kleiner Tipp für Mac-User: Falls du keine F12-Taste hast (oder sie mit der Helligkeit belegt ist), drücke einfach Cmd + Option + I.

Hast du die F12-Taste schon mal ausprobiert oder war sie bisher ein gut gehütetes Geheimnis für dich? Schreib es mir in die Kommentare!