Externe Seitenformatierung mit CSS (Tutorial)

[Bildschirmfoto] Externe Seitenformatierung mit CSS

Ein kompletter Webauftritt lässt sich so, optisch mit wenigen Klicks und Einträgen verändern.

🖝 Stellen Sie Sich vor auf Ihrer Homepage gibt es zwanzig oder noch mehr Seiten und bei jeder müssen Sie die Hintergrundfarbe einzeln umändern — was für eine Tipparbeit. Und wenn Sie fertig sind, gefällt Ihnen eine andere Farbe doch besser.

Einfacher geht es mit einer externen CSS-Datei:

1. Öffnen Sie einen Texteditor zum Beispiel „Notepad“ oder Notepad++ » notepad-plus.sourceforge.net (kostenlos).

2. Fügen Sie folgende Regel (CSS-Anweisung) ein:

body {
 background-color: Yellow;
}

3. Speichern Sie die Datei unter dem Namen: style.css

4. Fügen Sie einmalig in allen Seiten zwischen <head> und </head> folgendes ein:

<link rel="stylesheet" href="style.css">

✔ Ab jetzt brauchen Sie nur in der Datei: style.css die Hintergrundfarbe zu ändern und alle anderen Seiten haben die gleiche Hintergrundfarbe.

Formatierung mit CSS

Mit der Regel body {…} können Sie den HTML-Tag » <body> formatieren. Der Name body entspricht dabei den HTML-Tag <body> im Dokument. Es lassen sich auch zahlreiche andere HTML-Elemente formatieren (Mehr dazu weiter unten).

body {
 background-color: Yellow;
}

Zwischen den geschweiften Klammern {} wird eine CSS-Anweisung eingefügt. Mehrere Anweisungen werden mit einem Strichpunkt ; (Semikolon) voneinander getrennt.
Mit den Anweisungen kann man zum Beispiel den Hintergrund, die Schriftfarbe, die Schriftart oder die Schriftgröße ändern.

Schriftart ändern

Fügen Sie zusätzlich folgende CSS-Anweisung in der Datei: style.css ein (hier im Beispiel mit der Farbe Rot markiert!):

body {
 background-color: Yellow;
 font-family: Verdana;
}

Weitere Schriftarten: Verdana, Arial, Tahoma, Times New Roman, Courier, Courier New, Comic Sans MS, …

Schriftgröße ändern

Fügen Sie zusätzlich folgende CSS-Anweisung ein:

body {
 background-color: Yellow;
 font-family: Verdana;
 font-size: 12px;
}

Mit font-size: 12px; setzen Sie die Schriftgröße auf eine Größe von 12 Pixel.

Schriftfarbe ändern

Fügen Sie zusätzlich folgende CSS-Anweisung ein:

body {
 background-color: Yellow;
 font-family: Verdana;
 font-size: 12px;
 color: Blue;
}

Die Farbe können Sie als Farbnamen (Red, Blue, Green, Yellow, …) oder Hexadezimal (#FF0000, #0000FF, #FFFF00, …) eintragen. Siehe dazu » Farbnamen, Hexadezimal, Dezimal, Prozent und Negativ

Hintergrundbild einbauen

Fügen Sie zusätzlich folgende CSS-Anweisung ein:

body {
 background-color: Yellow;
 font-family: Verdana;
 font-size: 12px;
 color: Blue;
 background-image: url(bild.jpg);
}

Anstatt bild.jpg geben Sie den gewünschten Namen der Grafik ein.

CSS geht ab!

Das war noch nicht alles, CSS kann noch viel mehr, hier sind die wichtigsten Anweisungen zusammengefasst:

Linkfarbe ändern

Mit neuen Regeln gestalten Sie nun die Links auf der Website. Dazu wird der <a>-Tag formatiert.

Einen normalen Link einfärben:

a:link {
 color: Blue;
}

Einen bereits besuchten Link einfärben:

a:visited {
 color: Darkmagenta;
}

Einen Link einfärben wenn man mit dem Mauszeiger über den Link fährt:

a:hover {
 color: Hotpink;
}

Viele weitere Beispiele finden Sie unter: » CSS Hyperlinks

HTML-Tag formatieren

Sie können mit CSS auch viele andere HTML-Elemente formatieren, zum Beispiel den <strong>-Tag, <div>-Tag oder den <h1>-Tag:

h1 {
 font-family: Verdana;
 font-size: 18px;
 color: Blue;
}

HTML-Tag (Kind-Element) formatieren

Des weiteren ist es möglich nur bestimmte Tags zu formatieren, zum Beispiel alle <strong>-Tags die in einem Textabsatz (mit dem <p>-Tag) vorkommen. Wichtig: Lassen Sie zwischen den zwei Tag-Namen ein Leerzeichen   .

p strong {
 color: Green;
}

Die HTML-Datei sollte dann so aussehen:

<p>Das ist ein <strong>kleiner</strong> Text.</p>

Das Eltern-Element ist hier im Beispiel der <p>-Tag, innerhalb dieses Tags befindet sich das Kind-Element <strong>.

Ausgabe:
Das ist ein kleiner Text.

Mehrere HTML-Elemente zusammen formatieren

Um mehrere HTML-Elemente zusammen zu formatieren, wird zwischen den Tag-Namen ein Komma , gesetzt.
Angenommen Sie möchten den <h1> und den <div>-Tag die gleiche Hintergrundfarbe geben:

h1, div {
 background-color: Green;
}

Eigenschaften mit einer „class” formatieren

In CSS ist es möglich eine „class” (Klasse) zu definieren. Sie können irgend einen Namen für die Regel verwenden. Wichtig ist, das Sie vor der Regel einen Punkt . setzen.

➤ Ein Name muss mit einem Buchstaben beginnen (A-Za-z). Jedes weitere Zeichen kann ein Buchstabe, eine Ziffer (0-9), ein Bindestrich-Minus (-) oder ein Unterstrich (_) sein. Außerdem darf eine Klasse keine deutschen Umlaute (ä,ö,ü, …), Leerzeichen oder Sonderzeichen enthalten. 

.textfarbe_blau {
 color: Blue;
}

In der HTML-Datei bauen Sie dann folgendes ein:

<span class="textfarbe_blau">Das ist ein kleiner Text.</span>

Ausgabe: Das ist ein kleiner Text.

Ein weiteres Beispiel:

.hintergrund_gelb {
 background-color: Yellow;
}

In der HTML-Datei bauen Sie dann folgendes ein:

<span class="hintergrund_gelb">Das ist ein kleiner Text.</span>

Ausgabe: Das ist ein kleiner Text.

• Beide Klassen zusammen benutzen.
Hier setzen Sie zwischen den beiden Klassen einfach ein Leerzeichen   .

<span class="textfarbe_blau hintergrund_gelb">Das ist ein kleiner Text.</span>

Ausgabe: Das ist ein kleiner Text.

Eigenschaften mit einer „ID” formatieren

Soll Ihre Navigation auf jeder Seite gleich aussehen, dann nehmen Sie am besten eine ID. Im Gegensatz zur einer „class” darf das Attribut „id” (Bsp.: id="navigation") nur ein einziges mal auf der Seite stehen.
Sie können irgend einen Namen für die Regel verwenden. Wichtig ist, das Sie vor der Regel eine Raute # setzen.

➤ Ein Name muss mit einem Buchstaben beginnen (A-Za-z). Jedes weitere Zeichen kann ein Buchstabe, eine Ziffer (0-9), ein Bindestrich-Minus (-) oder ein Unterstrich (_) sein. Außerdem darf eine ID keine deutschen Umlaute (ä,ö,ü, …), Leerzeichen oder Sonderzeichen enthalten. 

#navigation {
 background-color: Papayawhip;
 width: 150px;
 padding: 10px;
 border-radius: 12px;
}

