Du bist hier: Homepage von Dietrich Schäckermann, Homepage-Gestaltung: Grundkurs CSS
Home Mail Diese Seite drucken

Cascading Stylesheets

Wenn du die Maus an den linken Rand führt, kannst du Sprungziele weiter unten erreichen. Probiere es aus!

HTML bietet nur wenige Möglichkeiten, die Seite einer Homepage zu gestalten.
Hier helfen die sogenannten Style Sheets, genauer gesagt Cascading Style Sheets.
Im Folgenden werde ich vorwiegend die Abkürzung "CSS" benutzen.

Vorab eine Wiederholung:

Im HTML-Code gibt es TAGs, Attribute und Parameter oder auch Werte.

TAGs stehen in Spitzklammern, also z. B.:<p>
Attribute sehen z. B. so auscolor = " "
Parameter/Werte sehen z. B. so aus#080800
(Zu den Farben gleich mehr.)

Ein typischer TAG mit Attribut und Parameter sieht dann so aus:

Im Folgenden werde ich:
- das Attribut style = " " immer grün schreiben,
- die Parameter/Werte blaurot,
- die TAGs wie gehabt blau,
- Text, der in der Homepage zu sehen sein soll, in kursiv.

Hier ein Beispiel: <p align = " center " > Hier steht Text </p>

 


Nun geht's aber los!

CSS bietet eine Fülle von neuen Möglichkeiten!

Eigentlich besteht CSS nur aus einem neuen Attribut: style = " ".
Dieses Attribut kann man in fast alle TAGs einfügen. Das sieht bei <p> z. B. so aus: <p style = " ">.

MIt dem passenden Parameter/Wert sieht das, hier ein Beispiel, dann so aus:<p style = "color:red">
Hier siehst du auch gleich eine Besonderheit der Schreibung in CSS: Der Doppelpunkt.

Nähere Erklärung:
Einige der Parameter/Werte für das Attribut style = " " haben denselben Namen wie HTML-Attribute!
Man könnte mit aller Vorsicht beinahe sagen: Das CSS-Attribut style = " " ist eine Art Über-Attribut zu den HTML-Attributen.

Wir könnten sagen: style = " " ist eine Schachtel/ein Container für die - untergeordneten - Attribute.
Allerdings haben die CSS-Attribute dann oft einen etwas anderem Namen als die HTML-Attribute.

Nun sind die Anführungszeichen aber schon für das Style-Attribut verbraucht! Also musste man ein anderes Zeichen
für die Parameter/Werte des alten HTML-Attributs finden - eben den Doppelpunkt.

Hier eine Beispiel:
Um dem Text Dies ist ein Text die Farbe "rot" zu geben, musste man das Wort in den font-TAG einkleiden. Das sah dann so aus:
<p><font color="red">Dies ist ein Text </font></p>

Jetzt kann ich schreiben:
<p style = " color:red " > Dies ist ein Text </p>

Nochmal: Das Style-Attribut style = " " umschließt mit seinen Anführungszeichen ein HTML-Attribut plus Parameter/Wert.
Das HTML-Attribut mit seinem Parameter/Wert sieht ursprünglich so aus: color = " red ".

Jetzt mache ich einen Fehler!!!!
Ich setzte um das HTML-Attribut das Style-Attribut: style = " color = " red ""

Ich denke, jeder sieht, dass es so nicht geht!

Also:
style = " color:red "

Nun eine Übung mit ursprünglichen HTML-Attributen und ihren Parametern Werten.

1. Aufgabe: Leg eine HTML-Datei mit dem Namen "index.htm" an. Denke an das "Grundgerüst" mit den TAGs HTML, BODY etc!

Dieser Text ist mit HTML-Attributen formatiert.,
und zwar so:

<p><font face=" Comic Sans MS " size=" 5 " color=" #808000" > Dieser Text ist mit HTML-Attributen formatiert. </font></p>

2. Aufgabe: Kopier diese Zeile und füge sie in deine Datei ein.
Schau deine Datei im Browser an: Sieht der Text genau so aus?

Nun schau dir den Code genau an. Ich gehe davon aus, dass du verstehst, wie sich der Code in das Browser-Bild umgesetzt hat.

Nun musst du wissen, dass viele HTML-Attribute in CSS eine etwas andere Bezeichnung und andere Parameter/Werte haben:
Ich schreibe die Parameter/Werte für das Beispiel in die Tabelle:

