CSS, auch Cascading Style Sheets genannt, werden von Webdesignern und Gestaltern zum Erstellen von Webdesigns und Templates verwendet, und können im Nachhinein immer verändert werden. Sie sind also Platzhalter auf gestalterischer Ebene - aber nicht auf inhaltlicher - dafür wird PHP verwendet.

Was bringt uns denn überhaupt CSS? Es gibt drei große Vorteile: Erstens ist CSS zu defninieren wesentlich einfacher, als in der HTML-Datei Schriftarten, Farben usw. einzugeben. Zweitens können wir immer wiederkehrende Elemente, die gleich aussehen sollen (zB. die Überschriften in diesem Blog) einen einzigen Befehl geben: er soll sich die Daten aus der Datei XY unter Abschnitt Z holen - und wir brauchen nicht jedes Mal Schriftart, Größe, Farbe, etc. erneut eingeben. Außerdem könnten so auch Fehler passieren! Drittens: wir können später immer noch alles ändern: wenn ich jetzt sage, ich will die Überschriften nicht grün, sondern blau haben, muss ich nur eine einzige Änderung im Stylesheet (=CSS-Datei) vornehmen, und nicht an jeder einzelnen Überschrift. So hab ich übrigens auch diese Seite umgefärbt - wer sich erinnern kann weiß, dass sie davor blau war.

Zuerst muss man für sein Webprojekt eine CSS-Datei anlegen, diese kann man mit einem gewöhnlichen Editor bearbeiten, und muss nur die Endung “.css” haben, also zB. “styles.css”. In dieser Datei definiert man dann verschiedene Elemente, zum Beispiel Hintergrundfarbe der HTML-Seiten, Schriftarten, Schriftfarben, Tabellenbreite, usw. Damit sich diese CSS-Datei nun auch auf einer HTML-Seite auswirken kann, muss sie mit einem Code eingebunden werden. Dazu gibt man im Header der HTML-Seite(n) folgenden Code ein:

<link href=”styles.css” rel=”stylesheet” type=”text/css” />

Natürlich muss man statt “styles.css” den Pfad sowie Dateinamen eingeben. Danach kann’s aber auch schon los gehn, und wir gestalten in der styles.css-Datei unsere Seite.

Grundsätzlich muss man zwischen drei Typen unterscheiden:

An allen drei Arten können wir aber die selben Definitionen vornehmen. Beginnen sollte man am besten mit den type’s. Sollte man vor haben, viele verschiedenen Klassen, ID’s und Typen zu erstellen, so würde ich raten, diese mit Kommentaren zu versehen, damit man immer die Übersicht behält. Kommentare können so eingefügt werden:

/* Alles innerhalb dieser Zeichen ist ein Kommentar und wirkt sich nicht auf das Stylesheet aus! */

body {
background-color:#FF0000;
background-image:url(hintergrundbild.gif);
background-repeat:repeat-x;
background-position:top center;
margin:10px;
}

So könnte nun zB. die Definition des Body-Types aussehen. Zuallererst steht der Name - in dem Fall Body (es könnte aber auch eine Klasse (.test) oder eine id (#test) sein) gefolgt von einer geschwungenen Klammer {, danach stehn die Definitionen (titel, doppelpunkt, wert, semikolon) und wieder eine geschwungene Klammer }.

background-color:#F00; gibt die Hintergrundfarbe an, background-image:url(hintergrund.gif); das Hintergrundbild, background-repeat:repeat-x; gibt an, dass sich das Hintergrundbild in der ersten Zeile unendlich wiederholt, aber nur 1 Zeile hat (anderer Wert: repeat-y; gibt an, dass sich das Bild nur in 1 Spalte wiederholt, dafür aber in jeder Zeile oder no-repeat; gibt an, dass das Bild nur 1x wiederholt oder repeat; gibt an, dass sich das Bild unendlich wiederholt) background-position:top center; gibt an, dass das erste Bild in der Mitte am obersten Rand anfängt (andere Werte: top, center, left, right, bottom) und margin:10px; gibt an, dass alle Inhalte (außer Hintergrundbild) 10 Pixel vom Rand entfernt sind.

Die Lungen sind etwa zehn Mal leistungsfähiger als bei etwa gleich großen Säugetieren, aber auch erheblich kleiner. Auch in großen Höhen können sie noch Sauerstoff entnehmen. Von den Lungen aus erstrecken sich mehrere Luftsäcke in den Bauchraum zwischen die großen Flugmuskeln und andere Körperteile. Diese sind direkt oder indirekt mit den Bronchien verbunden und nehmen bis zu einem Fünftel des Körpervolumens ein. Der Kanarengirlitz atmet durch Heben und Senken des Brustbeins. Die Luftsäcke sorgen vor allem für Kühlung, damit die Muskeln des Vogels nicht „überhitzen“. Zudem dienen sie als Luftreservoir und helfen beim Druckausgleich. Außerdem verringert sich durch die Luftsäcke das spezifische Gewicht des Vogels.

Die Begriffe Padding, Margin, Border, Height, Width usw. kommen bei CSS relativ oft vor. Um all diese verschiedenen Funktionen zu verstehen, hilft die Graphik links. Einfach aufs Bild klicken, dann öffnet sich eine vergrößerte Ansicht des Bildes ;-)

h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
text-decoration:none;
color:#3366CC;
padding-left:50px;
background-image:url(icon.gif);
background-repeat:no-repeat;
}

Das meiste sollte sich selbst erklären, font-weight:bold; gibt an, dass der Text dick sein soll (im Gegensatz dazu bietet sich “normal” an, text-decoration:none; sagt, dass der Text nicht unterstrichen werden soll (Headings definieren sich oft willkürlich, daher kann es sein, dass ein Browser diesen Heading unterstreichen will, daher müssen wir das unterbinden; wollen wir hingegen unbedingt, dass die Überschrift unterstrichen wird, so ersetzen wir “none” durch “underline”) und padding-left:50px; sagen wir, damit das Hintergrundbild als Icon daneben platziert wird. Links seht ihr das Ergebnis.

Sollte sich jemand noch eine Auflistung diverser CSS-Attribute wünschen, so muss ich passen. Es ist manchen Menschen gelungen, ganze Bücher zu füllen und auf der Seite www.css4you.de könnt ihr auch alles nachlesen. Im 2. Teil möchte ich euch aber noch verraten, wie ihr verschiedene Styles miteinander verbindet und in Part 3 gibt’s noch Tipps, die selbst Profi-Programmierer von Seiten wie ÖBB, ORF, Post, usw. nicht kennen.