Websiteentwicklung: CSS: Grundlagen

Zurück zu Geschichte | Hoch zu CSS | Vor zu Einbau in HTML/XML

Wohin gehören CSS-Anweisungen?

Die CSS-Anweisungen können sich entweder direkt in der (X)HTML-Datei oder separat in einer eigenen Datei befinden. Üblicherweise verwendet man die letztere der beiden Varianten, wofür es mehrere Gründe gibt. Es ist so etwa einfacher, die Stilvorlage zu wechseln oder mehrere alternative Stilvorlagen zu verwenden. Ein Darstellungsprogramm muss bei Verwendung einer externen Stilvorlage bei einem größeren Projekt mit vielen Dokumenten die Information über die Stilvorlage auch nur einmal laden und vorhalten und nicht bei jedem neuen Seitenaufruf neu laden und analysieren. Die (X)HTML-Datei sollte auch übersichtlich bleiben, wobei es dann kontraproduktiv wäre, wenn man mit dem Attribut style arbeiten würde. Angaben in diesem lassen sich zudem nur schwierig mit externen Stilvorlagen überschreiben, erschweren also ebenfalls die Verwendung von alternativen Darstellungen oder eine Aktualisierung von Stilvorlagen.

Das in XHTML ohnehin als veraltet gekennzeichnete Attribut style sollte also komplett vermieden werden. Das Element style ist vor allem bei Einzeldokumenten oder zum Test und zur Entwicklung neuer Stilvorlagen sinnvoll, wenn also möglichst alles in einem einzigen Dokument zusammengefaßt sein soll.

Falls Sie jetzt mit einem neuen Projekt beginnen, erstellen Sie also idealerweise mit Ihrem Texteditor eine neue Datei und nennen diese zum Beispiel "screen.css". In dieser Datei werden Sie dann künftig das Layout der Bildschirmdarstellung definieren.

Vermutlich haben Sie schon eine Idee, wie Ihre künftigen Dokumente präsentiert werden sollen. Wahrscheinlich werden diese neben dem eigentlichen Inhalt auch einen reinen Navigationsteil haben. Wenn nun jemand Ihre Dokumente liest und dann einen interessanten Artikel drucken möchte, bringt es ihm nichts, wenn die Hälfte des Papiers mit Navigationselementen bedruckt wird. Das können Sie verhindern, wenn Sie das Layout für die Druckausgabe in einer separaten CSS-Datei definieren. Legen Sie dazu eine weitere Textdatei mit dem Namen "print.css" an.

Selbstverständlich können Sie die Dateien nennen, wie Sie wollen, zum Beispiel "elefant.css" und "gruenekuh.css". Hilfreich ist meist allerdings ein Benennung, die charakteristisch für den Stil ist, insbesondere, wenn mehrere Stilvorlagen alternativ angeboten werden. Das erleichtert Ihnen auch, sich leichter zurechtzufinden.

In den nachfolgenden Artikeln werden wir aber davon ausgehen, dass Sie den obigen Namensvorschlag übernommen haben.

Wie beginne ich?

CSS-Dateien, die separat (also getrennt vom (X)HTML-Dokument) angelegt werden, sind äußerst schlicht aufgebaut. Sie sind darum auch sehr einfach zu schreiben. Alles, was Sie benötigen, ist eine eindeutige Zuordnung der Kodierung der Information im Dokument und mindestens eine Definition der Eigenschaften eines Elementes des zu dekorierenden Dokumentes. CSS hat eine andere Art der Notation oder Syntax als (X)HTML oder allgemein XML, die von dort bekannten Elementmarkierungen (<...>) sind in CSS nicht definiert.

Ganz zu Beginn Ihrer CSS-Dateien kann angegeben werden, welchen Zeichensatz Sie in diesem Dokument verwenden:

@charset "UTF-8";

Sofern die Datei von einem Dienstprogramm ausgeliefert wird (etwa per HTTP), hat die Angabe des Dienstprogrammes allerdings wie üblich Priorität gegenüber den Angaben im Dokument. Macht das Dienstprogramm keine Angabe, kann ein BOM (Bytereihenfolge-Markierung) am Anfang der Datei Einfluß auf die Dekodierung haben, dies sollte also vermieden werden, wenn die eigene Angabe Wirkung haben soll.

