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.

CSS Angaben im Kopf der HTML- Datei

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

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

Externes CSS

Externe CSS Dateien werden ü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

Seit CSS2 besteht 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

css-media-queries Test

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

@media

@media definiert innerhalb eines style-Bereichs (oder in einer CSS-Datei) einen Bereich für Formatdefinitionen eines bestimmtes Ausgabemediums. Nach der @media-Angabe müssen geschweifte Klammern { .. } notieren werden.

Nach @media { .. } folgt, durch Leerraum getrennt, das gewünschte Ausgabemedium. Mehrere Ausgabemedien können durch Kommata getrennt in Folge notiert werden. Alle Formatdefinitionen, die innerhalb dieser geschweiften Klammern notiert werden, sind nur für die angegebenen Medien gültig,

Beispiel @media print

@media print { 
  body { 
  background-color: #ffffff; 
  font-size: 10pt; 
  font-family: Arial, Helvetica, SunSans-Regular, sans-serif; 
  color:#000000; 
  padding:0; 
  margin: 0; 
  } 
}

WICHTIG: media="screen" darf nicht im Link zum CSS File stehen, sonst können die Printangaben nicht ausgeführt werden.

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