In der HTML-Datei bauen Sie dann folgendes ein:

<div id="navigation">
<a href="link1.htm">Demolink 1</a> <br>
<a href="link2.htm">Demolink 2</a> <br>
<a href="link3.htm">Demolink 3</a>
</div>

Ausgabe:

Demolink 1
Demolink 2
Demolink 3

Kind-Kombinator

Der Kind-Kombinator (>) beschreibt eine direkte Eltern-Kind-Beziehung. Die Anweisung body > p betrifft also nur Absätze, die unmittelbar auf body folgen, nicht aber Absätze, die im weiteren definierten <div>-Tag enthalten sind.

body > p {
 color: Yellow;
}

<body>
 <p>...</p>
  <div id="inhalt">
   <p>...</p>
  </div>
 <p>...</p>

Der Absatz innerhalb des <div>-Tags mit der ID #inhalt wird von der Anweisung body > p nicht erfasst.

Benachbarte-Geschwister-Kombinator

Der Benachbarte-Geschwister-Kombinator (+) erfasst Elemente, die unmittelbar aufeinander folgen. Möchte man zum Beispiel den ersten Absatz (p), der auf eine Überschrift (h1) folgt, immer gefettet darstellen, könnte man folgendes anweisen:

h1 + p {
 font-weight: bold;
}

Attribut-Selektoren

HTML-Elemente können mit CSS über ihre Attributwerte angesprochen werden um diese anzupassen. Im folgenden Beispiel werden Hyperlinks mit Symbolen gekennzeichnet, die Besucher erkennen sofort, was Ihnen beim anklicken des jeweiligen Links erwartet.

Links ein Icon zuweisen

• Zeigt Symbolische Links bei allen Links die mit http:// beginnen (^). 

a[href^="http://"] { 
 padding-right: 16px;
 background: url(extern.png) right no-repeat;
}

<a href="http://www.google.de">Google.de</a> - Google.de

• Zeigt Symbolische Links bei allen Links die mit .zip enden ($).

a[href$=".zip"] {
 padding-left: 15px;
 background: url(download.gif) left no-repeat;
}

<a href="datei.zip">Datei herunterladen</a> - Datei herunterladen

• Zeigt Symbolische Links bei allen Links die bing enthalten (*).

a[href*="bing"] {
 padding-right: 14px;
 background: url(stein.gif) right no-repeat;
}

<a href="http://www.bing.de">Bing.de</a> - Bing.de

Inhalte generieren

Die CSS-Anweisung content generiert zusammen mit ::before und ::after einfache Zeichenketten vor oder nach dem Element.
Im Beispiel wird im <div>-Tag mit der ID #test neuer Inhalt hinzugefügt:

div#test::before {
 content: "Alt";
 background-color: Lawngreen;
}

div#test::after {
 content: "Neu";
 background-color: Fuchsia;
}

<div id="test"> -Beispiel- </div>
-Beispiel-

Bild hinzufügen

div.test2::after {
 content: url(birne.gif);
}

<div class="test2">Glühbirne: </div>
Glühbirne:

CSS-Anweisungen einfach oder kompliziert

Bei den CSS-Anweisungen sollten Sie immer genau wissen was Sie machen. Verwenden Sie einfache Anweisungen um Ihre Website zu gestalten, an komplexe Anweisungen können Sie sich später, mit mehr Erfahrung, heran wagen.

Weitere CSS-Anweisungen und Tipps finden Sie unter » Textgestaltung mit CSS, » Farbverlauf mit CSS, » CSS Hyperlinks und ein wenig Spielerei unter » Bilder mit Hover-Effekt