Skip to main content
Über uns

Cascading Style Sheets (CSS) (Kaskadierende Stylesheets)

TL;DR

CSS arbeitet neben HTML und hat die Aufgabe, die Inhalte von Webseiten visuell über mehrere Geräte hinweg anzupassen. Es bestimmt den Stil durch die Trennung von Schriften, Layouts, Farben und anderen Elementen und verbessert die Benutzerfreundlichkeit.

Über Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) arbeitet zusammen mit Hypertext Markup Language (HTML), um das Design von Webseiten zu verbessern. Durch CSS sind Webdesigner in der Lage, einen Stil für eine Seite einzurichten, der auf alle anderen Seiten und Elemente der gesamten Website angewendet wird. CSS wird verwendet, um Websites ansprechender aussehen zu lassen und die Benutzerfreundlichkeit zu verbessern.

Warum ist CSS wichtig?

CSS ermöglicht es Entwicklern, einen Stil einmalig festzulegen, und der Webbrowser wendet diesen spezifischen Stil anschließend mehrmals auf den Webseiten oder im Dokument an, so dass er zeiteffizient ist. Auch durch diese Methode wird eine größere Kontrolle über das Layout erreicht, während die Flexibilität und Interaktivität der Website verbessert wird. CSS erleichtert auch die Aktualisierung von Websites, indem es den repetitiven Codierungsstil des einfachen HTML eliminiert und den Vorteil hat, dass die Anzahl der Fehler im Code reduziert wird: Webseiten, die CSS verwenden, laden schneller, da der Browser die Regeln nur einmal herunterladen und zwischenspeichern muss, um die anderen Seiten der Website zu laden.

Webseiten, die CSS verwenden, werden schneller geladen, da der Browser die Regeln nur einmal herunterladen und für das Laden der anderen Seiten der Website zwischenspeichern muss.

Ein Beispiel für die Funktionsweise von CSS

CSS funktioniert durch das Erstellen von Regeln. Hier ist ein einfaches Beispiel für CSS-Code, der die Farbe und Größe des H1 definiert: <style> H1 { font-size:20pt color:grün;} </style> Jetzt, wo die vorherige CSS-Regel in Kraft ist, wird jeder HTML-Code der Website, der das H1 enthält, automatisch grün und in 20-Punkt-Schriftart dargestellt: <html> <body> <h1>diese Überschrift ist grün und 20 pt.</h1> </Körper> </html>