CSS Hilfe

CSS Kurs

Einleitung

Dieser CSS-Kurs setzt grundlegende HTML-Kenntnisse voraus. In diesem ersten Teil wird erklärt, wie CSS und HTML verbunden werden können. In den weiteren Teilen werden dann die verschiedenen CSS-Eigenschaften erklärt.
Möglichkeiten der Einbindung von CSS

Prinzipiell gibt es 3 Möglichkeiten CSS in HTML einzubinden: direkt in einem HTML-Tag, im Head-Bereich einer Website oder in einer externen Datei. Ideal ist dies dementsprechend für entweder einmalige Formatierung (direkt im Tag), dateiweite Formatierung (im Head einer HTML-Datei) oder projektweite Formatierung (eigene CSS-Datei). Der Trend (und dies ist auch meine persönliche Empfehlung) geht allerdings dahin möglichst viele Formatierungen in eine eigene Datei auszulagern. Dadurch erhält man zusätzliche Möglichkeiten, wie etwa browserabhängige CSS-Verwendung (durch eine Browserweiche wird je nach Browser eine unterschiedliche CSS-Datei zur gleichen HTML-Datei zugeordnet), oder die Benutzerauswahl unter mehreren CSS-Dateien (der Benutzer kann selber zwischen mehreren Designs wählen).
Direktformatierung

Um CSS-Formatierungen direkt auf einen einzelnen HTML-Tag anzuwenden, wird das Attribut style im HTML-Tag verwendet. Ein Beispiel:

Überschrift

Durch diese Anweisung wird die Überschrift in diesem Fall blau angezeigt. Notieren Sie also einfach im öffnenden HTML-Tag zusätzlich das Style-Attribut, sowie eine entsprechende CSS-Angabe dahinter. Die einzelnen CSS-Eigenschaften werden ab Teil 3 dieses CSS-Kurses erklärt.
Dateiweite Formatierung im Kopf-Bereich

Um dateiweite Angaben zu verwenden, wird im Kopfbereich einer HTML-Datei, also zwischen und , das Tag

geschlossen. Alle hier gemachten Angaben gelten für die gesamte HTML-Datei. Ein Beispiel:

Das Attribut “type” ist ein Pflichtattribut für das einleitende Style-Tag. Notieren Sie bei Verwendung von CSS also in jedem Fall:

Die Syntax @import url(); bindet die in der Klammer angegebene CSS Datei ein. Es gelten dabei die allgemeinen Regeln für absolute und relative Dateipfade, wie man sie auch von HTML für das Verlinken kennt. Diese Angabe lässt sich auch innerhalb einer CSS-Datei verwenden, um eine weitere CSS-Datei einzubinden. Netscape 4 versteht im Gegensatz zu fast allen anderen CSS-fähigen Browsern diese Syntax nicht. Daher lässt sie sich auch als Browserweiche verwenden, um Netscape 4 davon abzuhalten CSS-Befehle zu verwenden, die er mißinterpretieren würde.

Die HTML-Syntax zum Einbinden externer CSS-Dateien benutzt das Link-Tag. Ein Beispiel:

Das Attribut href gibt den Pfad zur CSS-Datei an, wobei auch hier wieder die allgemeinen Regeln für Pfade gelten. Zusätzlich sind auch die Attribute rel und type Pflichtattribute. Durch rel wird dem Browser mitgeteilt, dass es sich um ein Stylesheet handelt das eingebunden werden soll (das Element link kann auch für andere Zwecke verwendet werden), durch das Attribut type wird der Mime-Type angegeben.
Angabe des Medientyps

CSS Angaben lassen sich für verschiedene Medientypen machen. Die unterschiedlichen Medientypen sind: Normale Bildschirmausgabe (screen), Ausgabe auf Beamern etc. (projection), Druckausgabe (print), Ausgabe auf PDA's und anderen Geräten mit kleinem Display (handheld), Ausgabe auf Textgeräten mit fester Zeichenbreite, wie etwa Fernschreibern oder Textbrowsern (tty), Ausgabe auf TV-Geräten (tv), Sprachausgabe (aural), Ausgabe über Braillezeilen (braille), Ausgabe für Brailledrucker (embossed) und alle Medientypen (all).

Die unterschiedlichen Medientypen werden über das Attribut media bestimmt. Dies kann z. B. so aussehen:

In diesem Beispiel wird die Datei druck.css nur dann als Layout eingebunden, wenn aus dem Browser heraus ein Druck angestoßen wird. Die Bildschirmausgabe wird von den Angaben in druck.css nicht weiter beeinflusst.

Beachten Sie: Netscape 4 interpretiert nur Stylesheets die entweder ohne Medientyp oder mit Medientyp all oder mit Medientyp screen eingebunden wurden. Auch bei Verwendung mehrere Medientypen auf einmal (was prinzipiell möglich ist) ignoriert Netscape 4 das CSS. Mehrere Medientypen können beispielsweise so angegeben werden:

Die CSS-Datei standard.css gilt in diesem Beispiel sowohl für die normale Bildschirmausgabe, als auch die Projektion (z. B mit Beamern). Der Medientyp projection wird von Opera auch dann verwendet, wenn dieser im Vollbildmodus (bei ausgeblendetem Menü) läuft.

Die verschiedenen Medientypen können auch dann angegeben werden, wenn ein Style-Bereich innerhalb des Kopfes einer HTML-Datei verwendet wird:

Auch wenn innerhalb eines Style-Bereiches noch mal CSS-Dateien eingebunden werden, können hier Medientypen angegeben werden:

@import url(druck.css) print, embossed;

In diesem Fall gilt die CSS-Datei druck.css sowohl für den normalen Druck, als auch für spezielle Braille-Drucker (Braille ist Blindenschrift).

Auf die Besonderheiten der Interpretation der Medientypen durch Netscape 4 bin ich bereits eingegangen. Netscape 6.0 findet in jedem Fall die richtige Angabe für die Bildschirmanzeige, versteht jedoch die Angabe print für die Druckausgabe z. B. nicht. Netscape 6.1 versteht auch print. Der MS Internet Explorer interpretiert zumindest einen Teil der Angaben (in jedem Fall all, screen und print) bereits seit Version 4.0. Opera kennt seit mindestens Version 5.0 (zu Opera 4 habe ich keine Informationen) mindestens die Medientypen all, screen, print und projection, wobei projection für die Vollbildausgabe genutzt wird.