Zum Inhalt springen

CSS

Das CSS-Format: Das Styling des World Wide Web

5 min read

Das CSS-Format: Das Styling des World Wide Web

Wenn HTML das Skelett einer Webseite ist, dann ist CSS die Haut, die Haare und die Kleidung. Es bestimmt, wie eine Website aussieht, wie sie sich anfühlt und wie sie auf verschiedene Bildschirmgrößen reagiert. Ohne CSS wäre das Internet ein sehr langweiliger, textlastiger, schwarz-weißer Ort.

CSS (Cascading Style Sheets) ist neben HTML und JavaScript eine der grundlegenden Technologien des World Wide Web. Eine .css-Datei ist einfach eine reine Textdatei, die Formatierungsregeln enthält, die einem Webbrowser genau sagen, wie HTML-Elemente angezeigt werden sollen.

In diesem Leitfaden werden wir untersuchen, was CSS ist, wie sein einzigartiges "Kaskaden"-System funktioniert, die grundlegende Syntax und wie es sich entwickelt hat, um modernes, responsives Webdesign zu ermöglichen.

Was ist eine CSS-Datei?

Eine .css-Datei enthält Code, der in der CSS-Sprache geschrieben ist. Wie HTML ist es keine Programmiersprache, sondern eine Stylesheet-Sprache. Es führt keine Berechnungen oder logischen Operationen aus (wie es JavaScript tut). Stattdessen fungiert es als eine Reihe von visuellen Anweisungen.

Wenn Sie eine .css-Datei mit einem HTML-Dokument verknüpfen, liest der Webbrowser das HTML, um den Inhalt zu verstehen, und das CSS, um die Präsentation zu verstehen.

Beispielsweise könnte in einer HTML-Datei stehen: "Dies ist eine Überschrift." In der CSS-Datei wird stehen: "Mache alle Überschriften blau, 32 Pixel groß und zentriert."

Warum HTML und CSS trennen?

In den Anfangstagen des Webs (in den 1990er Jahren) wurde das Styling direkt im HTML-Code vorgenommen. Wenn man eine blaue Überschrift wollte, musste man <font color="blue">Überschrift</font> schreiben.

Das war für große Websites ein Albtraum. Wenn ein Unternehmen seine Markenfarbe von Blau auf Rot ändern wollte, musste ein Entwickler manuell Tausende von einzelnen <font>-Tags auf Hunderten von Webseiten finden und ändern.

CSS löste dieses Problem, indem es das gesamte Styling in eine einzige, separate .css-Datei verschob. Nun muss ein Entwickler nur noch eine Codezeile in der CSS-Datei ändern, und jede Überschrift auf der gesamten Website wird sofort rot. Dieses Prinzip ist als Trennung von Belangen (Separation of Concerns) bekannt.

Das Kernkonzept: Die "Kaskade"

Das "C" in CSS steht für Cascading (Kaskadierend). Aber was bedeutet das eigentlich?

Webbrowser bestimmen, wie ein Element aussehen soll, indem sie Regeln aus mehreren verschiedenen Quellen kombinieren. Manchmal stehen diese Regeln im Konflikt miteinander. Die "Kaskade" ist der Algorithmus, den der Browser verwendet, um zu entscheiden, welche Regel gewinnt.

