6.2 Grundlagen der CSS-Formatierung

Gliederung

6.2.1 CSS Syntax – Befehle definieren
6.2.2 CSS in HTML einbinden – Möglichkeiten
6.2.3 CSS in HTML einbinden – Fazit
6.2.4 Kommentare im Stylesheet
6.2.5 CSS-Formate auf HTML-Elemente anwenden
6.2.6 Gruppierung
6.2.7 Verschachtelung
6.2.8 Sammeleigenschaften
6.2.9 Die Elemente div und span
6.2.10 Klassenselektoren
6.2.11 ID-Selektoren – Individualformate definieren
6.2.12 Der Unterschied zwischen Klassen und IDs
6.2.13 Pseudoklassen
6.2.14 Selektoren und Spezifität
6.2.15 Exkurs – Eigenschaftswerte: Längenmaße, Farben, Schlüsselwörter
6.2.16 Selbsttest zu Grundlagen der CSS-Formatierung

CSS ist eine äußerst flexible Sprache, mit der wir vielfältige Gestaltungsmöglichkeiten für unsere Webseiten umsetzen können. In diesem Kapitel lernen wir die Syntax, Einbindungsmethoden, Selektoren und weitere wesentliche Bausteine kennen. Wir erfahren, wie CSS-Regeln strukturiert werden, wie sie auf unterschiedliche Elemente angewendet werden und wie durch Gruppierung und Verschachtelung komplexere Layouts entstehen. Zusätzlich beschäftigen wir uns mit der Spezifität von Selektoren, die bestimmt, welche CSS-Regel angewendet wird, wenn mehrere zutreffen.

Heutzutage programmieren wir CSS selten direkt von Hand, insbesondere bei größeren Projekten. Frameworks wie Bootstrap oder Tailwind CSS bieten vorgefertigte Designkomponenten und erleichtern den Umgang mit wiederkehrenden Aufgaben. Dennoch ist ein Verständnis der Grundlagen unverzichtbar. Es gibt viele Situationen, in denen wir bestehende Frameworks anpassen oder erweitern müssen, um spezifische Anforderungen zu erfüllen. Ohne das Verständnis der grundlegenden Syntax und Funktionsweise von CSS stoßen wir dabei schnell an unsere Grenzen.

Aktuell (im Jahr 2024) zählen die folgenden CSS-Frameworks zu den bedeutendsten in der Webentwicklung:

  • Bootstrap: Ein weit verbreitetes Framework, das eine Vielzahl vorgefertigter Komponenten und ein flexibles Grid-System bietet.

  • Animate.css: Eine Bibliothek, die eine Sammlung von CSS-Animationen bereitstellt, die einfach in Projekte integriert werden können.

  • Foundation: Ein Framework, das sich durch ein elegantes Design und eine umfangreiche Sammlung von UI-Komponenten auszeichnet.

  • Tailwind CSS: Ein Utility-First-Framework, das Entwicklern ermöglicht, individuelle Designs direkt im Markup zu erstellen.

  • UIkit: Ein leichtgewichtiges und modular aufgebautes Front-End-Framework für die Entwicklung schneller und leistungsfähiger Webschnittstellen.

Die Wahl des passenden Frameworks hängt von den spezifischen Anforderungen des Projekts sowie den Präferenzen des Entwicklungsteams ab.

Um stets aktuelle Informationen über die Verbreitung und Nutzung von CSS-Frameworks zu erhalten, können wir die Übersicht bei W3Techs nutzen, die aktuelle Statistiken zur Verbreitung verschiedener CSS-Frameworks bereitstellt. Laut deren Daten vom November 2024 wird Bootstrap von 17,1 % aller Websites verwendet. Andere Frameworks wie Animate.css, Foundation, Tailwind CSS und UIkit haben deutlich geringere Marktanteile.

Indem wir die Grundlagen beherrschen, schaffen wir eine Basis, die uns nicht nur die Nutzung von Frameworks erleichtert, sondern auch die Fähigkeit gibt, selbstständig flexible und kreative Lösungen zu entwickeln. Dieses Kapitel legt den Grundstein für den professionellen Umgang mit CSS und ist ein wichtiger Schritt hin zu modernen, responsiven und ansprechenden Layouts.