Cascading Style Sheets ist eine zu HTML gehörende Stilvorgabe für die Erstellung von Webseiten. In CSS werden den in HTML gesetzten Elementen (Tags), IDs und Klassen (class) verschiedene Werte zugeordnet.
CSS kann, wie auch Java Script, in HTML direkt eingebunden werden oder auch extern in einer Datei ausgelagert werden. In jedem Fall muss das HTML-Element mit einer Klasse oder einer ID angesprochen werden, außer man schreibt den Style als sogenannten „inline Style“ als Attribut in das HTML-Element. Dazu aber später mehr.
Wie wird CSS in HTML ausgelagert?
Wie oben bereits erwähnt kann CSS in HTML direkt eingebunden oder in einer Datei ausgelagert werden. Das Auslagern funktioniert ähnlich wie in Java Script:
1 | <link href="Pfad der CSS Datei" rel="stylesheet" type="text/css" /> |
Beim Auslagern einer CSS-Datei ist es wichtig, dass die Cascading Style Sheet Datei über die Endung „.css“ verfügt, um als CSS-Datei deklariert zu werden. Im oben genannten Beispiel wird im (normalerweise im Headbereich der HTML-Datei) ein Link-Tag erstellt, welches folgende 3 Attribute zugewiesen bekommt:
- href = Das href-Attribut, in dem der Pfad der CSS Datei angegeben wird.
- rel (Relation) = Das rel-Attribut, in dem die Beziehung zu dem angegebenen Pfad dargestellt wird, in dem Fall wird dort Stylesheet eingetragen.
- Type = Das Type Attribut legt hier die Sprache des eingebundenen Scripts fest. In dem Fall ist die Sprache text/css.
Wie wird CSS in HTML eingebunden?
Die nächste Möglichkeit, wie CSS in HTML eingebunden werden kann, ist ähnlich wie bei der Einbindung von Java Script Funktionen in HTML:
1 2 3 | <style> /* Zum Einleiten der/des Stylesheets */ CSS Code </style> /* Zum Beenden der/des Stylesheets */ |
In dieser direkten Einbindung, die in den Headbereich des HTML-Dokuments erfolgt, der Styles in die HTML-Datei, wird der style-Tag zum Einleiten und Beenden der/des Stylesheets eingesetzt. Hier kann man einen oder mehrere Stylesheets einbinden, was den Quellcode sehr unübersichtlich machen würde.
Die dritte und letzte Möglichkeit Stylesheets in HTML einzubinden ist die oben bereits genannte Art des „inline Styles“. Ein inline Style wird mit dem style-Attribut in einen HTML-Tag geschrieben:
1 | <p style="Hier werden die Styles gesetzt/definiert">Hallo Welt!</p> |
Hier gelten die Stylesheets nur für das Element, in dem das style-Attribut steht, und eine Verknüpfung durch Klassen oder IDs ist nicht notwendig. Die Einbindung von inline Styles ist auch eine eher provisorische Lösung, da es für ein Element schon einmal schnell 5, 6, 7 Styles geben kann und wenn jeder dieser Styles als inline Style gesetzt wird, entsteht sogenannter Spaghetticode.
Schlusswort
Stylesheets sind für die Gestaltung einer Webseite unerlässlich, da sonst, Farben, Positionierungen und eine generelle Struktur (der Aufbau/das Seitenkonzept) nicht dargestellt werden können. Hier geht es zu dem Tutorial: „Wie wird CSS definiert„?
Loading...
