CSS – Infos und Verwendung von Cascading Style Sheets

Dank CSS bist Du dazu in der Lage, Deine Website professionell, seitenübergreifend und dennoch einfach anzupassen. Dazu gehören beispielsweise das Layout, die Farbe und Schriftarten.

In diesem Beitrag gehen wir auf die Vorteile von CSS ein, nennen Anwendungsbeispiele und stellen den Aufbau von CSS-Anweisungen vor. Gleichzeitig erfährst Du, wie die Einbindung in Deine Website erfolgt und welcher Zusammenhang dabei zu HTML-Elementen besteht.

Was ist CSS?

Bei CSS (Cascading Style Sheets) handelt es sich um eine Auszeichnungssprache. Hierin ist definiert, wie das Design von elektronischen Dokumenten (z.B. einer HTML-Seite) gestaltet ist. Dabei kommen spezielle CSS-Elemente (Anweisungen) zum Einsatz.

Hierin sind wiederum Informationen enthalten, die beispielsweise angeben, welche Schriftart in welchem Bereich Verwendung findet und wie groß die Schrift ist. Kommt CSS zum Einsatz, entfällt also die Verwendung von entsprechenden HTML-Codes für das Design.

Mittlerweile findet CSS auf jeder modernen Website Verwendung. Denn sie sind übersichtlich gehalten, schlank und sorgen somit für schnelle Ladezeiten.

Vorteile und Anwendungsbeispiele im Überblick

Im Folgenden sind entscheidende Vorteile von Cascading Style Sheets aufgeführt:

• Zahlreiche Gestaltungsmöglichkeiten, die HTML nicht bietet. Hierdurch ergibt sich ein ansprechendes und nutzerfreundliches Design.
• Zentrale Steuerung von zahlreichen Elementen auf einer Website. Dadurch müssen Formatierungen zum Beispiel nicht für jedes Element einzeln vorgenommen werden. Das spart Arbeit und Zeit.
• Die Speicherung von Design-Informationen kann in sowohl internen als auch externen Stylesheets erfolgen. Dadurch ist sie auch auf anderen Dokumenten anwendbar.
• Im Gegensatz zu HTML ist CSS-Code in Stylesheets zudem schlank und übersichtlich gehalten. Das sorgt für schnelle Ladezeiten und ist somit benutzerfreundlich und ein positives Signal für Suchmaschinen.

Und nun kommen noch einige Anwendungsbeispiele:

• CSS deckt alle grundlegenden Formatierungen und Darstellungen ab. Dazu gehören beispielsweise Farben und Formen von Elementen, aber auch Typografien.
• Zudem sind hiermit anspruchsvollere und komplexere Designelemente möglich. So beispielsweise:
  • Zuweisung von Hintergrundfarben und Bildern.
  • Einfügen von Animationen.
  • Sichtbarkeit und Darstellung von Elementen je nach Medium und Gerät eines Websitebesuchers.
  • Einbindung von Boxen, Bereichen mit Rahmen und festgelegten Abständen.
  • Überfließen (overflow) – hier ist festgelegt, wie sich Elemente verhalten sollen, die mehr Platz benötigen.
  • Positionierung von Elementen.
  • Anordnung und Darstellung von Elementen, je nachdem, mit welchem Internetbrowser eine Website geöffnet wird -> für eine fehlerfreie Ausgabe und Anzeige.

Aufbau von CSS-Anweisungen

In einer CSS-Anweisung ist genau angegeben, welche Eigenschaften ein Design-Element hat. Hierfür kommen Werte zum Einsatz. Sie legen beispielsweise fest, welche Struktur Elemente haben, wie groß sie sind und wie sie aussehen sollen.

Bestandteile :

• Selektor
• Deklaration
  • Eigenschaft 1
  • Wert 1
  • Eigenschaft 2
  • Wert 2

Beispiel:

h2 {color:red; font-size:14px;}

In diesem Falle wird die Überschrift H2 in der Farbe Rot und Schriftgröße 14 ausgegeben.

Einbau bzw. Einbindung in eine Website

Möchtest du CSS in deine Website einbinden, stehen drei Möglichkeiten zur Auswahl:

• Interne Stylesheets: Hierbei werden sämtliche CSS-Anweisungen direkt im HTML-Dokument eingetragen und gespeichert. Wichtig ist dabei, dass alle Anweisungen nur für die jeweilige Seite bzw. das Dokument und NICHT für die gesamte Website gelten.
• Externe Stylesheets: Möchtest Du hingegen Änderungen schnell mit einem Befehl auf sämtlichen Dokumenten bzw. Unterseiten vornehmen? Dann ist das externe Stylesheet die richtige Wahl. Hier sind alle Anweisungen in einer externen CSS-Datei gespeichert. Die Einbindung in deine Website erfolgt mittels link-Tag.
• Inline-Styles: Sie ähnelt dem internen Stylesheet, da alle CSS-Anweisungen im HTML-Dokument untergebracht sind. Allerdings mit dem Unterschied, dass sie sich direkt am Anfang des Start-Tags befinden. Dementsprechend sind sie für keine weiteren Elemente anwendbar und nicht übergreifend.

Welcher Zusammenhang besteht zwischen CSS- und HTML-Elementen?

Ganz einfach! Während HTML für die Struktur einzelner Elemente verantwortlich ist, übernimmt CSS deren optische Gestaltung.

Ein Beispiel:

Möchtest du eine Tabelle und eine Liste in deiner Website einbinden, erfolgt deren Anweisung und Struktur mittels HTML. Du erstellst hiermit sozusagen das Grundgerüst. Mit CSS verpasst du dem Ganzen anschließend das gewünschte Design und legst fest, wie die Elemente optisch dargestellt werden sollen. Beide ergänzen sich also und stehen gemeinsam in Verbindung.

Des Weiteren bilden Cascading Style Sheets mittlerweile die Grundlage eines HTML-Dokuments. Denn mit deren Hilfe wird das Grundgerüst einer Internetseite durch Boxen erstellt, in denen deren Größe und Abstände genau definiert sind. Dazu gehören unter anderem Elemente wie margin (Außenabstand), padding (Innenabstand) und border (Rahmen). Hiermit sind also beliebige Anpassungen und Formatierungen möglich.