Einstieg in CSS CSS ist nunmehr auch schon etwas älter. CSS läuft jedem Surfer täglich über den Weg. In dieser CSS Einführung wollen wir Sie ein wenig in die Technik, bzw. die Arbeitsweise mit CSS einführen.

CSS steht für Cascading Style Sheets, und sollen das Leben eines jeden Webmasters zumindest ein wenig erleichtern. CSS 1 wird von Netscape und dem IE in etwa komplett in den Versionen 5 unterstützt. CSS 2 wird bereits (fast komplett) von dem Netscape 6 unterstützt. Der IE 6 hängt noch ein wenig nach.
Über CSS kann man das Aussehen von bestimmten HTML Elementen definieren.

Ein einfaches Beispiel:


<p><font color="#ff0000">Ein Text</font></p>

Nehmen wir an, das Sie diesen Code auf ca. 10 Unterseiten verwenden, z.B. in einem Menü, oder einem anderen Element. Möchten Sie nun, das der Text blau dargestellt wird, dann müssten Sie in ihren 10 Unterseiten jeweils die Farbangabe auf blau ändern.
Dies ist schon viel Aufwand, doch stellen Sie sich das einmal bei 100, 200 oder gar 300 Unterseiten vor?

Die Lösung bringt CSS mit sich. Über CSS kann man, wie bereits erwähnt das Aussehen, also die Formatierung von Elementen definieren. Folgende CSS Anweisung würde das oben beschriebene Problem lösen:

p {color: #0000ff }


Diese CSS Anweisung wird in einer Datei *.css gespeichert, und in die jeweiligen HTML Dateien über eine Anweisung im <head> Bereich (siehe unten) eingebunden. Sie definiert, das alle <p> Tags blau dargestellt werden.

Stylesheets einbinden

Eine CSS Style Definition kann auf zwei Möglichkeiten in eine HTML Datei eingebunden werden. Zum einen, wie im obigen Fall, das die Stylesheet-Anweisungen in einer ausgelagerten *.css Datei vorliegen, oder, das die Styleanweisungen im <head> Bereich jeder Seite definiert werden.
Eine weitere Möglichkeit, ist die Verwendung des style-Attributes bei HTML Tags, die auf diese Weise direkt formatiert werden.

1. Einbindung einer ausgelagerten CSS Datei:
<link rel="stylesheet" href="style.css" type="text/css">
Diese Anweisung kommt in den Head-Bereich jeder HTML Seite, die die Style-Definitionen verwenden soll. Über das href-Attribut wird auf die Adresse der Stylesheet Datei verwiesen.

2. Styledefinition im head-Bereich
Die Styledefinitionen im <head> Bereich werden durch den <style> Tag umschlossen. Das obere Beispiel würde wie folgt eingebunden werden:

<style type="text/css">
p {color: #0000ff}
</style>


Hierbei steht man natürlich wiederum vor der Problematik, dass das Stylesheet bei einer Änderung in jeder Datei geändert werden muss.

3. Styledefinitionen bei einem Element
Man kann CSS Style, durch das style-Attribut direkt bei einem Element definieren. Das obere Beispiel würde wie folgt aussehen:
<p style="color: #0000ff">Der Text</p>

Elemente und Klassen

Nun, wenn Sie nach dem beschriebenen Schema vorgehen, können Sie jeden HTML Tag (jeden sichtbaren) über CSS vordefinieren. So definiert folgende CSS Anweisung, das alle Überschriften (<h1>) Rot sein sollen.

h1 { color: #ff0000 }

Was ist nun, wenn Sie mehrere Farben für <h1>-Überschriften definieren möchten. So soll z.B. eine Überschrift grün, die andere Rot sein.
Auch hierfür hat CSS eine Lösung. Man kann einzelne Klassen definieren. Diese Klassen sind ebenfalls Styledefinitionen (wie gewohnt), nur muss von dem HTML-Befehl direkt auf die Klasse verwiesen werden, wenn dieses Element über die jeweilige Klasse definiert werden soll.

Ein Beispiel veranschaulicht dies:

style.css

.rot {color: #ff0000}
.gruen {color: #00ff00}


css_1.html

<html><head>
<title>
CSS - Beispiel 2
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1 class="rot">Rote Ueberschrift</h1>
<h1 class="gruen">Gruene Ueberschrift</h1>
</body>
</html>


Das Ergebnis im Browser (kann man sich schon vorstellen):
CSS Klassen anwenden
CSS Klassen anwenden


Über die class-Attribute muss also auf die Klassendefinition in der CSS Datei verwiesen werden. Eine Klasse erster Ebene beginnt mit einem Punkt, in geschweiften Klammern kommt die CSS Definition.

Was ist nun eine Klasse erster Ebene?

Eine Klasse erster Ebene ist für alle HTML Tags, die sich im <body> Bereich befinden, anwendbar.
Man kann auch Klassen definieren, die sich nur auf einen HTML Tag beschränken. Die Klasse kann dann von anderen Tags nicht mehr aufgerufen werden.
Diesen Sachverhalt kann man auf unser 2. Beispiel übertragen. Dabei müssen Sie die Klassendefinitonen wie folgt verändern.

style.css
h1.rot {color: #ff0000}
h1.gruen {color: #00ff00}


Es werden wie Sie sehen, wiederum zwei Klassen definiert. Diese Klassen können jedoch nur von <h1> Tags aufgerufen werden. Ein Aufruf z.B. über <p class="rot"> würde nicht "funktionieren".

Mehrere HTML Befehle "gleichzeitig" definieren

Man kann auch mehrere HTML Befehle "in einem" über CSS definieren. So haben Sie z.B. eine Standardfarbe, allgemein für Überschriften. Folgende CSS Definition definiert, das die h1-h6 Tags alle Grün dargestellt werden sollen.

h1, h2, h3, h4, h5, h6 {color: #00ff00 }

Nun, wenn man jetzt einen Überschriftstyp noch genauer definieren möchte, z.B. die Schriftart, dann kann man diese Definition einfach darunter setzten.

style.css

h1, h2, h3, h4, h5, h6 {color: #00ff00 }
h2 {font-family: Arial}


css_2.html

<html><head>
<title>
CSS - Beispiel 3
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h1>
</body>
</html>


Das Ergebnis sieht im Browser wie folgt aus:

Verschachtelte CSS Anweisungen
Verschachtelte CSS Anweisungen


Zunächst werden alle Überschriften so definiert, das die Textfarbe Grün sein soll. In der zweiten Zeile bekommt speziell die Überschrift h2 noch die Eigenschaft, das Sie von der Schriftart Arial sein soll.

Kommentare in CSS

Ja, innerhalb einer Styledefinition können Sie Kommentare verwenden, diese dienen dem besseren Verständnis des CSS Codes. Kommentare werden vom Browser, der den CSS Code interpretiert einfach übersehen.

h1 { color: #ff0000 } /* dies ist ein Kommentar */

So, jetzt haben Sie einen Einblick in die Arbeit mit CSS bekommen. Mit unserer CSS Referenz können Sie bestimmt bald CSS richtig anwenden.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: