CSS

Was versteht man unter CSS

CSS steht für „Cascading Style Sheets“ (Kaskadierende Stilblätter) und handelt sich um eine gestaltende Sprache, die verwendet wird, um das Aussehen und die Formatierung von Webseiten zu definieren. CSS wird in Kombination mit HTML (Hypertext Markup Language) eingesetzt, um die visuelle Darstellung von Webinhalten zu steuern. Hier sind einige wichtige Informationen zu CSS:

1. Formatierung und Design: „Cascading Style Sheets“ ermöglicht die Trennung von Inhalt (HTML) und Darstellung (Stil). Mit CSS können Entwickler das Design einer Webseite definieren, einschließlich Schriftarten, Farben, Abstände, Layouts, Hintergrundbilder und vieles mehr.
2. Stilregeln: CSS-Stilregeln bestehen aus Selektoren, die HTML-Elemente auf der Seite identifizieren, und deklarativen Anweisungen, die festlegen, wie diese Elemente formatiert werden sollen. Zum Beispiel könnte eine CSS-Regel eine Überschrift (<h1>) auswählen und die Schriftfarbe auf Blau festlegen.
3. Selektoren: CSS-Selektoren ermöglichen es, bestimmte Elemente auf einer Webseite auszuwählen, um ihnen Stile zuzuweisen. Es gibt verschiedene Arten von Selektoren, darunter Klassen, IDs, Elementselektoren und Pseudoklassen.
4. Kaskadierung: Das Wort „Cascading“ in „Cascading Style Sheets“ bezieht sich auf die Fähigkeit, Stilregeln zu erben und zu überschreiben. Dies ermöglicht eine effiziente und flexible Anpassung des Stils, da allgemeine Stilregeln auf alle Elemente angewendet und spezifischere Stilregeln Vorrang haben.
5. Externe und eingebettete CSS: „Cascading Style Sheets“ kann in einer separaten Datei (externe CSS) oder direkt in HTML-Dokumente (eingebettete CSS) geschrieben werden. Die Verwendung externer CSS-Dateien ist in der Regel die bevorzugte Methode, da sie eine Trennung von Inhalt und Stil ermöglicht und die Wartung erleichtert.
6. Webdesign und Responsivität: CSS spielt eine entscheidende Rolle beim Webdesign und bei der Schaffung responsiver Webseiten, die sich an verschiedene Bildschirmgrößen und Gerätetypen anpassen.
7. Browserkompatibilität: CSS-Standards werden von den meisten modernen Webbrowsern unterstützt. Bei der Entwicklung von Webseiten ist es jedoch wichtig sicherzustellen, dass CSS-Regeln in verschiedenen Browsern konsistent dargestellt werden.
8. Weiterentwicklung: „Cascading Style Sheets“ hat im Laufe der Jahre mehrere Versionen durchlaufen, wobei CSS3 die aktuellste Version ist. CSS3 bietet erweiterte Funktionen wie Schatten, Transparenz, Animationen und mehr.

„Cascading Style Sheets“ ist ein wesentlicher Bestandteil der Webentwicklung und ermöglicht die Gestaltung von ansprechenden und ästhetisch ansprechenden Webseiten. Es ist ein grundlegendes Werkzeug für Webdesigner und Entwickler, um die visuelle Darstellung von Inhalten im Internet zu steuern.

Entstehungsgeschichte

Die Anfänge von CSS reichen zurück bis etwa 1993. Eine der ersten Ideen zur zentralen Steuerung der Formatierung von HTML-Dokumenten findet sich in einem Kommentar von Robert Raisch. Hier wurde bereits die Notwendigkeit erkannt, Informationen und deren Darstellung in HTML-Dokumenten voneinander zu trennen. Der ursprüngliche Kommentar lautete:

„Es existiert ein Bedürfnis innerhalb des World Wide Webs, Informationen mitsamt dem Inhalt in einem WWW-Dokument spezifizieren zu können. Es ist nicht angebracht, HTML für diese Aufgabe zu nutzen, da eines der ersten Prinzipien des HTMLs die Verschlüsselung von Objekten innerhalb eines Dokuments ist. Nicht, in welcher Art und Weise sie ausgegeben werden.“

CSS1

Im Oktober 1994 veröffentlichte Håkon Wium Lie, ein Mitarbeiter des CERN, eine frühe Version von CSS und nannte sie „Cascading HTML Style Sheets“ (CHSS). Gleichzeitig arbeitete der Informatiker Bert Bos an einem Browser namens Argo, der auf einer eigenen Stylesheet-Sprache basierte. Gemeinsam entwickelten sie schließlich CSS, das sich gegen zahlreiche andere Stylesheet-Sprachen durchsetzte, die zur gleichen Zeit entwickelt wurden. Das World Wide Web Consortium (W3C) wurde nach Webkonferenzen in Chicago 1994 und 1995 auf CSS aufmerksam, sodass Lie und Bos mit Mitgliedern des W3C an CSS weiterarbeiten konnten. So wurde CSS1 (CSS Level 1) schließlich im Dezember 1996 veröffentlicht und vom W3C empfohlen. Aktuelle Browser unterstützen diese frühe Version von CSS nahezu vollständig.

CSS2

