Wer sich mit dem Design von Websites beschäftigt, sollte neben Grundkenntnissen in HTML auch die Basics von CSS (Cascading Style Sheets = Verschachtelte Gestaltungsvorlagen) verstehen. Denn ohne CSS geht nichts im Internet.
Erst durch Cascading Style Sheets ist die Trennung von Inhalt und Design möglich, also die unabhängige Gestaltung von Text, Bildern und Elementen auf einer Website. Was bedeutet das genau? Im Prinzip können Sie dank CSS den gleichen Inhalt in verschiedenen Designs (z.B. verschiedene Schriften, Farben, …) ausgegeben.
Erste Schritte im CSS-Code
Wenn wir das Beispiel aus Web Basics I nehmen, können wir diese einfache HTML-Seite mit CSS stylen. Ein Auszug aus dem Code:
<body> <p>webwissen / html</p> <img src="web-shortcat.png" alt=""/> <p>Das ist ein einfaches html-Dokument mit einer Headline, einem Bild und einem kurzen Text.</p> </body>
Den Body (Inhalt, der angezeigt wird) können wir jetzt in der CSS-Datei gestalten. CSS erkennen Sie auch gut an den geschweiften Klammern { }. Innerhalb dieser Klammern stehen die Eigenschaften, die die Darstellung oder Funktion beschreiben.
body { font-family: Arial; color: rgb(0,0,0); background: rgb(254,254,0); }
1. Zuerst müssen wir mitteilen, welches Element wir definieren wollen.
body { Wir beginnen mit dem Body und öffnen die geschweifte Klammer.
2. Es folgen die verschiedenen Eigenschaften, denen jeweils ein Wert zugeordnet ist. Wichtig: Nach der Eigenschaft folgt ein Doppelpunkt. Die Zeile wird jeweils mit einem Semikolon (Strichpunkt) beendet.
font-family: In der ersten Zeile definieren wir die Schriftart.
Als Wert geben wir eine Schriftart an. Die Möglichkeiten reichen von den einfachen Angaben >Serif< oder >Sans-Serif<, über die Systemschriften (wie Arial, Times, Courier, …) bis hin zu verschiedenen Web-Fonts. Die Wertangabe schließen wir mit einem Semikolon.
color: In der nächsten Zeile beschreiben wir die Farbe der Schrift mit der Eigenschaft >color<. Als Wert können Sie Farbwerte aus dem Hex-Farbsystem (#) oder aus dem RGB-Farbraum angeben.
background: Den Hintergrund der gesamten Website beschreiben wir im Element >body< mit der Eigenschaft >background<.
Was hat sich durch diese Definitionen in der CSS-Datei auf der Website verändert? Die Hintergrundfarbe ist gelb, der Text schwarz, die Schriftart Arial. Vorher: Beispiel Nachher: Beispiel mit CSS
© s2conceptdesign
div mit CSS definieren: Pack es in die Box
Mit CSS können wir aber nicht nur Farben und Schriften verändern, sondern auch das komplette Layout der Website steuern. Grundlage dafür ist das Arbeiten mit div-Elementen. Ein >div< können Sie sich wie eine Box vorstellen, in die Sie Inhalt wie Texte oder Bilder legen. Dieser Box geben Sie einen Namen, um sie anschließend – wie im Beispiel oben das Element >body< – in Größe, Form, Farbe und Position per CSS-Code definieren. Um das komplette Design der Seite zu steuern, legen Sie verschiedene div-Elemente an, die auch ineinander verschachtelt sein können (siehe Abbildung). Schauen wir uns ein praktisches Beispiel an – zunächst ein Blick in den HTML-Code:
<div id="box2"> <h1>html</h1> <p>Das ist ein einfaches html-Dokument mit einer Headline, einem Bild und einem kurzen Text.</p> <p>Das Revolutionäre an html ist die Verlinkung zu anderen <a href= "http://www.zdf.de/.html">Dokumenten</a>.</p> </div>
<div id=“box2″> Wir packen Text in HTML in eine Box. Dazu schreiben wir vor den Inhalt die ID des div-Tags, indem wir es in spitze Klammern setzen und einen Namen vergeben (hier: box2). Am Ende schließen wir die Box mit dem Befehl </div>.
Wir können jetzt die Box per CSS-Code ansprechen. Ein id-Element wird in CC mit der Raute gekennzeichnet #.
#box2 { background: rgb(255,255,255); width: 250px; height: 250px; float: left; padding: 0 10px 0 10px; }
#box2 { Mit dieser Zeile sprechen wir unsere Box in HTML an.
background: Definition des Hintergrunds unserer Box – in diesem Fall: weiß.
width: Die Weite beschreibt die Breite der Box, die in unserem Beispiel in Pixel angegeben ist.
height: Definiert die Höhe der Box – ebenfalls in Pixel.
float: Mit >float< können Sie festlegen, ob nachfolgende Elemente die Box umfließen. Es gibt die Werte left, right, none. Bei >left< und >right< wird das Element umflossen, heißt das andere Elemente daneben platziert sein können, beim Wert >none< wird die Zeile freigehalten. Nachfolgende Elemente werden unter der Box dargestellt.
padding: Beschreibt den Abstand innerhalb der Box. Die Werte beginnen oben und laufen im Uhrzeiger Sinn. Unser erster Wert >0< definiert den Abstand nach oben, der zweite Wert (10px) definiert den Abstand nach rechts, der dritte den Abstand nach unten und der letzte den Abstand nach links.
© s2conceptdesign
Was hat sich nun durch die Verwendung von div-Elementen verändert? Im Vergleich zum ersten Beispiel ist die neue HTML-Datei mit folgenden div-Elementen strukturiert, die jeweils im CSS-Code definiert sind:
<body> Beinhaltet den gesamten Inhalt, der im Browser dargestellt wird
<header> Enthält in diesem Fall die Überschrift
<content> hat die gleiche Breite wie das header-div und beinhaltet wiederum
<box1> in dem das Bild liegt und
<box2> das den Text enthält
