Mini-Tutorial Cascading Style Sheets (CSS)

© Silvia Rothen, rothen ecotronics, Bern, Schweiz

Autorin: Dr. Silvia Rothen, rothen ecotronics, Bern, Schweiz
Letzte Überarbeitung: 13.05.18

Mit Cascading Style Sheets lassen sich Formatierungen von Web-Seiten oder ganzen Web Sites zentral verwalten. Die konsequente Anwendung von Style Sheets führt ausserdem zu kürzeren Textseiten und damit geringeren Ladezeiten. 

Diesen Vorteilen gegenüber steht, dass CSS-Elemente nicht nur in verschiedenen Browsern (Netscape, Internet Explorer, Opera) sondern auch in verschiedenen Versionen desselben Browsers unterschiedlich oder gar nicht implementiert sind, was die Nützlichkeit dieser Technologie wieder einschränkt.

Inhaltsverzeichnis

Einleitung

CSS oder Cascading Style Sheets sind für eine Webseite dasselbe wie Formatvorlagen für ein Dokument in einer Textverarbeitung, d.h. eine Möglichkeit, Formatierungen einzelner Seitenelemente, d.h. Schriften, Schriftschnitte, Farben und Hintergründe, statt auf jedem Element einzeln in einer zentralen Datei zu verwalten. Wenn ein Web Site konsequent Style Sheets verwendet, dann lassen sich Änderungen in der Gestaltung, z.B. ein anderes Farbschema, sehr einfach und zeitsparend für den ganzen Web Site vornehmen, indem man die CSS-Datei überarbeitet. Ein weiterer Vorteil ist, dass durch die Auslagerung der Formatierungen die Seitengrösse der einzelnen Seiten sinkt, was zu kürzeren Ladezeiten führt.

Um CSS-Dateien erstellen zu können, muss man zumindest die wichtigsten HTML-Tags kennen, z.B. <body>, <p>, <td>, <h1> etc.

Zurück zum Inhaltsverzeichnis

Vorgehen

Grundlegende Vorgehensschritte

  1. Auszeichnung des Textes mit reinen HTML-Tags: Überschriften z.B. nur mit H1 formatieren, nicht aber Font bestimmen; Tabellen keine Hintergrundfarben oder Schriften zuweisen etc.
  2. Erstellung der CSS-Datei oder eventuell der CSS-Dateien für Gruppen von Seiten, welche dieselbe Gestaltung erhalten
  3. Verknüpfung der einzelnen Seiten mit den dazugehörigen Stylesheets

Format der CSS-Datei

CSS-Dateien sind reine Textdateien, die sich einem beliebigen Texteditor erstellen lassen. Eine CSS-Datei besteht aus folgenden Elementen:

Bei den Schriften hat man bekanntlich das Problem, dass die entsprechenden Formatierungen nur angezeigt werden, wenn die Schrift auf dem Computer der Benutzer/innen vorhanden sind. CSS bietet hier insofern einen Ausweg, als dass man mehrere Schrifttypen angeben kann. Konkret ist das eine Anweisung an den Browser, den ersten Schrifttyp der aufgeführten Schriften anzuzeigen, der auf dem Computer vorhanden ist. Dabei gibt es generische Schrifttypen wie sans-serif oder serif , die zumindest den Charakter des Schriftbildes sicherstellen, wenn keine der mit Namen genannten Schriften vorhanden ist.

Insgesamt ergibt das eine CSS-Datei mit beliebigem Namen und der Dateiendung .css, die z.B. so aussieht:
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0,0,0);
  font-size: small
}
td {
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0,0,0);
  font-size: small
}
h1 {
  font-family: Futura Lt BT, Arial, Helvetica, sans-serif;
  font-size: large
}
a:visited {
  color: gray
}
</style>

Verknüpfung der Seiten mit den Style Sheets

Es gibt zwar die Möglichkeit, Stylesheets innerhalb einer Seite entweder direkt bei den einzelnen Tags oder als embedded style sheet im Head-Teil einer HTML-Datei zu verwenden, doch nützlich ist CSS eigentlich nur bei einer zentralen Verwaltung der Formatierungen in externen CSS-Dateien.

Die Einbindung solcher externer CSS-Dateien erfolgt im Head-Teil einer HTML-Datei mit einem speziellen Link, z.B.

<link REL="stylesheet" HREF="gruppe1.css" TYPE="text/css">

Unter Frontpage 98 muss ein solcher Link in der HTML-Ansicht von Hand eingegeben werden! Der Kopfteil einer Webseite sieht danach etwa so aus:

<html>
<head>
<link REL="stylesheet" HREF="gruppe1.css" TYPE="text/css">
<title>meinefirma ag: Firmenportrait</title>
</head>
<body>
...

Unter Frontpage 2000 können über das Menü Format - Links zu Stylesheet einzelne oder alle Seiten eines Webs gleichzeitig mit einer CSS-Datei verbunden werden.

Klassen

Mit CSS lassen sich nicht nur einzelnen Tags Formatierungen zuweisen, sondern über sogenannte Klassen kann man innerhalb des gleichen Tags noch andere Formatierungen zuweisen. Damit das wirksam wird, muss man in der CSS-Datei Klassenselektoren definieren. Die Syntax dafür ist .klassenname. Ausserdem müssen die betroffenen Tags mit dem Attribut class="klassenname" versehen werden, z.B. <p class="eingezogen">.

