CSS

In Kürze: CSS

CSS, oder „Cascading Style Sheets“, ist eine Sprache zur Gestaltung und Formatierung von Webseiten. Sie ermöglicht die Trennung von Inhalt und Design, was die Wartung und Anpassung von Websites erheblich vereinfacht.

Erklärung: CSS

CSS (Cascading Style Sheets, zu Deutsch: „gestufte Stilvorlagen“) ist eine Sprache, die zur Gestaltung und Formatierung von Webseiten verwendet wird. Sie ermöglicht es, das optische Erscheinungsbild elektronischer Dokumente, insbesondere -Dokumente, zu definieren. Durch einfache Anweisungen im Quelltext können Layout, Farben und Typografie angepasst werden, ohne den Inhalt zu verändern. Diese Trennung von Design und Inhalt bietet zahlreiche Vorteile, insbesondere bei der Wartung von Websites, weshalb CSS zur Standard-Stylesheet-Sprache im Web geworden ist und von allen gängigen Webbrowsern unterstützt wird.

Entwicklung von CSS

Das Konzept für Cascading Style Sheets wurde 1994 von Håkon Wium Lie, einem Forscher bei CERN, entwickelt. Zusammen mit Tim Berners-Lee, dem Erfinder des Webs, wurde eine Formatierungssprache geschaffen, die eine klare Trennung zwischen der visuellen Gestaltung und dem Inhalt von -Dokumenten ermöglicht. 1996 veröffentlichte das World Wide Web Consortium (W3C) die erste CSS Level 1 Recommendation. Seitdem wird CSS kontinuierlich weiterentwickelt, wobei CSS Level 2 im Jahr 1998 und die Entwürfe für CSS Level 3 im Jahr 1999 folgten. CSS 4.0 wird es voraussichtlich nicht geben, jedoch wird die Sprache weiterhin um neue Funktionen und Module erweitert.

Vorteile von CSS

  • Erleichterte Webentwicklung durch zentrale Gestaltungselemente.
  • Wiederverwendbare Stylesheets für konsistente Designs.
  • Responsive Webdesign für optimale Darstellung auf verschiedenen Geräten.
  • Unterstützung von Animationen und interaktiven Elementen.
  • Barrierefreiheit durch Nutzung von Textbrowsern und Braille-Browsern.

Funktionsweise von CSS

Wenn ein Webbrowser eine Webseite anzeigt, kombiniert er den Inhalt mit den CSS-Anweisungen. Zunächst wird das in ein DOM (Document Object Model) umgewandelt. Der Browser ruft alle erforderlichen Dateien ab, einschließlich CSS– und JavaScript-Dateien, und ordnet die CSS-Anweisungen den entsprechenden Elementen im DOM zu. Nach dem Rendering werden die Inhalte gemäß den definierten Regeln angezeigt.

Aufbau einer CSS-Anweisung

Eine CSS-Anweisung besteht aus einem Selektor sowie Eigenschaften und Werten. Die Eigenschaften und ihre Werte werden in geschweiften Klammern deklariert. Hier ein einfaches Beispiel:

Selektor { Eigenschaft: Wert; }

Um beispielsweise alle H2-Überschriften einer Webseite zu gestalten, könnte die CSS-Anweisung wie folgt aussehen:

h2 { font-family: Verdana; font-size: 12pt; font-weight: bold; color: black; }

Einbindung von CSS in Webseiten

Es gibt verschiedene Möglichkeiten, CSS-Anweisungen in -Dokumente einzubinden:

  • Inline-Styles: CSS-Anweisungen werden direkt im -Element definiert.
  • Internes Stylesheet: CSS-Anweisungen werden im style-Tag im Header des -Dokuments platziert.
  • Externes Stylesheet: CSS-Anweisungen werden in einer separaten Datei mit der Endung .css gespeichert und über das link-Tag im Header eingebunden.

Weblinks

« Back to Glossary Index