Die Kaskade folgt im Allgemeinen diesen Regeln (von der unwichtigsten zur wichtigsten):

  1. Browser-Standardwerte: Wenn Sie kein CSS schreiben, wendet der Browser seine eigenen Standardstile an (z. B. sind Links blau und unterstrichen).
  2. Externe Style Sheets: Stile, die aus einer separaten .css-Datei geladen werden.
  3. Interne Style Sheets: Stile, die im <head>-Bereich des HTML-Dokuments geschrieben werden.
  4. Inline-Stile: Stile, die direkt auf das HTML-Element geschrieben werden (z. B. <p style="color: red;">). Dies überschreibt fast alles andere.
  5. Spezifität (Specificity): Wenn zwei Regeln in einer CSS-Datei in Konflikt stehen, gewinnt die "spezifischere" Regel. Beispielsweise überschreibt eine Regel, die auf eine bestimmte ID (#mein-button) abzielt, eine Regel, die auf alle Buttons (button) abzielt.

Grundlegende CSS-Syntax

Die CSS-Syntax besteht aus einem Selektor und einem Deklarationsblock.

/* Der Selektor zielt auf ein HTML-Element ab */
h1 {
    /* Dies ist der Deklarationsblock */
    color: blue;           /* Eigenschaft (Property): Wert (Value) */
    font-size: 24px;
    text-align: center;
}

/* Abzielen auf eine Klasse (wird für mehrere Elemente verwendet) */
.hervorgehobener-text {
    background-color: yellow;
    font-weight: bold;
}

/* Abzielen auf eine ID (wird für ein einzigartiges Element verwendet) */
#haupt-navigation {
    display: flex;
    background: black;
}
  • Selektor (Selector): Zeigt auf das HTML-Element, das Sie formatieren möchten (z. B. h1, .klassen-name, #id-name).
  • Eigenschaft (Property): Das visuelle Attribut, das Sie ändern möchten (z. B. color, font-size, margin).
  • Wert (Value): Die Einstellung für diese Eigenschaft (z. B. blue, 24px, 20px).

Die Evolution von CSS

CSS hat sich im Laufe der Jahrzehnte erheblich weiterentwickelt, um die zunehmende Komplexität des modernen Webdesigns zu bewältigen.

CSS1 und CSS2 (Die Anfangszeit)

Das frühe CSS war einfach und verarbeitete grundlegende Farben, Schriftarten und Ränder. Layouts waren unglaublich schwierig. Entwickler mussten "Hacks" wie fließende Elemente (float: left) oder HTML-Tabellen verwenden, um Elemente auf einer Seite zu positionieren.

CSS3 (Die moderne Ära)

Das 1999 eingeführte (aber in den 2000er Jahren nur langsam übernommene) CSS3 war ein massives Upgrade. Es führte modulare Funktionen wie abgerundete Ecken, Schlagschatten, Farbverläufe und Animationen ein – Dinge, für die zuvor Photoshop und schwere Bilddateien erforderlich waren.

Responsives Webdesign (Media Queries)

Die Erfindung des Smartphones veränderte das Webdesign für immer. Eine Website, die für einen Desktop-Monitor erstellt wurde, sah auf einem iPhone schrecklich aus. CSS führte Media Queries ein, die es Entwicklern ermöglichen, bedingtes CSS basierend auf der Bildschirmgröße des Benutzers zu schreiben.

/* Standardstil für mobile Geräte */
.seitenleiste {
    display: none; 
}

/* Wenn der Bildschirm breiter als 768px ist (Desktop), zeige die Seitenleiste */
@media (min-width: 768px) {
    .seitenleiste {
        display: block;
    }
}

Flexbox und CSS Grid

In den 2010er Jahren löste CSS das Layout-Problem endlich nativ. Flexbox wurde für eindimensionale Layouts eingeführt (Ausrichten von Elementen in einer Zeile oder Spalte), und CSS Grid wurde für komplexe zweidimensionale Layouts eingeführt (Aufbau ganzer Seitenstrukturen mit Zeilen und Spalten). Diese Werkzeuge machten die Erstellung komplexer, responsiver Designs drastisch einfacher.

Präprozessoren und Frameworks

Obwohl reines CSS leistungsstark ist, kann die Verwaltung von Tausenden von CSS-Zeilen schwierig werden. Um zu helfen, entwickelte die Industrie neue Werkzeuge:

  • Präprozessoren (Sass / LESS): Diese ermöglichen es Entwicklern, Funktionen wie Variablen, Mathematik und verschachtelte (nested) Regeln in ihren .css-Dateien zu verwenden. Der Code wird dann in Standard-CSS "kompiliert", damit der Browser ihn lesen kann.
  • Frameworks (Tailwind CSS / Bootstrap): Diese stellen vorgefertigte CSS-Klassen zur Verfügung, sodass Entwickler das Rad nicht neu erfinden müssen. Tailwind CSS ermöglicht es Entwicklern beispielsweise, komplette Designs zu erstellen, ohne jemals ihre HTML-Datei verlassen zu müssen.

Fazit

CSS hat das Web von einer langweiligen Sammlung akademischer Dokumente in das reiche, lebendige und interaktive Medium verwandelt, das wir heute nutzen. Indem es Inhalt elegant von Design trennt, ermöglicht CSS Entwicklern die Erstellung wunderschöner Benutzeroberflächen, die sich an jedes Gerät anpassen. Solange es ein Internet gibt, wird es Cascading Style Sheets geben, die dafür sorgen, dass es gut aussieht.

Buy me a coffee