Design der Seite mit CSS gestalten

Lange Zeit schon hat sich am eigentlichen Aussehen unserer Projekt-Seite nichts mehr geändert. Dafür wird es jetzt um so schneller gehen. Ich habe ja bereits am Anfang etwas zu CSS gesagt und wofür es da ist. Jetzt werdet Ihr selbst erleben wie klasse dieses Instrument ist.

CSS-Datei anlegen

Legt als erstes im Ordner "Projekt" eine neue Datei an und benennt diese "projekt.css". Die Endung ".css" ist so zwingend erforderlich! Falls Ihr Top Style bereits auf Eurem Rechner installiert habt, wird sich das Symbol der Datei entsprechend verändern. Ihr könnt aber jede CSS-Datei auch ganz normal mit dem Text-Editor bearbeiten.

BODY - Bereich mit CSS bearbeiten

Nun öffnet die projekt.css und schreibt in die erste Zeile folgendes hinein:

Quellcode:

body {

width: 1024px;

}

Die geschwungenen Klammern erzeugt Ihr mit AltGr + 7 bzw. AltGr + 0

CSS-Grundprinzip

Das ist ganz einfach: im ersten Schritt geben wir an, welches TAG angesprochen werden soll, welches Element wir also beabreiten wollen. In diesem Fall ist es das <body>-Tag. Dieser Teil wird in CSS "Selektor" genannt.

Danach stehen die Definitionen in geschwungenen Klammern. Definiert wird per Angabe der Eigenschaften. Nach einem Doppelpunkt erfolgt die Angabe des Wertes für diese bestimmte Eigenschaft. Jede Definition wird mit einem Semikolon abgeschlossen.

In unserem Beispiel sprechen wir also alle BODY-TAGs in unserem HTML-Dokument an. (davon gibt es ja eigentlich nur eins). Innerhalb der geschwungenen Klammern weisen wir der Eigenschaft "width" (engl.=Breite) den Wert "1024px" zu.

Damit beschränken wir die Breite unserer Seite auf 1024 Pixel. Bislang hat sich unsere Seite ja die gesamte Breite des zur Verfügung stehenden Browserfensters genommen. Nun wird sie, selbst wenn Euer Bildschirm breiter, als 1024px sein sollte, sich mit genau diesem Platz begnügen müssen.

Jetzt öffnet die index.html mit dem Browser. Ihr seht jetzt...KEINE Veränderung zu letzten Version. Wie denn auch? Wie kann der Browser "wissen", dass in einer externen CSS-Datei weitere Formatierungsanweisungen enthalten sind? Aber auch das werden wir gleich haben.

Einbindung von CSS in HTML-Dateien

Damit es der Browser "rafft" müssen wir ihm eine Brücke zu der ausgelagerten projekt.css bauen. Das machen wir mit einem Verweis im HEAD unserer index.html. Schreibt einfach folgendes hinein, am besten direkt vor das schließende HEAD-TAG:

Quellcode:

<link rel="stylesheet" type="text/css" href="css/projekt.css">

Der Teil mit "href=..." dürfte Euch noch von den Hyperlinks her bekannt sein. Hier handelt es sich ebenfalls um einen Verweis. Es wird der Ort angegeben, an dem der Browser die CSS-Datei finden kann.

Wenn Ihr nun die projekt.css und die index.html abspeichert und die seite anschließend wieder mit dem Browser öffnet, werdet Ihr den Unterschied bereits bemerken. Voraussetzung ist, dass Euer Bildschirm breiter als 1024 Pixel ist. Für alle anderen unter Euch werden keine Unterschiede sichtbar sein.

Um die Fähigkeiten von CSS noch deutlicher herauszustellen, werden wir deshalb gleich noch ein paar Eigenschaften verändern.

Hintergrundfarbe in Webseiten verändern

Habt Ihr die Nase voll vom weißen Hintergrund unserer Projekt-Webseite? Mit CSS können wir ganz einfach jede uns vorstellbare Farbe als Hintergrund definieren. Ergänzt die Eigenschaften des BODY-Selektors wie folgt:

Quellcode:

body {

width: 1024px;
background: #f2f2f2;

}

Hier haben wir der Eigenschaft "background" den Farbwert #f2f2f2 zugewiesen. Hier handelt es sich um einen Farbwert in der hexadezimalen Formatierung. Diese Farbwerte bestehen immer aus einer Raute und einer 6-stelligen Zahlen/Buchstaben - Kombination. Der Farbwert #f2f2f2 enspricht einem sehr hellen GRAU.

WEIß ist #ffffff (sechs mal F)
SCHWARZ ist #000000 (sechs Mal NULL)

Irgendwo dazwischen liegen alle anderen Farben, die sich damit darstellen lassen. Benutzt am besten eines der vielen Farbwert-Tools, die es im Internet zuhauf kostenlos zum downloaden gibt. (z.B. dieses)

Die meisten von ihnen funktionieren so, dass wenn Ihr mit der Maus über irgendeine Fläche auf dem Bildschirm fahrt, das Tool Euch sagt um welchen Farbwert es sich dabei handelt. Das ist wirklich sehr praktisch.

Ausser hexadezimalen Farbangaben werden auch einfache Grundfarben in Wortschrift verstanden. So wie black , white, blue, red, yellow. Diese erfordern auch keine Raute vor der Farbangabe. Experimentiert einfach etwas herum. So entwickelt Ihr ein Gefühl für CSS

Hat alles geklappt?

Speichert die projekt.css - Datei ab und öffnet / aktualisiert (falls bereits geöffnet) unsere Webseite index.html mit Eurem Browser. Der Hintergrund dürfte sich gräulich verfärbt haben. (Zwischenstand) Doch hier sind wir natürlich noch lange nicht am Ende der Fähigkeiten von CSS angelangt. Es kann noch so viel mehr!
SEID ALSO GESPANNT!

<<< zurück II weiter >>>