Cascading Style Sheet

CSS

CSS ist für das visuelle Styling einer Webseite zuständig. Dabei werden die im HTML-Elemente im CSS gestylt.

Der Selektor verbindet das CSS mit dem HTML und dient dazu, die Gestaltungsdeklarationen den HTML Elementen zuzuweisen.

Es können alle Arten von Gestaltungsdeklarationen einem Selektor zugewiesen werden. Diese Gestaltungsdeklarationen (Möglichkeiten) sind klar definiert.

All diese einzelnen "Rule-Sets" für alle Selektoren werden in einem «Style-Sheet» zusammengefasst und beim laden einer HTML-Seite eingespeist.

Der Begriff «Cascading» referenziert auf eine der elementarsten Grundregel des Style Sheets. So wird einem Wasserfall (Kaskade) gleich, diese Gestaltungsdeklarationen innerhalb der definierten HTML-Verschachtelung sowie der Selektoren-Hierarchie vererbt.

Anatomie einer CSS Regel. Die Class ist der Selector und in den {} befindet sich die Deklaration von Property (Fähigkeit) und Value (Wert).
© Webdesign Essentials

Mehr zu CSS in der HTML & CSS Einführung

CSS ist nur der Anfang

Web-Developer nutzen oft CSS-Frameworks als Startpunkt ihres Stylings und/oder CSS Preprocessors für ihre Arbeit.

CSS-Frameworks

Frameworks sind standardisierte Konzepte, Anwendungen und Kriterien, um mit den gängigen Problemen der Webentwicklung besser klarzukommen. Da sich Webseiten in ihrer Logik oft ähneln, kann man so, die gängigsten CSS-Klassen anwenden, ohne dass man alles neu definieren muss. Kennt man sich in einem Framework aus, so wird die Effizienz erhöht. Zudem generiert ein solches Framework auch Styles für all jene Dinge, welche zwar in einer Webseite vorkommen, aber nicht vom Designer definiert wurden. So sehen gewisse Seiten zwar nicht perfekt aus, aber bereits viel besser als reines HTML. Eine Einführung.

Arbeiten FrontEnd-Developer mit Frameworks, können bereits die BackEnd Developer das CMS bauen, da viele Schnittstellen bereits definiert sind. So müssen Sie nicht auf das finale Design warten.

Häufig genutzte Frameworks sind: Bootstrap, Skeleton oder Foundation oder einfache Grid-Frameworks wie 960.gs

Die Kritiker von CSS-Frameworks weisen auf die vielen nicht benötigten Codezeilen hin, besonders bei kleineren Webseiten. Oder auf die «Aufräumarbeiten» eines FrontEnd Developer bevor ein Projekt losgeht. Da trotzdem jede:r seine eigene Herangehensweise hat. Wieder Andere kritisieren spezifische Frameworks, dass ihre Responsive-Fähigkeiten, Browser-Kompatibilität oder andere «Pflichtaufgaben» unsauber lösen.

CSS Preprocessors

CSS reicht manchmal nicht aus oder werden durch Variablen, Funktionen oder Mathematik ergänzt, um noch effizienter und raffinierter zu sein. CSS-Preprocessors vereinfachen komplexe und lange CSS Files und machen diese besser wartbar (maintainable), da sie Logik und Funktionalität in CSS integrieren. Eine Einführung.

Häufig genutzte CSS-Preprocessors sind: Sass, {Less} und Stylus

Vertiefe dich ins ganze Kapitel

Programmiersprachen