Einführung

Auf dieser Seite:

Cascading Style Sheets (kaskadierende, abgestufte Formatvorlagen) formatieren meine Website. Der HTML Code soll nicht durchflochten werden mit den Angaben, wie Titel, Listen, Tabellen, Formulare, Zitate, etc. nun auszusehen haben, sondern diese Angaben werden separat in CSS-Anweisungen hinterlegt.

Trennung von Aussehen und Inhalt

Das Ziel wäre, durch einen Wechsel der eingebundenen CSS-Datei das Aussehen der Texte, ja sogar das ganze Layout völlig umkrempeln zu können, ohne Hand an die HTML-Dateien legen zu müssen. So können für den grossen Bildschirm mit hoher Auflösung, für das Handheld und Iphone und die Ausgabe durch den Drucker, etc. einfach unterschiedliche CSS-Dateien verwendet werden. Im CSS wird notiert, für welches Ausgabe-Medium es gestaltet wurde, das Gerät findet darum das für ihn bestimmte CSS (siehe unter Ausgabemedien auf der Seite Syntax).

Barrierefreiheit

Ein wesentlicher Grund zur Trennung von Inhalt und seiner Formatierung, und damit der Entschlackung von HTML ist die Zugänglichkeit der eigentlichen Information für andere Ausgabegeräte, die nicht optisch orientiert sind, sondern Schrift in gesprochene Worte oder in Braille wandeln. Das Gebot der Benutzerfreundlichkeit auch für ungeübte User, führte schliesslich zu einen Paradigmenwechsel, welcher Inhalt, Format und womöglich auch Funktionalität strikt trennt und eine klare Struktur vorgibt.
Der Barrierefreiheit ist eine eigene Seite gewidmet.

Die Macht von CSS

Mit CSS lässt sich also das ganze Seiten-Layout aber auch jedes einzelne Seiten-Element formatieren. Dabei werden die rudimentären Format-Eigenschaften der logischen HTML-Tags (Titel sind gross und fett) überschrieben, und auch die formatierenden HTML-Tags wie <font>...</font> oder <tt>...</tt> und Attribute wie <align> werden nicht mehr gebraucht.
Die gute Neuigkeit: Die Stylesheet-Angaben sind viel mächtiger als die formatierenden HTML-Tags und Tag-Attribute, sie geben mehr Möglichkeiten der Gestaltung und sie sind auf viele unterschiedliche Elemente anwendbar, z.B. können nicht mehr ausschliesslich Bilder mit Rahmen und Tabellenzellen mit Hintergrundfarben ausgezeichnet werden, sondern fast allen Elementen, auch p-Absätzen und div-Containern können fast alle Formate zugewiesen werden!

Also es gilt 3 Style-Fragen zu stellen, welche alle in der Datei Syntax beantwortet werden:

A. Was soll mit CSS gestylt werden?

Es gibt drei verschiedene Selektoren zum Zuordnen von CSS-Angaben (nicht erschrecken, die Erklärungen folgen):

den <Tag> Element-Selektor und den ::Pseudoelement-Selektor
den .Klassen-Selektor und den :Pseudoklassen-Selektor
den #ID-Selektor

B. Wo soll der CSS-Style hin?

Die Style werden vererbt und können sich überlagern bzw. überschreiben. ich muss auf den Geltungsbereich durch hierarchische Wirkung bei der Einbindung achten.

Ich muss das CSS ja irgendwo hinschreiben:

Extern in eine seperate CSS-Datei, welche z.B. in einem Ordner namens 'css' liegt (eines für alle)
Intern im Head der HTML-Datei als zentrales Script (nur für die Seite, überschreibt externe Styles)
Inline im Spezialfall (nur gerade hier, überschreibt externe Styles und die im Head)

Styles in CSS Lehrling

Im CSS Teil dieses Tutorials werden bevorzugt Klassen Styles im Head des Beispiels definiert, um einen einfachen Blick in den Quellcode zu ermöglichen.

C. Wie soll sich der CSS-Style auswirken?

Es stehen sehr viele Formate zur Verfügung, einige zur Anregung:

