Erste Schritte
CSS-Code kann auf drei unterschiedliche Art und Weisen in das HTML-Dokument eingebunden werden:
1. Als externe Ressource.
<link rel="stylesheet" type="text/css" href="beispiel.css">
Diese Anweisung steht im <head></head>-Bereich des XHTML-Dokuments und bindet eine normale ASCII-Text-Datei, eben das Stylesheet mit dem Namen beispiel.css in das aufrufende Dokument ein.
2. Als eingebettetes Stylesheet. Das CSS-Dokument wird in einem speziell dafür vorgesehenen tag <style></style> gespeichert.
Beispiel:
<head><title>Dokument mit Formatierungen</title>
<style type="text/css">
body { color: purple; background-color: #d8da3d }
</style></head>
3. Die letzte (und unsauberste) Art ist das Einbetten der Stildefinitionen in den jeweiligen (X)HTML-Elementen über das Attribut style="".
Beispiel:
<p style="font-size: small;">Text</p>
Für die Einbidung des Stylesheets als Ressource gilt: rel="stylesheet" Art der Beziehung; auch andere "Ressourcen", wie externe Definitionen dieser Art generell genannt werden, könnten u.U. hier angegeben werden. type="text/css" "Das ist ein Stylesheet nach den 'CSS' Konventionen" - Auch andere Regeln für Stylesheets sind denkbar. href="../meins.css" Eine URL; gibt an, wo das Stylesheet zu finden ist.
Die Datei "beispiel.css" hat folgenden Inhalt:
h1 {
color: blue;
font-family: helvetica;
}
p {
color: green;
}
body {
background: yellow;
}
b {
color: red;
font-weight: 100;
font-size: 30pt;
}
u {
font-family: mono-space;
font-weight: 100;
font-size: 3pt;
text-decoration:none;
}
Mehr zum Einbinden der CSS-Datei auf w3schools.
Der Aufbau einer CSS-Regel
Ein Stylesheet besteht aus einer oder mehreren Regeln, die beschreiben, wie ein bestimmtes Seitenelement dargestellt werden soll. Jede Regel besteht aus zwei wesentlichen Teilen: dem Selektor und dem Deklarationsblock.
Eine Darstellung der Regelstruktur hier als Beispiel:
selektor {
eigenschaft1: wert1;
eigenschaft2: wert2;
}
h1 {
color: blue;
font-family: helvetica;
}
Der Inhalt der geschweiften Klammern wird als "Deklarationsblock" bezeichnet, ein Eigenschaft-Wert-Pärchen als Deklaration. Der Selektor steht auf der linken Seite der Regel und ist dafür verantwortlich das Element des HTML-Dokuments auszuwählen, auf das sich die Regel beziehen soll (in unserem Beispiel die Überschrift <h1></h1>). Jeder Deklarationsblock kann beliebig viele Deklarationen enthalten. Ressourcen Wir sprechen von Ressourcen, wenn wir einem Programm für seinen abstrakten Ablauf nicht notwendige Angaben, wie etwa visuelle Attribute, durch einen externen Mechanismus zur Verfügung stellen. Anders ausgedrückt: Ressourcen (im IT Bereich) sind augelagerte Text-Dateien die, wie ein Cascading Style Sheet, bestimmte Informationen für das aufrufende HTML-Dokument beinhalten. White Space Mit "White Space" bezeichnen wir beliebig lange Sequenzen von nicht signifikanten Zeichen in einer Zeichenfolge, d.h. in der Regel Leerzeichen, Tabulatoren und ähnliche Zeichen.
Mehr zum Aufbau einer CSS-Regel auf w3schools.
CSS - Ein Beispiel
h1 {
color: blue;
font-family: helvetica;
}
p {
color: green;
}
body {
background: yellow;
}
b {
color: red;
font-weight: 100;
font-size: 30pt;
}
u {
font-style: italic;
font-family: mono-space;
font-weight: 100;
font-size: 3pt;
text-decoration:none;
}
Mit diesem Testbeispiel sehen wir uns nun die Wirkungen der wichtigsten Property / Wert Paare an.
1. Die Properties color und background-color (auch abgekürzt: background akzeptieren als Werte die Namen der wichtigsten Farben in Englischer Sprache.
2. Das Property font-size regelt die Schriftgröße und erwartet als Wert eine von mehreren möglichen Größenangaben. Die wichtigsten Varianten sind:
- Absolute Angaben, als Zahlen mit "pt" am Ende. ("Druckerpunkte".) z.B: 12pt
- Einen Prozentwert: 150%
- Eine "Längenangabe", bezogen auf die Länge des Buchstabens "m" in der eingestellten Schriftart:
3. Das Property font-family wählt die Schriftart aus.
- Entweder durch Angabe eines Namens einer auf dem jeweiligen Rechner vorhandenen Schrift, z.B. times oder helvetica
- oder durch Angabe einer "Familienbezeichnung" - am wichtigsten serif und sans-serif.
4. Das Property font-style wählt zwischen normal und italic. 5. Das Property font-weight wählt aus wie fett die Schrift sein soll: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 sind die wichtigsten Werte. 6. Das Property text-decoration wählt spezielle, selbsterklärende Darstellungsmodi: none, underline, overline und blink. Hier zwei Einführungen / Übersichten im Web: