Actos Lab

CSS - Cascading Style Sheets

Die Erstellung einer eigenen Webseite ist der Wunsch vieler Computeranwender. Obwohl es hier auf dem Markt schon viele hilfreiche Tools gibt, kann nur derjenige das gesamte Zusammenspiel verstehen, der seine eigene Seite selbst programmiert. Wer sich mit diesem Thema ausgiebig befassen möchte, kommt und die Grundkenntnisse der HTML-Sprache nicht herum. Ebenso hört man gleichzeitig immer etwas über den Begriff Cascading Style Sheets (kurz CSS). Was es damit auf sich hat und wie es in Verbindung mit HTML verwendet wird, soll im Nachfolgenden näher erläutert werden.

HTML & CSS

Für die Erstellung einer Webseite sind grundlegende Kenntnisse der Hypertext Markup Language, kurz HTML beziehungsweise auf Deutsch Hypertext-Auszeichnungssprache, erforderlich. Sie wurde bereits 1989 entwickelt und erfreute sich von Anfang an wegen ihrer leichten Handhabung einer großen Beliebtheit. HTML ist keine offizielle Programmiersprache, da ihr wesentliche Element, wie zum Beispiel Programmschleifen fehlen. Dennoch lassen sich mit wenigen Befehlen ganze Webseiten erstellen. Leider stehen in HTML keine Befehle zur Verfügung, um ein professionelles und modernes Webdesign zu realisieren. HTML ist heute in erster Linie für die einfache Textausgabe, die Texteingabe, Formulareingabe oder die Ausgabe von Tabellen und Listen verantwortlich. Hieran knüpfen die 1994 entwickelten Cascading Style Sheets oder auf Deutsch geschachtelte Gestaltungsvorlagen, an. CSS dient in erster Linie der optischen Gestaltung einer Webseite. Hiermit werden entsprechende Layouts erstellt, zum Beispiel Schriften formatiert, Abstände zu den Seitenrändern festgelegt, Vorder- und Hintergrundfarben definiert. Man kann vereinfacht sagen, dass CSS eine Webseite schön macht.

CSS-Bfehle

CSS-Befehle lassen sich nahtlos in einen bestehenden HTML-Code integrieren. Hierzu werden sie innerhalb eines sogenannten Tags eingebunden. Die bekanntesten Tags sind:

div
p
span

Das Ende dieser Tags kennzeichnet ein Punkt (.) Innerhalb der Tags können mit den CSS-Attributen style oder class entsprechende Formatierungen angegeben werden. So legt die folgende Befehlsfolge fest, dass der nachfolgende Text in Arial mit 12 pt-Größe und in grüner Textfarbe dargestellt wird:

style="font-family: Arial; font-size: 12pt, color: green;"

Was kann CSS?

Mithilfe von CSS lassen sich auch Bilder optisch ansprechend darstellen. Ebenso können komplette Menüstrukturen entwickelt werden, die die Navigation auf einer Webseite erleichtern. Tabellen können mit ansprechenden Hintergründen hinterlegt werden. Nach dem sogenannten CSS-Box-Modell werden Textaußen- und innenabstände festgelegt. Das Einsatzgebiet ist sehr weitreichend und dennoch auch für Einsteiger leicht nachzuvollziehen. Wer eine umfangreiche Webseite erstellen möchte, kann die einzelnen Formatierungsbefehle von CSS in einer speziellen Style-Sheet-Datei auslagern. So braucht für ein neues Design der Webseite nur diese Datei geändert werden. Dies erspart enorme Programmierarbeit.

CSS ist für die optisch anspruchsvolle Gestaltung von Webseiten nicht mehr wegzudenken. Auch wenn CSS momentan noch getrennt von den HTML-Befehlen betrachtet wird, kann davon ausgegangen werden, dass in naher Zukunft CSS-Befehle komplett in einer neuen HTML-Version integriert werden.

Bild

CSS-Quellcode
So sieht der Code in einer CSS-Datei aus.