CSS Kurs – Stylesheet anlegen

Dieser Beitrag ist Teil des CSS Kurses.

In diesem Beitrag erstellen wir unser erstes Stylesheet. Es gibt drei Möglichkeiten ein Stylesheet in eine Webseite einzubinden.
Sie könnten den Inhalt einfach in den head Bereich schreiben.

<style type="text/css"> </style>

Oder Sie speichern den Inhalt in einer zentralen Datei und binden diese in Ihre Seiten ein. Die Änderungen in dieser Datei würden sich dann in allen Webseiten wiederspiegeln.

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

Zuerst sagen wir wo unsere Datei zu finden ist. Als Nächstes definieren wir den Dateityp. Es ist eine Datei vom Typ Text mit dem Untertyp CSS. Diese Datei hat eine Beziehung (engl. relation) zu der vorhandenen Webseite, sie ist nämlich ihr Stylesheet. Dieses Stylesheet steuert die Darstellung der Inhalte vom Medium screen, das ist die Webseite am Bildschirm. Über dieses Attribut können Sie zwei verschiedene Layouts für Bildschirme und Drucker (media="print") erstellen.
Last but not least können Sie auch innerhalb der Elemente selbst einen Style als Attribut unterbringen. Die Einstellungen gelten dann nur für dieses eine Element.

<span style="text-decoration: underline;">Unterstrichener Text</span>

Unterstrichener Text

Dabei gilt der Grundsatz – je näher der Style an dem zu gestaltenden Element ist, desto wichtiger ist er. So übersteuert das Style als Attribut die Styles im head Bereich.

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.