wie bereits in HTML 1 erklärt, kann man mit CSS beschreiben, wie der Inhalt dargestellt werden soll, wenn man nicht die Standardeinstellungen vom Browser benutzen möchte. CSS ist die Abkürzung für Cascading Style Sheets (kaskadierende Stylesheets).
Das <style>-Element
Um der Seite einen Stil zu geben, muss man das <style>-Element hinzufügen. Dieses kommt in den Kopf der HTML-Seite. Wie bei allen anderen Elementen auch, gibt es ein Start- (<style>), und ein Ende-Tag (</style>). Im Gegensatz zu anderen Tags, benötigt <style> ein Attribut mit dem Namen „type“, das dem Browser mitteilt, welche Art von Stil verwendet werden soll. Wenn man CSS verwenden möchte, muss man also „text/css“ als Typ angeben. Der Inhalt des Elementes definiert die Stilregeln für die HTML-Seite.
So könnte z.B. der Kopf einer HTML-Datei aussehen, wenn man das <style>-Element hinzufügt:
So könnte also der Anfang einer Website aussehen. Innerhalb der nächsten Schritte, werde ich zeigen, mit welchem Inhalt man das style-Element füllen kann (also die Stilregeln). Zunächst werde ich aber kurz erklären, für was ein Attribut gut ist.
Was ist ein Attribut?
Mit Hilfe von Attributen kann man zusätzliche Informationen zu einem Element zur Verfügung stellen. So kann man z.B. mit dem Attribut für ein style-Element genau angeben, um welche Art von Stil es sich handelt.
Die Stilregeln
Die HTML-Datei Wonderland könnte man zum Beispiel so aufbauen:
Wer macht was?
background-color: pink; setzt die Hintergrundfarbe auf rosa
margin-left und margin right; legt den linken und rechten Außenabstand auf jeweils 20% der Seitenbreite fest
border: 5px dotted violet; definiert einen pink gestrichelten Rahmen der um den Textkörper herum angezeigt wird. Je größer die Zahl vor dem px, desto größer sind die Punkte
padding: 10px 110px 10px 10px; Erzeugt einen Zwischenabstand zwischen dem Text und dem Rahmen
font-family: sans-serif; definiert die Schriftart für den Text
Das ganze sieht im Browserfenster dann wie folgt aus:
Wie man sehen kann, fallen die Farben anders aus, als man denkt. Violett kommt als pink raus und pink als rosa, deshalb habe ich in der Beschreibung auch gleich genannt, wie die Farbe sich ausprägen. Um genau die Farben hinzubekommen, die an möchte, muss man ein wenig ausprobieren. Es gibt mehrere Möglichkeiten in CSS Farben anzugeben. Entweder so, wie ich es gemacht habe, oder mit dem Hexcode (z.B. #d2b48c, das wäre ein Braunton).
Der „body“ am Anfang der CSS-Regeln bedeutet, dass sich der gesamte CSS-Code zwischen { und } auf den Inhalt innerhalb des HTML-Elements <body> bezieht. Wenn man also z.B. die Schriftart auf „sans-serif“ setzt innerhalb des bodys, wird dadurch bestimmt, dass für den Textkörper der Seite eine Schriftart ohne Serifen verwendet wird.
E-Portfolio Annick 