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.

Die Wahl der Schriftart (Font) und Schriftgröße ist entscheidend für die Lesbarkeit und den Charakter deiner Website. Auch hier hast du mit CSS alle Zügel in der Hand.

• Wähle lesbare Schriftarten: Für lange Texte (deine Blogbeiträge!) sind serifenlose Schriften (wie Arial, Lato, Open Sans) oft am besten geeignet, da sie am Bildschirm leichter zu lesen sind. Serifenschriften (wie Times New Roman) wirken klassischer und sind oft gut für Überschriften oder gedruckte Texte.
• Weniger ist mehr: Beschränke dich auf maximal zwei bis drei verschiedene Schriftarten auf deiner gesamten Website. Eine für Überschriften, eine für den Fließtext und eventuell eine für besondere Akzente. Zu viele verschiedene Fonts wirken unruhig.
• Die richtige Schriftgröße: Der Haupttext sollte am Desktop mindestens 14 Pixel (px) groß sein, auf Mobilgeräten eventuell etwas kleiner, um mehr Inhalt darzustellen. Überschriften sind natürlich größer.
• Die richtige Schriftgröße (line-height): Dieser Wert ist oft unterschätzt, aber enorm wichtig für die Lesbarkeit langer Texte. Ein line-height von 1.5 bis 1.8 ist meist ein guter Wert. Probier es aus! Nutze CSS um diese Werte festzulegen:

Ein Beispiel:

/* Beispiel für Schriftarten und -größen in CSS / body { font-family: „Open Sans“, Arial, sans-serif; / Fallback-Schriftarten angeben / font-size: 18px; / Standard-Schriftgröße für den Haupttext / line-height: 1.6; / Wichtig für die Lesbarkeit: Zeilenabstand */
}

h1 {
font-family: Georgia, serif; /* Eine andere Schriftart für Überschriften / font-size: 2.5em; / Relative Größe zur Basis-Schriftgröße */
color: #4CAF50;
}

p {
margin-bottom: 1em; /* Abstand zwischen Absätzen */
}

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) */
}

In den letzten Jahren haben wir uns daran gewöhnt, unsere Gedanken und Bilder auf Plattformen wie Instagram oder LinkedIn zu teilen. Aber dort sind wir immer nur Gäste. 2024 beobachte ich einen spannenden Trend: Die Rückkehr zur eigenen Website. Eine eigene Website mit HTML und CSS zu bauen, ist wie ein eigenes Grundstück zu besitzen. Du entscheidest, wie es aussieht, wer die Regeln macht und wie lange deine Inhalte sichtbar bleiben.

In meinen Büchern – egal ob für Erwachsene oder in meinem Einsteigerkurs für Kids ab 12 – geht es mir auch darum, diese Freiheit zurückzugeben. Es geht um die Lust am Coden, es ist kreativ, die eigene Website zu „bauen“. Es ist ein unglaubliches Gefühl, zum ersten Mal eine leere Seite im Browser in etwas ganz Eigenes zu verwandeln. Es ist das digitale Handwerk unserer Zeit.

Wie sihst du das? Hast du Lust es in die Kommentare zu schreiben? Na dann los …