Trifft nichts davon zu, gibt aber ein Verweis einen Hinweis auf die Kodierung (etwa per Element link in (X)HTML), so wird dies verwendet. Gibt es auch die Angabe nicht, aber ein verweisendes Dokument, so wird dessen Kodierung verwendet. Gibt es auch das nicht, wird UTF-8 angenommen.

Vielleicht wenden Sie sich erstmal nur der 'screen.css' zu und schieben die 'print.css' für später auf. Üblicherweise lässt sich diese später einfach aus der 'screen.css' ableiten.

Anschließend sollten Sie mit etwas Kommentar beschreiben, was Sie hier eigentlich tun wollen. das könnte dann so aussehen:

@charset "utf-8";

/*
Stilvorlage Frühlung für example.com
(c) 2013  Reiner Zufall, Hinterm Zaunpfahl 3, Berlin-Mitte
*/

/*** globale Voreinstellung ***/
body {
  color:       #fff;
  background:  #000
}

Fühlen Sie sich bei den Kommentaren völlig frei. Wenn Ihnen dieses Konzept nicht zusagt, erfinden Sie ein eigenes. Nur scheuen Sie sich nicht, Kommentare großzügig zu verwenden.

Unter "globale Voreinstellung" sammelt man sinnvoller Weise jene Anweisungen, welche die gesamtheitliche Basis liefern; in obigem Beispiel, dass der Text grundsätzlich weiß und der Hintergrund schwarz ist.

HTML, XHTML oder XML?

Vielleicht besitzen Sie bereits eine HTML-, XHTML- oder XML-Datei, in der Sie die soeben erstellten CSS-Dateien einbinden möchten. Vielleicht müssen Sie diese Frage verneinen und fragen sich an dieser Stelle, welche Variante - HTML, XHTML oder lieber XML - Sie verwenden sollten, um ein Dokument zu erstellen. Um es auf einen Nenner zu bringen: Mit XHTML werden Sie vermutlich richtig liegen. Einige recht spezielle Regeln in HTML können unter anderem bei der Selektion von Elementen und Strukturen per CSS zu Überraschungen führen, was bei XML-Formaten nicht auftritt, auch daher ist ein XML-Format wie XHTML erstmal die einfachere Wahl, um CSS zu lernen. Mehr dazu finden Sie im Buch XHTML.

Wenn wir nachfolgend von HTML reden, gilt dies natürlich sinngemäß immer auch für XHTML und umgedreht. Die Dateiendung einer XHTML-Datei lautet entweder .xhtml oder .xht.

Falls Sie also noch keine (X)HTML-Seite haben, legen Sie diese nun mit Ihrem Texteditor an und nennen sie "index.xhtml". Ein Prototyp für eine XHTML-Datei mit etwas Inhalt sieht etwa wie folgt aus:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      version="XHTML+RDFa 1.1"
      xml:lang="de">
<head>
   <title>Titel des Dokumentes</title>
</head>
<body>
  <h1>Dokumentüberschrift</h1>

  <p>Ein (sinnvoller) Gedanke könnte hier 
     in einem Absatz notiert werden.</p>
  <p>Weitere Absätze können natürlich folgen.</p>

  <h2>Kapitelüberschrift</h2>

  <p>Mit Überschriften kann das Dokument natürlich auch 
     in Kapitel oder Abschnitte aufgeteilt werden.</p>

</body>
</html>

Siehe dazu auch: Erste Seite mit XHTML.

CSS kann auch für nahezu beliebige XML-Formate verwendet werden. Allerdings dienen dort allgemein Stilvorlagenverarbeitungsanweisungen dem Zweck, auf Stilvorlagen zu verweisen. Das ist ein Mechanismus, der unabhängig vom verwendeten Format definiert ist, während einzelne XML-Formate wie XHTML oder SVG spezielle Elemente oder Attribute haben, die alternativ zu diesem allgemeinen Mechanismus verwendet werden können.

Einzelnachweise

Zurück zu Geschichte | Hoch zu CSS | Vor zu Einbau in HTML/XML