font-Tag
<font>
HTML CSS
face font-family:Comic Sans MS;
size font-size:x-large;
color color:#808000;

Dieser Text ist mit CSS formatiert.
Das sieht dann so aus:
<p style=" font-family:Comic Sans MS; font-size:x-large; color:#808000 " > Dieser Text ist mit CSS formatiert. </p>

3. Aufgabe: Kopier auch diesen Code von <p bis </p> in deine index-Datei. Sieht alles so aus wie bei mir?
Leichte Abweichungen entstehen z. B. durch die Verwendung verschiedener Browser!

Vergleiche wieder den Code hier auf der Seite mit dem Code deine index-Datei.

Wichtig ist noch zu wissen:
Die einzelnen Parameter/Werte im Style-Attribut werden durch Semikola getrennt!

Nun lassen sich aber auch viele HTML-TAGs, die Schrift formatieren, als CSS-Style
ausdrücken. Also: In HTML ein TAG (<b>), in CSS style="" plus Parameter/Wert.

Beispiele:

HTML-TAG CSS-STYLE
<b> font-weight:bold;
<i> font-style:italic;
<u> text-decoration:underline;
Einige Schriftformatierungen, die es in HTML gar nicht gibt:
font-variant:small-caps;
font-stretch:expanded;
word-spacing:2px;
letter-spacing:0.5em;
text-transform:uppercase

Weitere und genauere Angaben findest du HIER1

Hier einige Formatierungsmöglichkeiten für die Absatzgestaltung:

HTMLCSS
aligntext-align:center;
bgcolorbackground-color:#ff6600;
Einige Schriftformatierungen, die es in HTML gar nicht gibt:
text-indent:5px;
line-height:20px;
vertical-align:bottom;
white-space:nowrap;

4. Aufgabe: Versuch, alle aufgeführten CSS-Parameter/Werte in deine index-Datei einzubauen.
und beobachte, was passiert.

Auch hier wieder: Weitere und genauere Angaben HIER2
... und weiter unten HIER3

Nun kommt etwas Neues

CSS-Formatierung datei-weit

Bis jetzt haben wir CSS immer nur in einem HTML-TAG angewandt.
Man kann aber eine Formatierung auch datei-weit für eine TAG festlegen. Wir wollen z. B. in allen P-TAGs die Schrift "Arial" in der Größe 20pt verwenden.
Dies ist zwar für den Normalgebrauch zu groß, aber so kannst du sehen, dass die Schrift wirklich größer ist.
Ok! Los geht's.

Datei-weite Formatierungen werden zwischen <head></head> formatiert.

Zunächst musst du dort dem Browser mitteilen, dass du dort CSS-Styles definieren willst.
Das geht so:
<style type="text/css">(HTML-Studio unterlegt diese Zeilen mit gelb!)
Hier stehen dann die Formatierungen.
</style>

Welchen TAG wollten wir formatieren? Ach ja, den <p>-TAG. Wir schreiben anstellen von
Hier stehen dann die Formatierungen. folgendes:
p {font-family:Arial; font-size:20pt;}

Dann sie das Ganze so aus:
<style type="text/css">
p {font-family:Arial;font-size:20pt;}
</style>

5. Aufgabe: Wenn du diese Zeilen einfach in eine HTML-Datei in den HEAD hinein kopierst, müssten alle <p>-Tags in Arial Schriftgröße 20 erscheinen. Probier es in deiner Index-Datei aus! Dazu musst du allerdings die Formatierungen in allen P-TAGs wegnehmen!

Damit auch nichst schief geht, hier der Code, wie er nun in deiner index-Datei stehen müsste. Korrigiere evtl.

<Html>
<head>
<style type="text/css">
p {font-family:Arial;font-size:20pt;}
</style>
</head>
<BODY>
<p>Hier steht Text in Arial und 20 pt!</p>
</BODY>
</Html>

Nun die Erklärung:
- Pro Zeile zwischen <style type="text/css"> und </style> darf nur die Formatierung für einen TAG-Typ stehen.
- Am Anfang der Zeile steht der zu formatierende TAG-Name, bei uns p (ohne Spitzklammern!)
- Dann folgt eine öffnende Schweifklammern: {
- Dann folgt die Formatierung nach CSS-Regeln, getrennt durch Semikola, bei uns also: font-family:Arial; font-size:20pt;
- Dann eine schließende Schweifklammer: }

