Was ist CSS und wofür wird es benutzt?

: Kategorie: Ratgeber; 19. Juli 2018; 4.395
ca. 4 Minuten

Cascading Style Sheets (kurz CSS, dt. "gestufte Gestaltungsbögen") dienen bei elektronischen Dokumenten zur optischen Gestaltung. CSS bildet zusammen mit HTML eine Kernsprache des World Wide Webs und ist ein sogenannter "living standard", weil es kontinuierlich vom World Wide Web Consortium (W3C) weiterentwickelt wird.

Was kann CSS?

Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem im Zusammenspiel mit HTML eingesetzt werden. HTML legt die Struktur einer Webseite fest und CSS ist für das optische Erscheinungsbild verantwortlich. Die Intension dabei war es, die Darstellungsvorgaben von den Inhalten zu trennen. Eine Maschine kann ohne CSS ein Dokument semantisch erkennen und "lesen". Webseiten werden von Menschen, also "Nicht-Maschinen", mithilfe von Browsern wie z.B. Chrome, Firefox, Safari usw. besucht. CSS dient dazu, eine Seite optisch aufzubereiten. Bei der Darstellung der Inhalte werden zum Beispiel das Layout, die Farben und die Typografie (Schriften) angepasst, also im Prinzip alles, was das Auge sieht.

Grundsätzlicher Aufbau einer CSS Anweisung

Eine simple und häufig benutzte CSS-Anweisung ist zum Beispiel das Einfärben des Hintergrunds einer Webseite. Jede Webseite hat ein body-Element (Element, das die Webseite komplett umschließt und das als Hintergrund zu sehen ist). Dieses Element soll nun in unserem Beispiel die Farbe blau erhalten.

body {
background-color: blue;
}

Kurze Anmerkungen zur CSS Grundstruktur:

"body" wird im Beispiel oben Selektor genannt
die geschweiften Klammern umschließen eine oder mehrere Anweisungen (ein Beispiel für mehrere Anweisungen folgt weiter unten)
"background-color" ist die Eigenschaft
"blue" ist der Wert
Einzelne Anweisungen müssen immer mit einem Strichpunkt abgeschlossen werden

Darstellung von Farben in CSS

Farben können einerseits in einem Klarnamen in Englisch verwendet werden. So steht red zum Beispiel für Rot und blue für Blau. Um einen eindeutigen Farbton zu erhalten, empfiehlt es sich andererseits, die Farben in RGB, RGBa oder Hex anzugeben. Um möglichst schnell an den Hex Wert für eine Farbe zu kommen, kann man einfach einen Online-Colorpicker verwenden oder den fertigen Code aus gängigen Fotobearbeitungstools (z.B. Photoshop oder GIMP) bzw. Browsererweiterungen kopieren.

Beispiele für Farbwerte:

#ffffff steht für weiß und kann auch abgekürzt als #fff eingegeben werden
#000000 steht für das dunkelste schwarz
In RGB schreibt man schwarz: rgb(0,0,0)
In RGBa schreibt man schwarz: rgba(0,0,0,1), wobei die letzte Stelle für den Alpha-Wert (also Transparenz) steht, d.h. um ein halbtransparentes Schwarz zu verwenden, würde man rgba(0,0,0,0.5) schreiben

Wenn man nun die Hintergrundfarbe seiner Webseite, wie im Beispiel oben, auf weiß und gleichzeitig die Schriftfarbe auf schwarz setzen will, braucht man folgende Schreibweise:

body {
background-color: #fff;
color: #000;
}

Wie baut man CSS in eine Webseite ein?

Es gibt einige verschiedene Methoden, wie man CSS in seiner Webseite einbauen kann. Man muss bei allen Methoden direkt im HTML-Code arbeiten und dort Änderungen durchführen.

1. Element Stile

Um unser Beispiel oben aufzugreifen: Man kann im HTML direkte CSS-Anweisungen an ein Element hinzufügen. Für das Body-Element würde dies dann so aussehen:

Da die Regel direkt beim Element angewendet wird, müssen keine geschweiften Klammern verwendet werden. Die einzelnen Regeln werden einfach direkt in style=" " geschrieben

2. Inline CSS

Man kann in einem HTML-Dokument einfach CSS einbinden, indem man ein style-Tag öffnet. Dies umschließt die obere Regel mit <style> CSS HIER </style>.

Diese beiden Methoden werden nur für kleine CSS-Anpassungen verwendet. Will man zum Beispiel ein komplettes Template für Joomla schreiben, dann ist es notwendig, die CSS-Anweisungen in eine eigene CSS-Datei auszulagern und im HTML-Head in die gewünschte HTML-Datei zu laden.

3. CSS-Datei im head laden

Um ein Stylesheet, also eine CSS-Datei, zu laden, wird folgender Befehl verwendet:

Es muss immer vom HTML-Dokument ausgegangen werden und ein relativer Pfad zur CSS-Datei gebildet werden.

CSS im Browser testen

Die folgende Möglichkeit bezieht sich auf den Chrome Browser. Jeder Browser hat mittlerweile die Option für Entwickler, direkt Live-Änderungen vorzunehmen. Um direkt im Browser das obige Beispiel zu testen, drückt man in Chrome die F12-Taste. Anschließend öffnen sich die Entwicklungstools, standardmäßig auf der rechten Seite. Normalerweise sollte direkt der "body" ausgewählt sein. Man kann jedoch mit dem Lupensymbol (oder STRG+SHIFT+C) direkt ein einzelnes Element auswählen. Nun sind im Feld unten CSS-Regeln zu erkennen. Man kann hier unter "element.style" für das aktuell ausgewählte Element Anweisungen schreiben.

Wenn man jetzt unser Beispiel von oben an dem gewählten Element auspropiert, sollte man live im Browser sehen, wie das Element eine blaue Hintergrundfarbe annimmt.

CSS in Joomla

In Joomla steuern Templates das Aussehen der Webseite. Wer gerne mal den CSS-Aufbau seiner eigenen Joomla-Webseite sehen will, kann das relativ einfach direkt im Backend (Administrator-Bereich) finden. Dazu muss man unter Erweiterungen -> Templates in der rechten Spalte "Template" auf den Namen des Templates klicken. Anschließend sieht man alle Dateien des verwendeten Templates. Die CSS-Dateien liegen meist im Ordner "stylesheets", "styles" oder "css". Wenn man eine Datei auswählt, kann man direkt auch Veränderungen vornehmen.