Ä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 TastenkombinationStrg-Umschalt-I
.
Am besten lernt man CSS an Beispielen:
Weitere Informationen
- CSS-Einführung (englisch) – empfohlen!
- Cascading_Style_Sheets (Wikipedia)
- CSS auf selfhtml.org
- Kurzreferenz CSS
- W3C: Cascading Style Sheets (englisch)