Internet Basics (4): Was ist CSS?

Internet Basics (4): Was ist CSS?

CSS (Cascading Style Sheets) wurde vom W3C eingeführt, um die Formatierung der Website von HTML zu trennen.

HTML liefert die Struktur, den Aufbau, CSS die Formatierung, das Design.

CSS ermöglicht eine effektive Bearbeitung von Websites, vor allem deren Design. Der Umgang mit CSS hat Ähnlichkeiten mit dem Verwenden von Text- oder Formatvorlagen die man zum Beispiel aus Microsoft Word kennt. CSS-Dateien beinhalten die Eigenschaften (Farben, Größe usw.) der einzelnen Tags (z. B. <h1> = Heading 1).

1997 führte der W3C die erste Version von CSS ein, CSS 2 kam Mitte 1998. Die jetzige Version CSS 3 ermöglicht zum Beispiel, dass sich die Website an verschiedene Bildschirmgrößen anpassen kann (responsives Design), was vor allem für den riesigen Umschwung auf Mobiltelefone zur Informationssuche im Internet wichtig ist.

CSS als eigenes Element der Website bringt viele Vorteile mit sich. Erstellte Designs können auf einfache Weise in anderen Projekten verwendet werden. Da mithilfe von CSS die Websites übersichtlich programmiert sind, sind diese auch weniger mit Code überfrachtet und können deshalb schneller laden. CSS wird meist gesondert in Form von sogenannten Klassen, getrennt vom HTML-Code, geschrieben. Das ermöglicht eine leichtere Fehlererkennung- und Behebung.


Bei CSS wird mit sogenannten Selektoren gearbeitet. Ein Selektor ist der Begriff, der bei jedem CSS-Element vor der geschwungenen Klammer steht. CSS unterscheidet zwischen Groß- und Kleinschreibung („case sensitive“). Selektoren sind ein großer Vorteil von CSS, da damit nicht mehr jedes HTML-Element einzeln designt werden muss (inline-CSS), vielmehr werden die Elemente in Klassen oder andere Selektoren eingeteilt, denen dann ein Design zugeschrieben wird. Das erspart viel Code und somit Ladezeiten, und trennt gleichzeitig den Aufbau der Seite (HTML) vom Design (CSS).

Es kann im Groben zwischen diesen Selektoren von CSS unterschieden werden:
• Universalselektor (* – alle Elemente)
• Typselektor (z.B. für <h1>)
• Klassenselektor (z.B.: „.heading“)
• ID-Selektor (nur ein Element, z.B. „#unique“)
• Attributselektor (eckige Klammern, spricht Elemente anhand ihrer Attribute an)

Diverse CSS-Stile können verwendet werden für
• eine ganze Gruppe von HTML-Elementen (z.B. bei einheitlicher Schriftart)
• einzelne Elemente (z.B. Zeilenabstände für <h1>)
• einzelne Instanzen eines Elements (z.B. nur diese eine Überschrift von <h1>)
• entsprechend markierte Abschnitte innerhalb eines Elements (z.B. drittes Wort der Überschrift)

Dabei ist wichtig, dass jedes Element die CSS-Eigenschaften der übergeordneten Ebene „erbt“. Sie müssen deshalb nur einmal definiert werden, und nicht für jede Ebene einzeln. Dieser „Top-Down“-Ansatz, ist der Grund für die eigentliche Effizienz von CSS.