Nochmal: Im HEAD sieht das Ganze dann so aus:
<style type="text/css">
p {font-family:Arial; font-size:20pt;}
</style>

Probe:

Schau dir zum Vergleich mit deiner index-Datei diese Datei im Editor an: aufgabe5.html

Wenn du deine oder diese Datei im Browser betrachtest, müsste der Text jetzt in Arial, Schriftgröße 20 erscheinen.
6. Aufgabe: Ändere die Parameter/Werte im HEAD! Du wirst sehen, dass sich jedesmal der Text zwischen den p-TAGs ändert.

7. Aufgabe: Nun kannst du die Formatierungen für andere TAGs selbst einstellen. Hier musst du ordentlich üben, damit dir keine Fehler unterlaufen.
h-TAGs bieten sich an, aber auch die Tabellen- oder die Listenformatierungen.
Benutze dazu die Tabellen, die ich dir weiter oben gegeben habe.
Eine Fülle von CSS-Formatierungen findest du auch hier4!

8. Aufgabe: Erstelle eine neue HTML-Seite. In dieser formatierst du im HEAD
- <h1> mit den Parametern/Werten font-family:Comic Sans MS; background-color:yellow; color:lightgreen
- <p> mit den Parametern/Werten font-family:Comic Sans MS; background-color:lightgreen; color:yellow; font-weight:900
- <li> mit den Parametern/Werten font-family:Arial;background-color:#cccccc; color:#ff0000; font-size:9pt

Nun fügst du in den BODY folgendes ein:
<h1>Dies ist ein Text in h1, neu formatiert.<h1>
<p>Dies ist ein Text in p, neu formatiert.<p>
<li>Dies ist ein Text in li, neu formatiert.<li>

Schau dir nun deine Datei im Browser an. Wenn du alles richtig gemacht hast, müsste deine Datei nun so aussehen:
Ansicht zu Aufgabe 8.

9. Aufgabe: Versuche nun mit den Tabellen-TAGs zu arbeiten. Erinnerst du dich?
<table></table> öffnet und schließt die Tabelle,
<tr></tr> öffnet und schließt die Zeile einer Tabelle,
<td></td> öffnet und schließt die Spalte einer Tabelle.
Ansicht zu Aufgabe 9.

Und wieder etwas Neues

CSS-Formatierung für alle Dateien einer Homepage

Hompages bestehen heute oft aus vielen Dateien (sogenannten Projekten). Natürlich sollen die verschiedenen Seiten alle ähnlich gestaltet sein!
In der Wirtschaft ist das besonders wichtig, damit der Besucher der Seite weiß, dass er immer noch bei derselben Firma ist.
Man nennt dies den Wiedererkennungswert oder auch "Corporated Identity" (= Identität der Firma). Wenn nun alle Seite/Dateien ähnlich gestaltet sein sollen, wäre es doch schön, wenn man die Style-Sheets (CSS) für alle Seiten/Dateien in einer besonderen Datei speichern könnte. Kann man!

10. Aufgabe:

1. Zunächst legen wir eine neue Datei an, die wir, z. B. "formate.css" nennen.
2. Dann fügen wir dort als Beispiel unsere p-TAG-Formatierung ein

p {font-family:Arial; font-size:20pt;}

Speichern nicht vergessen. Diese Datei muss im selben Verzeichnis wie unsere HTML-Datei (Nimm z.B. die index-Datei.) liegen!!!

Hier habe ich dir die Datei "formate.css" verlinkt.

Nun gehen wir zurück in unsere index-Datei in den HEAD, nehmen alles, was dort schon steht, weg und schreiben dort folgendes:

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

Hier habe ich die Datei "aufgabe10.html" verlinkt, die auf die Datei "formate.css" reagiert.

Du siehst: Eigentlich ändert man nur <style> in <link>
und fügt dann die Attribute type=" text/css " rel=" stylesheet " href=" formate.css " hinzu.
Ich habe es ausprobiert: Man kann anscheinend sogar type=" text/css " weglassen!

Wichtig sind aber die beiden anderen Attribute: rel=" stylesheet " weist den Browser darauf hin, dass es sich um CSS handelt
und href=" formate.css " sagt, in welcher Datei die Formate gespeichert sind.

