Grundlagen von CSS

Cascading Style Sheets (CSS) geben Webdesignern ein leistungsstarkes Werkzeug an die Hand, das die komplexe Aufgabe der Websitepflege vereinfacht, und sie bieten anspruchsvolle Layout- und Designmöglichkeiten ohne Plug-ins, lange Downloadzeiten oder teure Zusatzprogramme.

Durch Verwendung von CSS können Webautoren die Darstellung Ihrer Webseiten vom Inhalt trennen und so die Gestaltung von HTML-Dokumenten effizienter organisieren.

Ein Vorteil von CSS ist der geringere Zeitaufwand für Design und Entwicklung, Aktualisierung und Pflege der Website. Durch die Änderung einer einzigen Regel kann das Aussehen Tausender Seiten beeinflusst werden. Bei herkömmlichen Designansätzen müsste jede Seite einzeln bearbeitet werden, doch CSS vereinfacht diese Aufgabe erheblich. So lässt sich die Verwaltung großer, anspruchsvoller Sites optimieren. Bei Nutzung von CSS können ganze Unternehmen einige wenige gemeinsame Stylesheets verwenden, sodass auch ohne ständige Aktualisierungen bei Änderungen die Einheitlichkeit der gesamten Site gewahrt bleibt.

Mit CSS können Sie ein Format für jedes HTML-Element definieren und dieses gleichzeitig auf alle oder mehrere Webseiten anwenden. Um eine globale Änderung vorzunehmen, müssen Sie dann lediglich die entsprechende CSS-Regel ändern und alle betroffenen Elemente der Website werden automatisch aktualisiert.

Es gibt verschiedene Möglichkeiten, CSS-Definitionen anzugeben: direkt in einem individuellen HTML-Element, im <head>-Bereich einer HTML-Seite oder in einer externen CSS-Datei. In ein HTML-Dokument können auch mehrere externe Stylesheets eingebunden werden. Unterschiedliche Stylesheets und Definitionen wirken in einer Kaskade zusammen und werden in der folgenden Rangfolge angewandt (der letzte Punkt in der Liste hat die höchste Priorität):

  1. Standardeinstellungen des Browsers, vom Benutzer festgelegt.

  2. Externes Stylesheet: ein separates Dokument mit CSS-Regeln, die für Elemente auf der gesamten Website gelten.

  3. Eingebettetes Stylesheet im <head>-Bereich einer Seite der Website. Diese Art von Stylesheet wird verwendet, wenn Formatdefinitionen nur für eine Seite relevant sind.

  4. Direkte Formatdefinitionen in individuellen HTML-Elementen. Diese haben die höchste Priorität, d. h., sie setzen die Definitionen im <head>-Bereich, in externen Stylesheets und in den Standardeinstellungen des Browsers außer Kraft.