Schrift:
color: #0c0; font-family: serife; font-size: 12px; font-style: italic; font-variant: small-caps; font-weight: bold; font-stretch: expanded;
text-decoration: underline; text-align: center; text-transform: lowercase; text-indent: 12px;
line-height: 12px; letter-spacing: 12px; word-spacing: 12px; vertical-align: middle;
Hintergrund:
background-color: yellow; background-image: url("#");
Rahmen:
border-right: 12px dotted; border-bottom: 12px dashed teal
border-image:url(images/pergament_rahmenseite.png) 54 round;
Abstände (aussen und innen):
margin-top: 12px; padding-bottom: 12px;
Position:
position: relative; top: 12px; float: left; clear: right;
Sichtbarkeit:
visibility: visible; overflow: auto; clip: rect(0 auto auto auto);
Eine spezielle Formatierung gibt an, ob und wenn ja, wie ein Element angezeigt werden soll:
display:block (als Absatz), display:inline (Absatz unterdrücken), display:list-item (mit Aufzählungszeichen) oder display:none (gar nicht).
opacity: 0.5 (halb transparent)
Effeke:
Funktionen zum Erzeugen von Rotation, Skalierung, Verzerrung, Verschiebung, bis zur Animation
Filter zum Erzeugen von Transparenz, Schatten, Unschärfe
Browser:
Erscheinungsbild von Scrollbalken, Formularelementen, Seitenübergänge

Geschichte von CSS

Damit sich CSS durchsetzen konnte, brauchte es die Einsicht der Websitedesigner, dass das Design nicht auf der absoluten Kontrolle der Pixelgenauigkeit fussen sollte.
Zum Layouten der Seitenelemente wurde früher aufwändig ineinander verschachtelte Blindtabellen und transparente Bilder verwendet, das waren viele HTML Codezeilen ohne Aussage (die dafür pixelgenau ausgerichtet). An Stelle der Layouttabellen sind nun einfache div-Container (auch Boxen oder Layers genannt) getreten, welche durch CSS positioniert werden. (das funktioniert wenn sich sämtliche Inhalte in Containern befinden). Dem Template Layout sind eigene Beispiele gewidmet. Die meisten CSS 2.1 Spezifikationen werden nun von den gängigsten Browsern umgesetzt (Stand 2008).
HTML 5 ersetzt den div-Container, deren Funktion vielleicht aus dem 'name', der 'id' oder aus der wai-aria 'role' hervor ging, durch strukturierende Elemente. So gibt es ab 2014 HTML 5 Tags für die Navigation, den Artikel, die Spalte an der Seite, den Footer, etc.

Inzwischen ist CSS3 hinzugefügt worden, die Browser interpretieren dies aber noch unterschiedlich gut, überhaupt nicht oder reagieren nur auf proprietäre Prefixes. Einige Versuche mit CSS3 habe ich bereits angestellt.

Doctype

CSS hatte auf frühere Browser-Generationen so verschiedene Auswirkungen, dass es sich nur mühsam durchsetzte. Zahlreiche Hacks kamen zur Anwendung und durch Browserweichen wurde versucht jedem Tierchen sein Pläsierchen zukommenzulassen, die haben sich mit den Browsergenerationen IE 6 und FF 2 erübrigt.

Ausschlaggebend zum Darstellungsmodus, in den der moderne Browser wechselt, ist der Doctype. Wird dieser nicht, unvollständig oder falsch angegeben, wechselt dieser in den 'Quirksmode', und interpretiert die Seite, als wäre er ein alter Browser, der es mit einer alten, seine Interpretationsfehler berücksichtigenden Datei zu tun habe. Über unterschiedliche Interpretationen des IE 5 und 6 von Massangaben gibt es ein Absatz: Doctype und Quirksmode

Zukunft von CSS

Bereits aber gibt es wieder neue Unterschiede der Browser, nämlich in der vorauseilenden (und darum proprietären) Umsetzung der CSS 3 Spezifikationen, bevor die freigegeben wurden (CSS 3 Beispiele).
Aber auch nach der Veröffentlichung von CSS 3 wird es Browser geben, die mehr können als andere Browser. Wie soll ich damit umgehen? In Kauf nehmen, dass einige Besucher (hoffentlich eine kleine Minderheit), welche nicht den 'richtigen' Browser nutzen, meine Seite nicht richtig nutzen können (harmloser Teilausfall)? Nein, alle sollen meine Seite richtig nutzen können! Bloss einige mit dem entsprechenden Browser, bekommen einen Mehrwert durch zusätzliche Anreicherung (Progressive Enhancement). Also kein funktionales CSS verwenden, ohne das die Seite nicht für alle funktionieren würde, aber gerne solches CSS, was einigen noch etwas unnötiges dazu bietet (weils schön macht).

Generatoren und Interpreter

TopStyle Lite (gratis) ist ein ziemlich gutes CSS Tool zum Erstellen des CSS-Codes.

Check den Code.

Syntax >> <<

Ich bin hier: > CSS Lehrling >> Einführung