Zum Inhalt springen

CSS in HTML einbinden

Es gibt grundsätzlich drei verschiedene Arten um CSS in HTML-Dokumente einzubinden:

  • Direktes Formatieren eines Elements
  • Zentrale Formatierung im HTML
  • In eine externe Datei auslagern

Die wahrscheinlich häufigste und beste Methode, ist das Einbinden von CSS über eine externe Datei. Damit wird das Layout schön vom Inhalt getrennt und die Dateien werden nicht unnötig überladen.

Undirektes Formatieren eines Elementes

Dies ist die unsauberste Möglichkeit CSS in HTML einzubinden und sollte vermieden werden. Da dadurch der Quelltext sehr unübersichtlich und schwer veränderbar wird. Eine direkte Formatierung kann man mit Hilfe des style Attributs vornehmen.

<p style="size:12px; font-weight:bold;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Zentrale Unformatierung im HTML

Um nicht jedem Element einzeln eine Formatierung zuzuweisen kann man diese zentral im HTML angeben. Sie gelten dann im gesamten Dokument. Für diese Art der Einbindung gibt es den <style>-Tag:

<html>
<head>
    <style type="text/css">
    p {
        size:12px;
        font-weight:bold;
    }
    </style>
    <title>Meine coole Seite</title>
</head>
<body>
    <p>Unformatierter Inhalt</p>
</body>
</html>

In eine externe Datei auslagern

Dieses ist die optimale Variante, da man die CSS-Angaben bequem für mehrere Dateien nutzen kann. Die Formatierungen werden in eine Datei mit der Endung .css ausgelagert welche dann im HTML durch <link rel="stylesheet" type="text/css" href="dateiname.css"> im Unterbereich eingebunden wird:

<html>
<head>
  <title>Titel</title>
  <link rel="stylesheet" type="text/css" href="dateiname.css" />
</head>
<body>
  <p>Formatierter Inhalt</p>
</body>
</html>

In der externen CSS-Datei werden dann die CSS-Regeln definiert:

p {
   size:12px;
   font-weight:bold;
}

Vorteile externer Stylesheets

Externe CSS-Dateien sind bei (größeren) Webseiten zu bevorzugen. Sie bieten einige Vorteile gegenüber der direkten Einbindung:

  • Wenn man für mehrere Dateien das gleiche Stylesheet benutzt muss der Browser es nur einmal runterladen. Dadurch wird Traffic minimiert und die Seitenladenzeiten verkürzt.
  • Damit ist Präsentation und Inhalt am besten getrennt. Der Designer (CSS) muss nicht an der gleichen Datei wie der Redakteur (HTML) arbeiten.
  • CSS kann zentral verwaltet werden. Es muss nur an einer Stelle etwas geändert werden um das aussehen der gesamten Webseite anzupassen.

Medientypen

Für ein externes Stylesheet kann man außerdem noch den Medientyp angeben. Damit kann die Seite für verschiedene Ausgabemedien und Formate optimiert werden. Abhängig von der Ausgabe werden nur Stylesheets mit dem entsprechenden Medientyp berücksichtigt.

Dafür gibt es das media Attribut. Ihm werden verschiedene durch Kommata getrennte Ausgabe-Medien, für die das Stylesheet gelten soll zugewiesen. Mögliche Ausgabe-Medien sind:

MedientypErklärung
allFür alle Geräte
printFür den Druck
projectionFür projizierte Präsentationen vorgesehen, wie zum Beispiel Projektoren („z.B. Powerpoint“) oder den Ausdruck auf Folien.
screenHauptsächlich für Computerbildschirme vorgesehen.
handheldHandheld-Geräte
tvFür fernsehartige Geräte vorgesehen
ttyFür Medien vorgesehen, die ein festes Zeichenraster verwenden, wie beispielsweise Fernschreiber, Terminals oder portable Geräte mit begrenzten Anzeigemöglichkeiten.
auralFür Sehbehinderte: Sprachsynthesizer (sog. „Screenreader“)
embossedFür Sehbehinderte: Braille-Seitendrucker
brailleFür Sehbehinderte: Braille-Geräte mit taktilem Feedback
speech
Für Sprachausgabe

Durch die verschiedenen Medien-Typen kann man die Ausgabe des Inhalts je nach Endgerät bestimmen. Zum Beispiel kann man durch den Medientyp ‚print‘ die Navigation oder unnötige Werbebanner ausblenden.

<link rel="stylesheet" type="text/css" media="print" href="druck.css" />

Stylesheet für Smartphones

Wenn man seine Webseite bestmöglich auch auf dem Smartphone präsentieren möchte gibt es auch hier ein paar Regeln die man beachten muss. Das Smartphone schrumpft normalerweise die Webseiten die es gerade besucht um so eine bessere Ansicht der ganzen Webseite zu bieten.

Man kann das Smartphone nicht über Handheld ansprechen da das Smartphone als Computer gehandhabt wird und somit auf Screen reagiert. Der 480 Pixel (960 Pixel beim iPhone4) breite Bildschirm wird mit der folgenden Angabe im Head angesprochen:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="smartphone.css" type="text/css" />

Nun muss man dem Smartphone noch mitteilen dass es die Webseite nicht wie herkömmlich schrumpfen soll, deswegen müssen wir den Viewport des Smartphone im Head der Webseite mit einem Meta-Element ansprechen:

<meta name="viewport" content="width=320" />

Nun zeigt das Smartphone die Webseite im Hochformat (640 Pixel beim iPhone4) ohne Zoom an. Zuvor sollte man natürlich seine Webseite für das Smartphone optimiert haben.

Da der Bildschirm des iPhones beispielsweise 160ppi hat (326 ppi beim iPhone 4) werden Schriftarten etwas kleiner angezeigt, somit kann man ohne Bedenken beim Stylesheet die Schriftgröße etwas Größer anlegen.

Nach oben