1996: Verabschiedung durch das W3C als CSS Level1 (umfasste Textgestaltung und Farben). Umfang: 76 Seiten.
1996: Interent Explorer 3 mit erster rudimentärer CSS-Unterstützung erscheint.
1997: CSS-Eigenschaften werden auf Layout ausgedehnt.
1998: CSS Level2 erscheint. Umfang: 340 Seiten.
An CSS Level3 (z.B. abgerundete Rahmenecken, Text-Schatten...) und CSS Level2.1 wird gearbeitet.
p {color: red;}
Selektor + Deklaration
Der Selektor beschreibt, was formatiert werden soll.
Die Deklaration bestimmt, wie formatiert wird und besteht aus einer Eigenschaft (hier: color) und einem Wert (hier: red). Die Deklaration muss in einer geschweiften Klammer stehen.
Mehrere Deklarationen können Sie innerhalb der geschweiften Klammer - durch Strichpunkte getrennt - notieren:
p {
color: red;
font-weight:bold;
}
Mehrere Selektoren können Sie vor der geschweiften Klammer - durch Kommata getrennt - notieren:
p, h1 {color: red;}
Sie können HTML-Befehle, die Sie in Ihrem Dokument verwenden, als Tag-Selektoren verwenden. Dadurch weisen Sie den entsprechenden Abschnitten In Ihrem Dokument bestimmte Formate zu.
h1 {font-size: 1.5em;}
Alle Überschriften werden in 1,5-facher Größe formatiert
Erklärung em: em ist eine relative Größeneinheit und bezieht sich auf die Schriftgröße des Elements bzw. in der Definition font-size auf die Schriftgröße des Elternelements (<body> oder die Voreinstellung im Browser).
p {font-weight: bold;}
Alle Absätze werden fett formatiert.
body {font-family:Georgia, "Times New Roman", Times, serif;}
Für den gesamten Body-Bereich Ihrer Website wird die Schriftfamilie "Georgia, 'Times New Roman', Times, serif" angewendet.Zusätzlich zur Format-Zuweisung zu einem bestimmten Tag haben Sie die Möglichkeit, eigene Klassen zu definieren und sie mit speziellen Formatierungen zu versehen. Den Klassennamen können Sie frei wählen. Er muss mit einem Punkt beginnen und darf keine Leerstellen oder Sonderzeichen enthalten.
ID-Selektoren beginnen mit einer #.
Beispiel Klasse-Selektor: .wichtig {font-size: 1.5em;}
<p class="wichtig">Dieser Absatz ist besonders wichtig.</p>
Beispiel ID-Selektor: #kopfbereich {background-color: grey;}
<div id="kopfbereich">Der Kopfbereich wird grau eingefärbt.</div>
Inline und Block, Div und span
Nach dem Ihnen bereits bekannten Verfahren können Sie die CSS-Angaben zwischen <style> und </style< im Head Ihrer Datei notieren.
Sie können Style-Angaben auch direkt im jeweiligen HTML-Tag definieren. Das sieht dann so aus:
<p style="background-color:green">
Das ist ein Absatz mit grünem Hintergrund
</p>Sie können Style-Angaben in einer CSS-Datei zusammenfassen. Sie muss die Dateiendung .css haben und kann ebenfalls im normalen Editor bearbeitet werden. Der Inhalt kann zum Beispiel so aussehen:
h1 {font-size: 2em;}
p {background-color:green;}
| Eigenschaft | Name | Beispielanwendung |
|---|---|---|
| Hintergrundfarbe festlegen | background-color | div {background-color:#cccccc;} |
| Hintergrundbild | background-image | #header { background-image: url(/bild.gif); background-position: top right; background-attachment:fixed; background-repeat: repeat-y;} |
| Rahmen | border | border-top {1px dotted black;} |
| Schriftfarbe | color | p {color: #000000;} |
| Höhe | height | div {height: 100px;} |
| Breite | width | div {width: 100px;} |
| Zeichenabstand | letter-spacing | p {letter-spacing: 0.1em;} |
| Zeilenhöhe | line-height | p {line-height:2em;} |
| Außenabstand eines Elements | margin | div {margin-left: 100px;} |
| Innenabstand eines Elements | padding | table td {padding: 1em;} |