CSS (Cascading Style Sheets) ist neben HTML die zentrale Sprache des Webs: Während HTML die Struktur einer Seite festlegt, bestimmt CSS das Aussehen – Layout, Farben und Schriften. Eine CSS-Regel besteht aus Selektor, Eigenschaft und Wert. Einbinden kannst du CSS inline am Element, im style-Tag oder als ausgelagerte Datei im head. sketch.media erklärt die Grundlagen und übernimmt auf Wunsch CSS-Anpassungen und individuelle Joomla-Templates.
- CSS gestaltet das Aussehen einer Website (Layout, Farben, Schriften), HTML liefert die Struktur.
- Eine CSS-Regel besteht aus Selektor, Eigenschaft und Wert, abgeschlossen mit einem Semikolon.
- Farben gibst du als Klarname, RGB(a) oder Hex an (z. B. #fff, rgb(0,0,0)).
- CSS bindest du inline, im style-Tag oder als ausgelagerte .css-Datei im head ein – für Templates immer als eigene Datei.
- Mit der F12-Taste testest du CSS live im Browser.
Cascading Style Sheets (kurz CSS, deutsch „gestufte Gestaltungsbögen") dienen bei elektronischen Dokumenten zur optischen Gestaltung. CSS bildet zusammen mit HTML eine Kernsprache des World Wide Web und ist ein sogenannter „living standard", weil es kontinuierlich vom World Wide Web Consortium (W3C) weiterentwickelt wird.
Was kann CSS?
Mit CSS erstellst du Gestaltungsanweisungen, die vor allem im Zusammenspiel mit HTML eingesetzt werden. HTML legt die Struktur einer Website fest, CSS ist für das optische Erscheinungsbild verantwortlich. Die Intention dahinter: Darstellungsvorgaben von den Inhalten trennen. Eine Maschine kann ein Dokument auch ohne CSS semantisch erkennen und „lesen". Menschen dagegen besuchen Websites mit Browsern wie Chrome, Firefox oder Safari – und für sie bereitet CSS die Seite optisch auf. Layout, Farben und Typografie (Schriften) werden angepasst, also im Prinzip alles, was das Auge sieht.
Grundsätzlicher Aufbau einer CSS-Anweisung
Eine simple und häufig genutzte CSS-Anweisung ist das Einfärben des Hintergrunds einer Website. Jede Website hat ein body-Element (das die Seite komplett umschließt und als Hintergrund zu sehen ist). Dieses Element soll in unserem Beispiel die Farbe Blau erhalten:
body {
background-color: blue;
}
Kurze Anmerkungen zur Grundstruktur
- „body" heißt im Beispiel oben Selektor.
- Die geschweiften Klammern umschließen eine oder mehrere Anweisungen.
- „background-color" ist die Eigenschaft.
- „blue" ist der Wert.
- Einzelne Anweisungen schließt du immer mit einem Strichpunkt (Semikolon) ab.
Darstellung von Farben in CSS
Farben kannst du einerseits als englischen Klarnamen angeben – red steht für Rot, blue für Blau. Um einen eindeutigen Farbton zu erhalten, empfiehlt es sich andererseits, Farben in RGB, RGBa oder Hex anzugeben. An den Hex-Wert kommst du schnell über einen Online-Colorpicker oder kopierst den fertigen Code aus gängigen Bildbearbeitungstools (z. B. Photoshop oder GIMP).
Beispiele für Farbwerte
- #ffffff steht für Weiß und lässt sich als #fff abkürzen.
- #000000 steht für das dunkelste Schwarz.
- In RGB schreibt man Schwarz: rgb(0,0,0).
- In RGBa: rgba(0,0,0,1) – die letzte Stelle ist der Alpha-Wert (Transparenz). Halbtransparentes Schwarz wäre rgba(0,0,0,0.5).
Wenn du die Hintergrundfarbe deiner Website auf Weiß und die Schriftfarbe auf Schwarz setzen willst, brauchst du diese Schreibweise:
body {
background-color: #fff;
color: #000;
}
Wie baut man CSS in eine Website ein?
Es gibt mehrere Methoden, CSS in deine Website einzubauen. Bei allen arbeitest du direkt im HTML-Code.
1. Element-Stile (inline am Element)
Du kannst einem HTML-Element direkte CSS-Anweisungen über das style-Attribut mitgeben. Da die Regel direkt am Element angewendet wird, brauchst du keine geschweiften Klammern:
<body style="background-color: blue;"> <!-- Rest der Website --> </body>
2. CSS im <style>-Tag
Du kannst CSS auch direkt im HTML-Dokument einbinden, indem du ein style-Tag öffnest: <style> CSS HIER </style>. Diese beiden Methoden nutzt du nur für kleine Anpassungen.
3. CSS-Datei im <head> laden
Für ein komplettes Template lagerst du die CSS-Anweisungen besser in eine eigene Datei aus und lädst sie im HTML-Head:
<link type="text/css" rel="stylesheet" href="/ordner/template.css">
Dabei gehst du immer vom HTML-Dokument aus und bildest einen relativen Pfad zur CSS-Datei.
CSS im Browser testen
Jeder moderne Browser bietet Entwicklern die Möglichkeit, Live-Änderungen vorzunehmen. Im Chrome-Browser drückst du dazu die F12-Taste – die Entwicklertools öffnen sich (standardmäßig rechts). Mit dem Lupensymbol (oder Strg + Shift + C) wählst du ein einzelnes Element aus. Unter „element.style" schreibst du dann Anweisungen für das gewählte Element und siehst live, wie es z. B. eine blaue Hintergrundfarbe annimmt.
CSS in Joomla
In Joomla steuern Templates das Aussehen der Website. Den CSS-Aufbau deiner eigenen Joomla-Seite findest du direkt im Backend: Unter Erweiterungen → Templates klickst du in der Spalte „Template" auf den Namen des Templates. Anschließend siehst du alle Dateien; die CSS-Dateien liegen meist im Ordner „stylesheets", „styles" oder „css". Wählst du eine Datei aus, kannst du direkt Änderungen vornehmen.