06 CSS einbinden

Stylesheets können im Kopf der HTML- Datei definiert werden, als externe Datei verlinkt oder importiert werden. Man kann Styles auch direkt im betreffenden <Tag> angeben. Dies ist allerdings nur für kurzfristige Änderungen empfehlenswert. Auf diese Definition wird hier nicht näher eingegangen, denn sie entspricht nicht dem Konzept der Trennung von Inhalt und Layout. Die anderen Einbindungsmöglichkeiten bringen die Vorteile von CSS besser zur Geltung.

Im Kopf der HTML- Datei

Die Definition wird eingeleitet mit dem Tag <style>, dem Attribut type und dem Parameter "text/css"

<head>
<title>MONOROM.TO</title>
<style type="text/css"><!--
body {
background-color: #f5f5f5;
color: #a52;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
}
--></style>

Externes CSS

wird über das Tag-Element "link" eingebunden. Bei externen Stylesheets kann die Definition der einzelnen Tag-Style-Attribute direkt erfolgen.

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

@Import

Sollen Stylesheets für verschiedene Ausgabemedien definiert werden, so kann man die Einbindung auch so vornehmen:

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

oder, wenn die Ausgabemedien in verschiedenen Stylesheets definiert sind:

<style type="text/css"><!--
@import url (print.css);
@import url (name_des_styles.css);
--></style>

Attribut Media

CSS2 bietet die Möglichkeit, Stylesheets für verschiedene Medien wie Bildschirm, Drucker oder Handheld zu definieren. Das Attribut Media media="screen" notiert das Medium. Ein Stylesheet kann durch Kommata getrennt mehreren Medien zugewiesen werden.

CSS2 unterscheidet folgende Medien

all => Alle Ausgabegeräte
aural => Aurale Ausgabegeräte ZB Screenreader
braille => Blindenschrift fähige Drucker
handheld => Handheld (Palmtops PDA's WinCE-Geräte)
print => Drucker
projection => Video-Beamer, Overhead-Projektoren
screen => Bildschirme
tty => Geräte mit Terminalfenster
tv => TV-Geräte