Im Mai 1998 wurde Level 2 von CSS veröffentlicht. CSS2 baute auf seinem übersichtlichen Vorgänger auf und implementierte viele neue Elemente. Diese Version unterstützte beispielsweise medienspezifische Stylesheets, z. B. für Endgeräte für Blindschrift und auralen Ausgaben. CSS2.1 wurde 2011 als W3C-Empfehlung veröffentlicht. Der CSS2-Standard wird jedoch bis heute nicht von allen Browsern vollständig unterstützt, obwohl die meisten CSS2.1 weitgehend korrekt darstellen. Seit 2016 wird an einer Überarbeitung (CSS2.2) gearbeitet, bei der nicht unterstützte Elemente von Browsern gestrichen werden. Seit 2000 wird an CSS3 gearbeitet, das modular aufgebaut ist und Entwicklungen aus CSS2 weiter verfeinert.

CSS3

CSS Level 3 ist der neueste Standard für „Cascading Style Sheets“ und enthält wahrscheinlich eines der wichtigsten Elemente für die Suchmaschinenoptimierung: Media Queries. Obwohl das Media-Element bereits in CSS2 eingeführt wurde, beschäftigt sich CSS3 mit der Leistung des Endgeräts und nicht mit dem Typ des Endgeräts. Media Queries sind insbesondere bei Responsive Design (aber auch bei Adaptive Design) von großer Bedeutung. So kann in CSS die maximale Bildschirmbreite angegeben werden, ab der ein Element andere Eigenschaften aufweist. Adaptive Design verwendet Media Queries, um beispielsweise kleinere Bilder für mobile Geräte zu laden. Ab einer bestimmten Bildschirmgröße bestimmt das Media-Query-Element, dass eine andere, kleinere Bilddatei geladen werden soll. Neben Media Queries wurden viele neue Attribute hinzugefügt, insbesondere für Textelemente wie Textschatten (text-shadow), Textüberlauf (text-overflow) und Wortumbruch (word-wrap).

Inhalt und Design

Die Notwendigkeit von „Cascading Style Sheets“ basiert auf der Idee, Inhalt und Design voneinander zu trennen. Das Ziel von CSS ist es, dass HTML- oder XML-Dokumente nur noch den Inhalt enthalten und idealerweise auf eine separate CSS-Datei im <head>-Bereich verweisen. In der CSS-Datei werden dann die Gestaltungselemente wie Textfarbe, Schriftart und Layout festgelegt.

Ein einfaches HTML-Dokument kann allein durch „Cascading Style Sheets“ umgestaltet werden. Die Trennung von Inhalt und Form ist bereits seit HTML4 unerwünscht, da gestaltende Elemente innerhalb des HTML-Dokuments als veraltet und unnötig gelten, da ihre Funktionen in CSS-Code abgedeckt werden können. Dadurch entsteht ein sauberer Quelltext, der weniger HTML-Tags verwendet. Bestimmte Elemente wie <basefont>, <big>, <center>, und <font> sollten laut W3C nicht mehr verwendet werden.

Implementierung

Es gibt verschiedene Möglichkeiten, CSS in HTML- oder XML-Dokumenten zu implementieren:

1. Inline-Style: Einzelne HTML-Elemente können direkt im Dokument mit dem Attribut „style“ formatiert werden. Diese Methode ist weniger empfohlen, da sie die Trennung von Inhalt und Darstellung behindern kann.
2. Internes Style Sheet: Das interne Stylesheet befindet sich im <head>-Bereich eines HTML-Dokuments und wird mit dem <style>-Tag eingeleitet. Dies eignet sich, wenn eine Seite individuell gestaltet werden soll.
3. Externes Style Sheet: Hier erfolgt ein Verweis im HTML- oder XML-Dokument auf eine separate CSS-Datei. Diese Methode ermöglicht eine konsistente Gestaltung über mehrere Seiten hinweg und eine klare Trennung von Inhalt und Darstellung.

Grundsätzliche Grammatik und Syntax

Die CSS-Syntax basiert auf einem Selektor und einem Deklarationsblock. Der Selektor zielt auf das HTML-Element ab, das gestaltet werden soll, während der Deklarationsblock die Gestaltungsanweisungen enthält. Kommentare in CSS-Dokumenten dienen zur Erklärung des Codes und werden von Browsern ignoriert.

Suchmaschinenoptimierung durch „Cascading Style Sheets“

Sauberer Code, von HTML über CSS bis hin zu PHP, ist für die Suchmaschinenoptimierung (SEO) von großer Bedeutung. Ein CSS-Code sollte präzise geschrieben sein, um klare Anweisungen an Browser zu geben und die Dateigröße klein zu halten. Die Verwendung eines externen Stylesheets ist empfohlen, da dies die Seitengröße reduziert und das Crawling durch Suchmaschinen-Crawler erleichtert. CSS ermöglicht auch die mobile Optimierung und barrierefreie Anzeige für Menschen mit Seh- oder Hörbehinderungen. Ein schneller Seitenaufbau ist entscheidend für die Benutzererfahrung und die SEO. Fehler im CSS-Code können sich auf die Performance und den Page Speed auswirken, was dazu führen kann, dass Besucher die Seite verlassen oder Conversions abbrechen. CSS bietet die Möglichkeit, Layouts an die Bildschirmgröße anzupassen, was besonders wichtig für mobile Geräte ist.

CSS spielt eine entscheidende Rolle in der SEO, insbesondere bei der Gestaltung von Websites, die auf verschiedenen Geräten gut funktionieren müssen und für eine breite Zielgruppe barrierefrei zugänglich sein sollen. Die richtige Anwendung von CSS trägt dazu bei, dass Inhalte effizient und ansprechend präsentiert werden können.