CSS trennt Struktur und Design — ein praxisnaher Überblick über die Technik, mit der ich jedes einzelne Layout auf dieser Website gebaut habe.
CSS ist seit 1996 vom W3C standardisiert und hat sich seither von simplen Farb- und Schriftangaben zu einem mächtigen Layout-Werkzeug entwickelt. Hier ein praxisnaher Überblick, wie ich CSS in Projekten tatsächlich einsetze.
Ein Selektor wählt ein Element aus (h1, .klasse, #id), eine Eigenschaft definiert, was gestylt wird (color, font-size), ein Wert legt fest, wie. Klassen-Selektoren lassen sich auf mehrere Elemente anwenden, ID-Selektoren sind für einzigartige Elemente gedacht.
Relative Einheiten wie rem und % sorgen für responsive Skalierung, absolute Einheiten wie px für präzise Kontrolle, wo sie wirklich gebraucht wird. Bei Farben nutze ich meist Hex-Codes oder rgb(), je nachdem, ob Transparenz eine Rolle spielt.
Jedes Element besteht aus Inhalt, Innenabstand, Rand und Rahmen — wer das Box-Modell wirklich verinnerlicht hat, erspart sich die meisten Layout-Kopfschmerzen im Alltag.
display: flex eignet sich für eindimensionale Layouts (eine Zeile oder Spalte flexibel anordnen), display: grid für zweidimensionale Raster mit klar definierten Spalten und Zeilen. Beide ergänzen sich, statt Konkurrenten zu sein — ich nutze in fast jedem Projekt beide.
Media Queries passen Stile an Bildschirmgröße und Ausrichtung an, das Mobile-First-Prinzip (erst für kleine Bildschirme entwerfen, dann erweitern) macht diesen Prozess deutlich robuster als der umgekehrte Weg.
:hover und :nth-child reagieren auf Zustände, ::before/::after erzeugen virtuelle Elemente ohne zusätzliches HTML. transition und @keyframes sorgen für sanfte Bewegung, CSS-Variablen (--variable-name) halten Farb- und Abstandswerte an einer Stelle konsistent — genau das Prinzip, das dieser Website ihr einheitliches Erscheinungsbild gibt.
Bootstrap liefert fertige Komponenten und ein Grid-System, Tailwind setzt auf Utility-Klassen für maximale Flexibilität, Bulma ist ein schlankeres, Flexbox-basiertes Framework. Welches passt, hängt vom Projekt ab — für individuelles Design baue ich meist ohne schweres Framework.
CSS-Variablen werden zunehmend zum Standard für konsistente Designsysteme, Subgrid ermöglicht komplexere verschachtelte Raster, CSS Houdini öffnet die Rendering-Engine für ganz neue Effekte. CSS ist über die Jahre von einer reinen Stylesprache zu einem echten Layout-Werkzeug gereift.
Webdesigner & SEO-Experte aus Augsburg — seit 1999
