4. Gestaltung mit CSS
Die Abkürzung CSS steht für Cascading Style Sheets. Das bedeutet, das auf verschiedenen Ebenen (Cascades) bestimmte Gestaltungsmerkmale (Styles) einem einzelnen oder mehreren Elementen innerhalb eines HTML-Dokumentes zugewiesen werden können.
Das hat den Vorteil, dass man einen Style nur einmal definieren muss und ihn dann mehreren Elementen oder Dokumenten zuweisen kann. Eine nachträgliche Änderung eines Styles wirkt sich dann auf alle damit verknüpften Elemente aus.
Stylesheets definieren die Formatierung von Elementen (Text, Tabellen, Listen usw.) innerhalb eines Dokumentes.
Inhalt und Format sind somit gut voneinander zu trennen, das heißt, dass der gleiche Inhalt mit unterschiedlicher Formatierung ausgegeben werden kann.
Mehrere unterschiedliche Formatierungsvorschriften (Styles) sind verfügbar und können ein und demselben Dokument zugewiesen werden.
Neben den Formaten für vordefinierte Elemente (H6…H1, body, table usw.) können eigene Formate definiert werden.
Für die Anwendung von Stylesheets gibt es drei Grundszenarien:
als eigenständige externe Datei (*.CSS):
dieser Tag verweist auf die externe css-Datei und wird im Head eingetragen: <link rel="stylesheet" type="text/css" href="andere_styles.css">
in dieser Datei sind dann die Formate für alle damit verbundenen Dokumente definiert
innerhalb eines HTML-Dokumentes als STYLE-Tag:
dieser Tag definiert die Formatierung (Style) für alle Überschriften vom Typ h2 in einem Dokument und wird im Head eingetragen:
<style type="text/css">
h2 { font-size: large; color: #009F00; }
</style>
innerhalb eines Tags und dann nur für diesen Tag gültig:
hier wird für den Absatz <p> ... </p> Schriftart und Farbe festgelegt: <p style="font-family:Arial; color:#FF0000;">Veranstaltung.</p>
Die Wertigkeit und damit Gültigkeit der Styles ist so gestaffelt, dass immer der dem Element am nächsten stehende Style gilt, also Style innerhalb eines Tags geht vor Style innerhalb des Dokumentes, dieser wiederum geht vor das externe Stylesheet. Dadurch kann trotz einheitlicher Gestaltung mittels externem CSS ein Element eigenständig gestaltet werden.
Informationen über die Nutzung von CSS finden sich unter diesem Link im selfhtml.
Stylesheets im Tag
Im Folgenden soll die Gestaltung eines Elementes durch Stylesheets innerhalb des Tags erläutert werden.
Die roten Rahmen zeigen die CSS-Formate mit den zwischen den Einführusstrichen stehenden Eigenschaften (Attributen).
externe Stylesheets zur Einbindung in HTML
Die Einbindung eines externen Stylesheets erfolgt in 3 Schritten:
Erstellen des externen Stylesheets in der abgebildeten Form (siehe Bild).
Speichern des Stylesheets als "dateiname.css".
Einbinden des Links auf das Stylesheets im Head des HTML-Dokumentes.
Nutzen der im Stylesheet erstellten Tags im Dokument.
weitere Infos unter http://de.selfhtml.org/css/formate/einbinden.htm
Das folgende Bild zeigt die Zuordnung der CSS-Formate zu den Elementen im Bowser und ihre Wirkung.
Informationen über die Nutzung von CSS finden sich unter diesem Link im selfhtml.
Flexibles Layout für mobile Geräte: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox oder https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid