Definition:
CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache, mit der das Design und Layout von HTML-Dokumenten definiert wird. CSS trennt die Inhalte (HTML) von der Gestaltung, wodurch Webseiten flexibler, wartbarer und responsiver werden.
Was kann CSS?
✔ Farben, Schriftarten und Abstände definieren
✔ Webseiten responsiv für verschiedene Bildschirmgrößen gestalten
✔ Layouts mit Grids und Flexbox strukturieren
✔ Animationen und Übergänge erstellen
✔ Designs zentral pflegen und mehrfach wiederverwenden
? Fazit: Mit CSS wird eine einfache HTML-Seite zu einer professionell gestalteten Weboberfläche.
CSS-Grundlagen – Aufbau & Syntax
Ein einfaches CSS-Beispiel:
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
| Element | Funktion |
|---|---|
body |
Selektor: bestimmt, welches HTML-Element gestylt wird |
{ ... } |
Deklarationsblock: umfasst alle Style-Regeln |
margin: 0; |
Eigenschaft: entfernt äußeren Abstand |
color: #333; |
Setzt die Textfarbe |
Arten der Einbindung von CSS
? Inline-CSS: direkt im HTML-Element (nicht empfohlen)
? Internes CSS: im <style>-Tag im <head>
? Externes CSS: ausgelagert in .css-Datei – empfohlen für Wartbarkeit
<link rel=“stylesheet“ href=“styles.css“>
Wichtige Konzepte in CSS
✅ Selektoren
Bestimmen, welche Elemente gestylt werden (z. B. p, .klasse, #id, div > p)
✅ Vererbung & Kaskadierung
Stile können vererbt werden (z. B. Schriftart) – die Cascading Rule entscheidet, welche Regel gilt, wenn mehrere Styles zutreffen.
✅ Box-Modell
Jedes HTML-Element ist eine Box:
-
content→ Inhalt -
padding→ Innenabstand -
border→ Rahmen -
margin→ Außenabstand
Moderne CSS-Features
| Feature | Nutzen |
|---|---|
| Flexbox | Flexible ein- oder zweidimensionale Layouts |
| CSS Grid | Komplexe, responsive Rasterlayouts |
| Media Queries | Anpassung an verschiedene Bildschirmgrößen |
| Custom Properties (CSS-Variablen) | Wiederverwendbare Werte |
| Transitions & Animations | Weiche Effekte ohne JavaScript |
| Dark Mode & System Preferences | Anpassung an Nutzereinstellungen |
CSS Frameworks & Erweiterungen
? Beliebte CSS-Frameworks:
-
Bootstrap
-
Tailwind CSS
-
Bulma
-
Foundation
? Preprozessoren:
-
Sass / SCSS
-
LESS
Sie ermöglichen Variablen, Mixins und Funktionen für komplexere Stylesheets.
Best Practices
✔ Mobile First Design mit Media Queries
✔ Trennung von Struktur (HTML) & Design (CSS)
✔ Nutzung von Klassen statt IDs zur Wiederverwendung
✔ Wiederverwendbare Komponenten mit Utility-First CSS (z. B. Tailwind)
✔ Kompatibilität mit allen Browsern testen
Fazit
CSS ist ein essenzieller Bestandteil jeder Website. Es sorgt für ein ansprechendes, konsistentes Design und macht Webseiten benutzerfreundlich und responsiv. Mit modernen Tools und Techniken ist CSS leistungsstärker als je zuvor.
? Tipp: Wer Websites entwickelt, sollte CSS nicht nur beherrschen – sondern auch bewusst einsetzen, um Inhalte zugänglich & attraktiv zu gestalten.
CSS (Cascading Style Sheets)
