Romain-Rolland-Gymnasium Dresden, Kurs Neue Medien (2013)
Übersicht wichtige Begriffe
Lektion 1:
Herangehen		 Lektion 2:
HTML		 Lektion 3:
Helfer		 Lektion 4:
so gehts		 Lektion 5:
einfache Gestaltung		 Lektion 6:
Frames		 Lektion 7:
CSS		 Lektion 8:
Dateitypen
Begriffserklärung
kommentiertes Beispiel
HTML und CSS
Phase 5 und CSS
Seitenende

Seitengestaltung mit Cascading Style Sheets (CSS)

Mit der Entwicklung multimediafähiger Rechner und schnelleren Datenleitungen wurde die Gestaltung von Webseiten immer mehr in die Hände der Programmierer gelegt und dem User mehr und mehr die Hände gebunden. Prinzipiell ist es ihm aber auch heute noch möglich, die Gestaltung der Seite völlig auszuschalten und in die eigenen Hände zu nehmen. Es macht nur keiner.
Die Möglichkeiten von HTML waren aber begrenzt, und so wurde CSS entwickelt.
Auf die Möglichkeit, einzelne CSS-Formatierungen auf einer HTML-Seite einzubauen, wird hier nicht weiter eingegangen. Es gibt nämlich eine andere Möglichkeit, die in der Regel viel besser ist: In einer gesonderten CSS-Datei wird das Aussehen der HTML-Elemente detailliert beschrieben - Farbe, Schriftart und -größe, Ausrichtung usw. Die HTML-Seite informiert den Browser darüber.
Auf diesem Weg ist es möglich, Inhalt und Gestaltung zu trennen. Man muss nur die Formatvorlagen verwenden und alle Seiten haben ein einheitliches Layout. Damit ist gleichzeitig noch ein zweiter Vorteil verbunden: Lauyoutänderungen müssen nur an einer (manchmal an einigen wenigen) CSS-Datei(en) vorgenommen werden und Hunderte HTML-Seiten haben ein neues Aussehen, ohne dass man sie in irgeneiner Weise verändern oder umschreiben muss.

Beispiel für eine CSS-Datei nach oben

Erläuterung
body { font-family: Arial; font-size:9pt; }
h1 { font-size:18pt; font-weight: bold; }
h2 { font-size: 14pt; font-weight: bold; }
h3 { font-size:12pt; }
h4 { font-weight: bold; font-size:10pt; }
h5 { font-family: Arial; font-size: 9pt; font-weight: normal; }
a:link { color: #1F00FF; }
a:visited { color: #00009F; }
code { font-family: Courier; font-size: larger; font-weight: bold; font-style: none; color: #804000; }
hr {color: #0000DF}
kbd { font-family: Courier; font-weight: bold; color: #008000; }
samp { font-family: Arial; font-style: italic; color: #353535; }
.merksatz { font-family: Arial; background: #00007F; font-weight: bold; color: #FFFF00; } 		Dieser Text beschreibt das Aussehen dieser HTML-Seite zum Zeitpunkt ihrer Entstehung. Wie man sieht, beginnt ein Abschnitt mit dem Inhalt eines Tags, wie etwa h1 für die Überschriften erster Ordnung oder hr für eine horizontale Linie.
Danach werden in geschweiften Klammern die geänderten Attribute und ihre Attributwerte genannt. Die Reihenfolge ist egal, Elemente können sich sogar wiederholen. Man kann auch mehrere Elemente gleich(zeitig) festlegen, indem man die Taginhalte vor der geschweiften Klammer durch Komma getrennt auflistet.
Die Attribute werden jeweils mit einem Komma abgeschlossen, nach den Attributwerten folgt ein Semikolon.
Die letzte Deklaration beschreibt eine eigene Formatvorlage mit dem Namen merksatz.
Nicht definierte Elemente oder Attribute behalten das Aussehen, was im Browser eingestellt ist.

Veränderungen in der HTML-Datei nach oben

Im Kopf der HTML-Datei muss darauf verwieden werden, welche CSS-Datei benutzt werden soll, (wenn eine benutzt werden soll). Im <head>-Abschnitt findet sich beispielsweise die Zeile
<link rel="stylesheet" href="Format.css" type="text/css">
Diese Zeile fügt Phase 5 automatisch ein, wenn Sie eine neue Datei erstellen und bei "verfügbare Styles" die Datei Format.css auswählen.
Wenn Sie keine eigenen Formatvorlagen definieren, wars das auch schon! Wollen Sie mit der obigen Beispieldatei einen Bereich formatieren, benutzen Sie das Attribut class.
Der Code sieht dann so aus
kein Merksatz
<p class="merksatz" >Aber jetzt!</p>
Neuer Absatz...		 kein Merksatz

Aber jetzt!

Neuer Absatz...
Das geht auch <span class="merksatz" >mit einzelnen Abschnitten</span> mit Hilfe des Tags <code><span></code>. Das geht auch mit einzelnen Abschnitten mit Hilfe des Tags <span>.

Phase 5 hilft nach oben

auch beim Erstellen der CSS-Datei:
  1. Erstellen Sie eine neue Datei, deren Erweiterung Sie auf CSS einstellen.
  2. Klicken Sie auf Format|Style Sheets (CSS)|Style Element definieren...
  3. Wählen Sie anschließend das gewünschte Element und stellen Sie dessen Aussehen ein.
  4. Beenden Sie die Einstellung mit einem Klick auf Einfügen.
  5. Ergänzen Sie eventuell Angaben. Hinweise zur Gestaltung mit CSS finden Sie bei SelfHTML.
  6. Speichern Sie die CSS-Datei(!)
  7. (Erstellen Sie eine HTML-Datei, die diese Formatvorlagen verwendet und) betrachten Sie das Ergebnis.
  8. Korrigieren und ergänzen Sie gegebenfalls die CSS-Datei. Wiederholen Sie dazu gegebenenfalls die Schritte 2 bzw. 5 bis 7.
 nach oben
vorherige Lektion: Frames Das war Lektion 7: Gestaltung mit CSS nächste Lektion: Dateitypen im www