Zurück zur ÜbersichtNächste SeiteLetzte Seite

Erste Schritte

Hinweis Bitte beachte die Konventionen dieser Dokumentation.

Voraussetzungen Kenntnisse im Umgang mit einem Computer und in HTML.

Werkzeuge Ein Computer und ein Editor.

Ziel Sicherer Umgang in der Anwendung von CSS.

Zielgruppe Anfänger von 10-100.

CSS (Cascading Style Sheets) dient der Formatierung von HTML-Seiten und anderen Dokumententypen durch mehrstufige Stilangaben. HTML ist eine Auszeichnungssprache, die Seiteninhalte hierarchisch strukturiert. CSS ist eine Formatierungssprache, die Seiteninhalte gestaltet.

Hinweis Die Abkürzung CSS wird in dieser Dokumentation im Singular verwendet.

HTML-Seite ohne CSS

CSS ist nicht zwingend notwendig, um Seiteninhalte lesbar zu machen, wie →CSS1 zeigt.

→CSS1: HTML-Seite ohne Stilangaben.

HTML-Code →CSS1

HTML-Seite mit integrierten CSS

Stilangaben sorgen nicht nur für die Formatierung, sondern auch für die Betonung und die bessere Lesbarkeit. Die Stilangaben können in der HTML-Seite an zentraler Stelle erfolgen wie in →CSS2.

→CSS2: HTML-Seite mit Stilangaben in der HTML-Seite.

Code →CSS2

Die Stilangaben können alternativ in den Tags erfolgen wie in →CSS3. Diese Möglichkeit widerspricht der Idee, Struktur und Gestaltung zu trennen und sollte nicht oder nur sparsam verwendet werden.

→CSS3: Das Erscheinungsbild von →CSS2 und →CSS3 ist identisch.

Code →CSS3

HTML-Seite mit referenzierten CSS

Dienen die Stilangaben mehreren HTML-Dateien, ist eine separate .css-Datei sinnvoller, die in jeder HTML-Seite referenziert ist.

→CSS4: HTML-Seite mit Stilangaben in der referenzierten »css_04.css«.

Code →CSS4

Eine abweichende Stilangabe zur referenzierten .css-Datei kann (grundsätzlich) in dem Tag der HTML-Seite erfolgen wie in →CSS5. Abweichende Stilangaben entsprechen dem Prinzip der Mehrstufigkeit {Kaskadierung}, sollten jedoch bevorzugt in der .css-Datei erfolgen wie in →CSS6.

→CSS5: HTML-Seite mit Stilangaben in der referenzierten »css_05.css« und in der HTML-Seite.

Code →CSS5

Neben den Tag-Selektoren kennt CSS auch Class- und ID-Selektoren. In →CSS6 dienen sie dazu, um bereits festgelegte Formatierungen zu überschreiben. Das ist das Prinzip der Mehrstufigkeit.

→CSS6: HTML-Seite mit Stilangaben in der referenzierten »css_06.css«.

Code →CSS6

Zurück zur ÜbersichtNächste SeiteLetzte Seite

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • it/css-01a/01.txt
  • Zuletzt geändert: 2019/04/10 21:54
  • von wh