Was ist CSS?

Mit CSS verändert man die Darstellung bestimmter Elemente, indem man sie mittels eines Selektors auswählt und dann bestimmte Eigenschaften zuweist.

CSS (Abkürzung für Cascading Style Sheets) ist eine Auszeichnungssprache mit der (X)HTML- Dokumente (Allgemein auch XML, z.B. OpenDocument) formatiert werden können.

Inhaltsverzeichnis

Vorteile

Die Verwendung von CSS bietet einige Vorteil gegenüber Formatierungen direkt im Dokument:

Trennung von Inhalt und Darstellung
Formatierung abhängig vom Ausgabemedium (Bildschirm, Druck, Handy, Sprache, Präsentation)

Warum man CSS nutzen sollte

Jede Internetseite soll ein ansprechendes Layout haben. Dazu zählt das Menü, der eventuell mehrspaltige Inhaltsbereich, graphische Boxen, der Footer oder jegliches anderes Element.

Um nun zum Beispiel die komplette Internetseite zu zentrieren wurde oft ein solches oder ähnliches Markup verwendet:

<!DOCTYPE html>
<html lang="de">
  <head>...</head>
  <body>
    <table width="100%" border="0">
      <td>&nbsp;</td>
      <td>
... Inhalt der kompletten Seite ...
      </td>
      <td>&nbsp;</td>
    </table>
  </body>
</html>

Jetzt haben sich schon etliche Schulklassen gefragt (und fragen sich immer noch): „Warum benötige ich für eine zentrierte Webseite Tabellen?“ Auch wenn Lehrer anderes weis machen wollen ist diese Frage sehr berechtigt – Wer tippt Texte schon mit Excel nur damit sie nicht am linken Seitenrand kleben?

In der Fachsprache redet man von einem semantisch inkorrektem Einsatz der Tabelle. Im Grunde kann man aber einfach sagen: Es werden keine tabellarischen Daten angezeigt, also macht eine Tabelle auch keinen Sinn.

Per CSS zentriert man eine Internetseite folgendermaßen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      html{
        width:100%;
        text-align:center;}
      body{
        width:800px;
        margin:0px auto;
        text-align:left;}
    </style>
  </head>
  <body>
... Inhalt der kompletten Seite ...
  </body>
</html>

Hier werden alle Angaben zum zentrieren in einen Extra CSS-Block zusammengefasst. Die normale HTML-Auszeichnung wird dabei nicht angetastet, weshalb der Inhalt auch direkt innerhalb der <body>-Tags eingebaut werden kann.

Einbinden von CSS

CSS kann man auf drei verschiedene weisen in (X)HTML- Seiten einbauen:

Direkt in den entsprechenden Tags mit Hilfe des -Attributs
In dem <head>-Bereich der (X)HTML -Datei können Stylesheets direkt unter dem <style>-Tag definiert werden
In dem <head>-Bereich der (X)HTML -Datei können externe CSS-Dateien mit Hilfe des <link>-Tags oder per @import in dem <style>-Bereich angegeben werden

All diese Möglichkeiten lassen sich auch mischen. Für das zentrieren einer Webseite könnte das folgendermaßen aussehen:

<!DOCTYPE html>
<html lang="de">
  <head>
     <meta charset="utf-8">
     <link type="text/css" href="extern1.css" />
     <style type="text/css">
      @import url("extern2.css");
      html{
        width:100%;
        text-align:center;}
      body{
        margin:0px auto;}
    </style>
  </head>
  <body style="width:800px; text-align:left;">
... Inhalt der kompletten Seite ...
  </body>
</html>

In den Dateien extern1.css und extern2.css können nun weitere CSS-Definitionen stehen, die auch auf die Seite angewandt werden.