Ein Stylesheet mit einer Klasse sieht z.B. so aus:
<STYLE>
BODY
{
COLOR: green
}
.eingezogen
{
COLOR: red;
TEXT-INDENT: 100pt
}
</STYLE>

In Frontpage 98 weist man einem HTML-Tag eine Klasse zu, indem man zuerst die Seite manuell mit dem Stylesheet verbindet und dann im Dialogfenster für Absatz- oder Zeichenformate die Schaltfläche Formatvorlage anklickt und im Register Class auf die gewünschte Klasse im Listenfeld klickt. Unter Frontpage 2000 gibt es diese Schaltfläche auch, allerdings aber nicht bei allen HTML-Tags, sondern nur bei bestimmten, z.B. Tabellen und Formularfeldern.

Selektoren

Wie in JQuery gibt es auch in CSS Selektoren, mit denen man in der CSS-Datei die Elemente bezeichnet, welche formatiert werden sollen. Die grundlegende Syntax ist "Selektor - durch geschweifte Klammern abgegrenzter Block - innerhalb der Klammern mit ; getrennt die Formatierungen, z.B.

p {
  color: red;
  font-weight: bold;
}

Erklärung HTML CSS
HTML-Tag <p> p {...}
Id eines Tags <div id="content"> #content {...}
Klasse eines Tags <div class="menu"> .menu {...}

Kombinationen
Tag mit Klasse <h1 class="sidebar"> h1.sidebar {...}
Tag mit Id <div id="content"> div#content {...}
Tag mit Pseudoklasse <a href=".."> a:hover {...}
mehrere Tags mit gleicher Formatierung <h1>...</h1><h2>... h1, h2 {...}
Nachkomme (irgendwo innerhalb, descendent) <div id="x"><span><a... div a {...}
Kind (direkt, child) <div id="x"><span><a.. div > span {...}
Nächstes Geschwister-Tag (adjacent sibling) <h1>x</h1><p>...</p> h1+p {...}
Tag mit Attribut <img src="bullet.gif"... img[src]
Tag mit Attribut und Wert <img src="bullet.gif"... img[src="bullet.gif"]

Zurück zum Inhaltsverzeichnis

Was ist mit "Cascading" gemeint?

Grundprinzip

Cascading nennt sich die Technologie, weil man nicht für jedes mögliche HTML-Element Formatierungen definieren muss, sondern Elemente, die nicht definiert sind, zumindest theoretisch (siehe unten) automatisch die Formatierungen der sie umschliessenden Elemente erben. Schriftart, Farbe und Grösse kann man damit einmal auf dem den sichtbaren Teil der Seite umschliessenden <body>-Tag definieren.

Realität

Theoretisch ist CSS eine sehr intelligente Technologie. Praktisch ist es so, dass es stark von Browser (Netscape oder IE) und Browsergeneration (2, 3, 4, 5 oder 6) abhängt, ob und wie ein bestimmtes CSS Element umgesetzt wird. Im Internet gibt es Tabellen, die detailliert darüber Auskunft geben, welches Element von welchem Browser unterstützt wird. Auch bei den Elementen, die unterstützt werden, ist es nicht immer einfach, weil sie auf verschiedenen Browsern nicht genau dasselbe bewirken (z.B. Ränder), was einen insbesondere beim pixelgenauen Positionieren zur Verzweiflung treiben kann. 

Am schlimmsten ist es um das Cascading bestellt. Während der Internet Explorer den Standard einigermassen sauber umsetzt, ist dies bei Netscape nicht so. Insbesondere erben Zellen von Tabellen nicht die Formatierungen der sie umschliessenden Elemente <html>, <body> oder <p>, so dass man diese Formatierungen wegen Netscape auf jeden Fall auf dem Zellelement <td> noch einmal definieren muss!

Zurück zum Inhaltsverzeichnis

Tools

Arbeitet man regelmässig mit CSS, dann empfiehlt es sich, die CSS-Dateien nicht von Hand in einem Texteditor zu erstellen, sondern mit einem Tool. Die Entwicklungsumgebung Visual Interdev von Microsoft unterstützt u.a. die Erstellung von CSS sehr komfortabel.

Zurück zum Inhaltsverzeichnis

Ausblick, Links

Es ist möglich, dass die CSS-Technologie in absehbarer Zeit an Bedeutung verlieren wird, weil sie möglicherweise von der Kombination XML und XSL (eXtended Markup Language und eXtended Stylesheet Language) abgelöst wird. XML/XSL ist sehr viel mächtiger und flexibler als CSS. Weil XSL als Neuentwicklung besser standardisiert ist und auch serverseitig ablaufen kann, entfallen die Kompatibilitätsprobleme, welche die breite Anwendung von CSS einschränken. Da XSL aber eine Programmiersprache ist und es z.Z. noch keine WYSIWYG-Tools dafür gibt, ist es auch möglich, dass CSS noch lange Zeit mit diesen Technologien koexistieren wird, weil die Handhabung von CSS für Nichtprogrammierer/innen einfacher ist als jene von XSL.

Links zu CSS, XML, XSL und zum Web-Design generell finden Sie in der Webdesign-Linkliste in der Unterkategorie "Programmiersprachen / Techniken".

Diese Webseite wurde am 21.05.18 um 17:10 von rothen ecotronics erstellt oder überarbeitet.

Impressum

Zurück zu rothen ecotronics

Printed on 100% recycled electrons!