Hinweis: Du darfst die "formte.css" auch in einem anderen Verzeichnis speichern. Dazu musst du aber folgendes wissen:
Liegt die Datei in einem Verzeichnis - nennen wir es "CSS" - unterhalb deiner HTML-Datei, brauchst du nur den Verzeichnisnamen plus einen Schrägstrich
vor den Dateinamen schreiben. Das sieht für unser Beispiel dann so aus: "CSS/formate.css" (Keine Leerzeichen!)
und noch ein

Hinweis:
Wenn du deine Homepage im Internet veröffentlichen willst, muss die Startdatei immer "index.htm" oder "index.html" heißen.
Dann würde das Ganze also so aussehen müssen:

Es ist also ganz sinnvoll, deine verschiedenen Seiten/Dateien, die deine gesamte Homepage darstellen, in einem Verzeichnis zu speichern
und alle Dateien, die irgendwelche Zusatzinformationen, eben z. B. Formatierungen, enthalten, in ein Unterverzeichnis zu speichern.

Nun eine allgemeine wichtige Regel:
Reihenfolge des Vorrangs
1. Direktformatierung
2. Formatierung in der Datei selbst im HEAD.
3. Formatierung in einer externen CSS-Datei.

Wenn du also eine CSS-Datei angelegt hast, in der die Schriftgröße auf für <p> auf 14pt festgelegt ist,
kannst du für eine bestimmte Datei deiner Homepage die Schriftgröße z. B. auf 18pt festlegen und
innerhalb dieser Datei einen bestimmten <p> auf z. B. 22pt.

Und nochmal etwas Neues

Nein, noch nicht zu Ende! In CSS gibt es sogenannte classes = Klassen. Damit ist nicht dein Schulklasse gemeint, sondern etwas ganz Spezielles: eine CSS-Beschreibungsclass (fürchterliches Wort) kannst du jedem HTML-TAG mit dem Attribut class = "" zuweisen.

Das sieht so aus:
Entweder im HEAD oder in der besonderen CSS-Datei ( bei uns "formate.css") setzt du
- in eine neue Zeile zumächst einen Punkt. Das ist für den Browser das Signal: "class"
- Dann schreibst du einen Namen für die Klasse: z. B. "rot".

- Dann setzt du eine offene Schweifklammer {.
- Dann kommt die CSS-Bezeichung, hier sinnvollerweise: "color:red"
- Zum Schluss schließt du mit einer Schließ-Schweifklammer: }.

Das Ganze sieht dann so aus:
.rot{color:red;}

11. Aufgabe:

- Schreibe in deine Datei "formate.css" in eine neue Zeile oben genannte class.
- Gib einem P-TAG in deiner index-Datei das Attribut class = " rot "

Du siehst: In diesem p-TAG erscheint die Schrift rot.

In jedem anderen TAG, sei es h1 - h7 oder tr, td, li, span, div oder sonstwie, erscheint die Schift mit diesem Attribut auch in rot.

Ich habe die Einfärbungen der TAGs (blau), Attribute (grün) und Parameter/Werte (blaurot) mit derartigen CSS-Eigenschaften formatiert.

Probiere das aus!

So, das soll erst einmal reichen. Nun muss du ganz viel üben und dir die CSS-Format-Namen einprägen. Das geht am besten, wenn du dir die Namen während des Probierens/Spielens aufschreibst. Leg dir doch eine Datei mit CSS-Format-Namen an. Übrigens, in vielen Hilfen, die du im Internet findest, werden die CSS-Format-Namen "Eigenschaften" genannt.

Die wichtigste Hilfe findest du hier: selfHtml1
Auch hier eine schön gemachte Hilfe: css4you5

Und nun

Viel Spaß!

Stand: 06.12.2011
1 http://de.selfHtml.org/navigation/css.htm#schrift, © 2007, Version 8.1.2 vom 01.03.2007
2 ebenda: http://de.selfHtml.org/navigation/css.htm#ausrichtung
3 ebenda: http://de.selfHtml.org/navigation/css.htm#hintergrund
4 ebenda: http://de.selfHtml.org/navigation/css.htm"
5 http://www.css4you.de, ©2004 - 2009 css4you.de, Version 3.6, letzte Änderung: 07.03.2009