CSS – Cascading Stylesheets

Ähnlich wie bei der Textverarbeitung die Gestaltung eines Dokuments über Formatvorlagen definiert wird, kann man für eine gesamte Website das Aussehen (Design, Gestaltung) über CSS steuern.

Voraussetzung für die Anwendung von CSS sind Grundkenntnisse in HTML.

  • CSS bedeutet Cascading Style Sheets
  • Styles definieren das Aussehen von HTML-Elementen.
  • Styles können für eine gesamte Site festgelegt werden.
  • CSS spart viel Arbeit.

Diese kleine Demo zeigt ein einfaches Beispiel. Im Internet gibt es weitere ähnliche Beispiele, eine bekannte Seite ist csszengarden.

HTML war nie dazu gedacht, ein Dokument zu gestalten. Die Tags in HTML legen nur die Art des Textinhalts fest – man strukturiert damit das Dokument inhaltlich.

Die Darstellung übernimmt der Browser entsprechend seinen Einstellungen, die verändert werden können.

Mit CSS kann man die gesamte Formatierung des HTML-Dokuments vornehmen. Diese Informationen können auch in einer externen Datei gespeichert werden. CSS legt also fest, wie einzelne HTML-Elemente angezeigt werden.

Es gibt drei Möglichkeiten CSS einzusetzen:

Inline-Styles

Sie werden direkt im HTML-Tag notiert.

Beispiel:

Der Text im Absatz wird rot dargestellt:

<p style="color: red;" >Absatztext</p>

Absatztext

Ist kein geeigneter Tag vorhanden, so wird der span-Tag verwendet:

<p>In diesem Absatz wird das Wort <span style="color: red;">ROT</span> rot geschrieben.</p>

In diesem Absatz wird das Wort ROT rot geschrieben.

Interne Styles

Die Festlegung wird im head-Bereich vorgenommen und gilt für das gesamte Dokument

Beispiel:

<style type="text/css">
p {
color: red;
}
</style>

Alle Absätze im aktuellen HTML-Dokument werden rot eingefärbt.

Externe Styles

Sie Styledefinitionen werden in einer Textdatei mit der Erweiterung .css gespeichert. Im Head-Bereich wird die Datei dann eingebunden:

<link rel="stylesheet" href="style.css" type="text/css">

Die Einstellungen wirken dann auf jede Datei, in die die Datei style.css eingebunden ist. Diese Form ist zu bevorzugen!

Wie schreibt man eine CSS-Datei?

  • Im Prinzip reicht ein einfacher Texteditor. Empfehlenswert ist syntax highlighting wie bei Notepad++.
  • In aktuellen Browser-Programmen (Firefox, Edge und Chrome) stehen Werkzeuge für
    Webentwickler zur Verfügung – mit der Tastenkombination Strg-Umschalt-I.

Am besten lernt man CSS an Beispielen:

Weitere Informationen