Wie CSS deine Website zum Sprechen bringt – 3

Abstände: Die Kunst des richtigen Abstands

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.