Sommer, Sonne, See und CSS

Der Sommer steht vor der Tür – da bekommt man richtig Lust auf einen schönen Tag am See. Aber wie heißt es so schön? Erst die Arbeit, dann das Vergnügen. Wobei für mich natürlich auch meine Ausbildung zum Vergnügen zählt 😉

Wie in meinem letzten Beitrag versprochen greife ich heute das Thema HTML und CSS wieder auf und möchte dabei an meinen letzten Beitrag über HTML anknüpfen.

In diesem haben wir über das HTML-Grundgerüst sowie über Tags gesprochen. Nun möchte ich einen Schritt weitergehen und auf die Notwendigkeit und Funktionsweise von CSS eingehen.

Die sogenannten Cascading Stylesheets (CSS) sind Formatvorlagen für Websites. Zusammen mit dem HTML-Gerüst gestalten sie das Aussehnen eines Internetauftrittes. Ihr könnt euch CSS-Dateien wie die Kleidung einer Website vorstellen – ohne diese sähe man nur den unformatierten Inhalt.

Es gibt drei Varianten, die es ermöglichen CSS-Befehle mit dem HTML-Code zu verknüpfen. Die Befehle direkt im Quellcode einzubinden bildet dabei die erste Möglichkeit. Dabei werden die CSS-Befehle, auch Styles genannt, direkt in den Tag geschrieben. Dieser Befehl wirkt nur an dieser bestimmten Stelle im Code. Was auch gleichzeitig den größten Nachteil der ,,Inline-Styles“ bildet, denn man ist gezwungen jedem zu formatierenden Tag den Style einzeln zu vergeben. Bei einem sehr umfangreichen Internetprojekt eine mühsame und zeitfressende Arbeit. Interne Stylesheets sind da schon etwas komfortabler. Hier werden im Head der HTML-Datei die CSS-Eigenschaften definiert, welche sich dann auf die komplette Datei auswirken. Jedoch muss dieser Code bei jeder einzelnen HTML-Datei neu eingefügt werden. Wenn nun das Aussehen einer Website mit mehreren Seiten geändert werden muss, muss auch der interne CSS-Code in jeder HTML-Datei bearbeitet werden. Die dritte Variante und damit gleichzeitig die am häufigsten verwendete, ist das Auslagern von CSS-Befehlen. Hierbei wird zum einen eine externe CSS-Datei benötigt, in welcher die CSS-Befehle geschrieben werden und zum anderen einen Verweis in der HTML-Datei, in der das Stylesheet eingebunden werden soll.

Verweis in der HTML-Datei:

< link href=“/werbeagentur/stylesheet.css“ rel=“stylesheet“ />

Externe CSS-Dateien haben vor allem den Vorteil, dass sie für beliebig viele HTML-Dateien genutzt werden können. Das vereinfacht eine einheitliche Gestaltung von beispielsweise eines Internetauftrittes mit vielen einzelnen HTML-Seiten ungemein. Außerdem lassen sich dadurch Änderungen am Erscheinungsbild einer Website unkompliziert realisieren.

Aber wie sieht nun so ein CSS-Befehl aus? Nehmen wir mal an wir möchten eine Überschrift gestalten, in der Schriftart ‘Source Sans Pro‘ mit der Schriftgröße 24 pt und der Schriftfarbe grün. Dazu sieht der Befehl wie folgt aus:

.ueberschrift {
font-family: Source Sans Pro;
font-size: 24 px;
color: green;
}

Was ihr nun seht, ist eine sogenannte CSS-Klasse, die wir nun beliebig jedem HTML-Tag zuordnen können. Es gibt noch eine zweite Variante, die IDs. Diese werden in der CSS-Datei statt mit einem davor gesetzten Punkt mit einem Hashtag „#“ gekennzeichnet. Ein grundlegender Unterschied zwischen den beiden Varianten ist, dass man Klassen beliebig oft verschiedenen Tags zuordnen kann, wobei IDs immer nur einmal verwendet werden sollten.

CSS erlaubt es also Stile, Farben und Formen zu definieren und zu klassifizieren und das nicht nur für eine einzelne HTML-Datei. Man kann eine externe CSS-Datei in beliebig vielen verschiedenen Seiten einbinden. Das ist in erster Linie bei großen Internetauftritten mit vielen einzelnen HTML-Dateien vorteilhaft, da diese durch das Stylesheet vereinheitlicht werden und so der Code von unübersichtlichen Inline-Styles befreit wird.

Interessant oder? Wie ihr seht, ist CSS ein sehr umfangreiches und tiefgehendes Thema. Nach diesem Einstieg über die grundlegenden Basics möchte ich in meinem nächsten Beitrag mit euch noch detaillierter in CSS eintauchen.

Viel Spaß beim Lesen!