Cascading Style Sheets heißt soviel wie: wie eine Kaskade weitergegebene Stile. Anfänglich wurden mit Cascading Style Sheets (CSS) reine Schriftformatierungen festgelegt. Ein für ein Element geltender Stil kann auf ein weiteres übertragen werden. Die Möglichkeiten der Cascading Style Sheets geht inzwischen aber weit über die Schriftformatierung hinaus. Mit jeder neuen Version wurden die Möglichkeiten erweitert. Der Grundsatz, die Formatierungsanweisungen von den Inhalten zu trennen, lässt sich mit CSS elegant umsetzen. Die Verwendung von CSS unterstützt z. B. Screenreader und damit das Ziel der Barrierefreiheit.
Bei der Anwendung von Style Sheets muss auf die Prioritäten geachtet werden. Direkte Formatierungen im Text überschreiben interne Style Sheets. Diese wiederum haben Vorrang vor Regeln in einer externen Style Sheet Datei und externen Style Sheets wird eine Prioritätsstufe im Verhältnis zu anderen zugewiesen. Standardmäßig ersetzt das Style Sheet der Web-Seite die Voreinstellungen des Browsers.
Die erste Version der Cascading Style Sheets wurde vom 
World Wide Web Consortium (W3C) 1996 verabschiedet. In dieser Version konnten in erster Linie Schriftformatierungen, Hintergründe und Rahmen festgelegt werden. Die darauf folgende Version 2 erschien am 12. Mai 1998 https://www.w3.org/TR/1998/REC-CSS2-19980512/Overview.html und erweiterte das Spektrum um die Möglichkeit das gesamte Seitenlayout mit Cascading Style Sheets zu gestalten. Hier gilt derselbe Vorteil wie bei den reinen Schriftformatierungen, durch die Änderung einer Datei kann das gesamte Seitenlayout verändert werden. Die Version 3 ist seit 1999 vom W3C-Konsortium in Bearbeitung. Mit dieser Version besteht die Möglichkeit Inhalte zu animieren und das Aussehen von Boxen zu variieren. So kann der Hintergrund eines Kastens einen Farbverlauf oder Texturen erhalten, es können Schatten definiert und die Ecken eines Rahmens gerundet werden. Auch Elemente für die Sprachausgabe sind enthalten. Einen Schnell-Index über die CSS Beschreibungen finden Sie auf der Wiki von SELFHTML.
Es gibt zahlreiche Bücher zum Thema Cascading Style Sheets. In ihnen werden auch die einzelnen Elemente erläutert und die Browser-Versionen vorgestellt, die diese Elemente unterstützen. Der in englischer Sprache erschienene CSSmatic hilft CSS-Code für Farbverläufe, dem Abrunden von Ecken (border-radius), Texturen und Schatten eines Kastens zu erstellen. Die Merkmale können mit wenigen Mausklicks in ein Farbspektrum und mit Schiebereglern geändert werden. Am Ende wird der Code kopiert und in die eigene CSS-Datei eingefügt >> Parameter einer CSS-Datei.
Sehr hübsch sind abgerundete Ecken (border-radius) von Kästen, ein CSS-Element, das ab Internet-Explorer 9, Firefox 4, Safari 5, Opera 10.5 und Chrome unterstützt wird. Der Clou daran ist, dass die Ecken auch ungleich abgerundet werden können, denn der Radius der einzelnen Ecken kann unterschiedlich definiert werden. Beispiel: Kasten mit einem Radius von 10 px an allen Ecken.
Code für die CSS-Datei:
#zitat {
background-color: #FFFF99;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #999999;
padding: 15px;
width: 300px;
height: auto;
}
Code der HTML-Datei:
<div id="zitat">"Die verfeinerte Diagnostik wird beweisen, daß ein „gesunder" Mensch nur nicht hinreichend untersucht ist" - Eckhardt Westphal (Leiter der Kärntner Krankenhausgesellschaft, zuvor beim Bonner Wissenschaftlichen Institut der Ortskrankenkassen (WIdO), in: Qualität und Wirtschaftlichkeit medizinischer Versorgung im Krankenhausbereich, Bonn 1996. Seite 30</div>
Beispiel:
CSS Dateien können unter dem Link: https://jigsaw.w3.org/css-validator/ validiert werden. Anders als beim "W3C Markup Validation Service" ist dieser Service in deutscher Sprache verfügbar.
W3C CSS Fonts Module Level 3
CSSmatic - The ultimate CSS tools for web designers
SELFHTML - Stylesheets (CSS)
Letzte Aktualisierung:
Donnerstag, 18.01.2018