CSS steuert, wie deine Website aussieht. Farben, Schriften, Abstände, Layout: Alles ist CSS. Hier erfährst du, was es ist, wie es funktioniert und warum es für deine Marke wichtig ist.
Hast du schon einmal zwei Websites besucht, die fast denselben Inhalt haben, aber völlig anders aussehen? Die eine wirkt gepflegt, sauber und leicht lesbar. Die andere wirkt überladen, altmodisch und schwer zu bedienen. Die Inhalte sind vielleicht identisch. Den Unterschied im Aussehen macht CSS.
Im vorigen Kapitel hast du gelernt, dass HTML einer Webseite ihre Struktur gibt. Es sagt dem Browser, was alles ist: eine Überschrift, ein Absatz, ein Bild, ein Button. Aber HTML allein hat keinen Stil. Ohne CSS würde jede Website wie ein schlichtes Textdokument aussehen. CSS macht aus dieser Struktur ein visuelles Erlebnis.
Was ist CSS?
CSS steht für Cascading Style Sheets. Es ist eine Sprache, die die visuelle Darstellung einer Webseite steuert. Während HTML sagt „das ist eine Überschrift“, sagt CSS „diese Überschrift soll dunkelblau sein, 32 Pixel hoch und diese bestimmte Schrift nutzen“. Während HTML sagt „das ist ein Button“, sagt CSS „dieser Button soll grün sein, abgerundete Ecken haben und 20 Pixel Abstand zum Text darüber halten“.
Jede visuelle Entscheidung auf einer Website, also Farben, Schriften, Grössen, Abstände, Layouts, Hover-Effekte und Hintergründe, kommt aus CSS. Es ist die Gestaltungsebene des Webs.
Wie funktioniert CSS?
CSS spricht HTML-Elemente an und wendet Stilregeln auf sie an. Du sagst CSS, welches Element gestaltet werden soll, und beschreibst dann, wie es aussehen soll. Diese Regeln stehen in einer eigenen Datei, die der Browser zusammen mit dem HTML lädt. Liest der Browser beide Dateien zusammen, wendet er die Stile auf die passenden Elemente an und zeigt die fertige Seite.
Der Teil „Cascading“ im Namen beschreibt, wie CSS mit Konflikten umgeht. Gelten mehrere Stilregeln für dasselbe Element, folgt CSS einer festen Rangfolge, um zu entscheiden, welche Regel gewinnt. Spezifischere Regeln überschreiben allgemeinere. So haben Designer genaue Kontrolle darüber, wie jedes Element auf der ganzen Website aussieht.
Arten von CSS
CSS kann auf drei Arten geschrieben werden. Jede funktioniert, aber nicht jede passt für jede Situation gleich gut.
1. Inline-CSS
Inline-CSS steht direkt an einem einzelnen HTML-Element. Es wirkt nur auf dieses eine Element und überschreibt alle anderen Stile. Es ist nützlich für schnelle Einzeländerungen, wird aber bei grösseren Websites zum Problem. Wenn du eine Farbe ändern willst, die an 50 Elementen steht, musst du sie an 50 Stellen statt an einer ändern.
2. Internes CSS
Internes CSS steht in einem Style-Tag in der HTML-Datei selbst, meist am Anfang der Seite. Es gilt nur für diese eine Seite. Das ist in Ordnung für einzelne Seiten oder kleine Projekte, bedeutet bei einer ganzen Website aber, dass sich dieselben Stile auf jeder Seite wiederholen. Änderst du etwas, musst du jede Datei einzeln anpassen.
3. Externes CSS
Externes CSS liegt in einer eigenen Datei, die mit deinen HTML-Seiten verknüpft ist. Das ist der Standard für jede richtige Website. Du definierst alle Stile einmal in einer Datei, und jede Seite, die darauf verweist, übernimmt sie. Änderst du eine Farbe oder Schrift an einer Stelle, wird sie überall sofort aktualisiert. Es ist sauberer, lädt schneller und ist viel leichter zu pflegen. Fast jede gut gebaute Website nutzt externes CSS als Grundlage.
Was CSS auf deiner Website steuert
CSS betrifft fast jeden visuellen Aspekt deiner Website. Das sind die wichtigsten Bereiche.
Farben und Hintergründe
Jede Farbe auf deiner Website, ob Textfarbe, Hintergrundfarbe, Button-Farbe oder Rahmenfarbe, wird über CSS festgelegt. Deine Markenfarben gelten einheitlich auf der ganzen Website, weil du sie einmal in CSS definierst und überall wiederverwendest.
Typografie
Welche Schrift deine Website nutzt, wie gross Überschriften und Fliesstext sind, wie viel Abstand zwischen den Zeilen liegt und ob Text fett oder kursiv ist: All das ist CSS. Gute Typografie macht Inhalte leichter lesbar und stärkt deine Markenidentität.
Layout und Abstände
Wie Spalten angeordnet sind, wie viel Platz zwischen Abschnitten liegt, wie breit der Inhaltsbereich ist und wo die Seitenleiste erscheint: CSS steuert all das. Layout-Regeln legen die Gesamtstruktur jeder Seite fest, über das hinaus, was HTML bietet.
Responsives Verhalten
CSS macht auch Responsive Design möglich. Media Queries in CSS sagen dem Browser, je nach Bildschirmgrösse andere Stile anzuwenden. Auf dem Desktop erscheinen Inhalte vielleicht in drei Spalten. Auf dem Handy ordnet CSS diese Spalten untereinander an, damit alles auf den kleineren Bildschirm passt.
Animationen und Effekte
Hover-Effekte auf Buttons, sanfte Übergänge zwischen Abschnitten und Einblenden von Inhalten beim Scrollen: Das ist alles CSS. Sie bringen Bewegung und Feinschliff ins Erlebnis, ohne dass JavaScript nötig ist.
Was das für deine Website als Markeninhaber bedeutet
Du musst kein CSS schreiben, um eine gut gestaltete Website zu haben. Website-Builder erledigen das für dich. Wenn du eine Vorlage wählst, deine Markenfarben festlegst und deine Schriften einstellst, übersetzt die Plattform diese Entscheidungen im Hintergrund in CSS-Regeln. Jede Änderung im visuellen Editor erzeugt CSS, das der Browser liest und anwendet.
Für dich zählt, dass das CSS deiner Plattform sauber und effizient ist. Schweres oder aufgeblähtes CSS bremst das Laden deiner Seiten. Gut geschriebenes CSS hält deine Website schnell und auf jeder Seite einheitlich. Der Website-Builder von WEMASY erzeugt automatisch optimiertes CSS, damit deine Design-Entscheidungen sauber greifen, ohne deine Seiten unnötig zu belasten. Wie das mit der Leistung zusammenhängt, liest du unter Was ist Website-Geschwindigkeit und warum ist sie wichtig.
Häufig gestellte Fragen
Muss ich CSS lernen, um eine Website zu bauen?
Nein. Mit einem Website-Builder steuerst du Look und Feel deiner Website über einen visuellen Editor. Die Plattform schreibt das CSS für dich. Die Grundlagen von CSS zu kennen hilft, wenn du verstehen willst, warum Dinge so aussehen, wie sie aussehen. Du musst aber keine einzige Zeile schreiben, um mit dem Website-Builder von WEMASY eine professionelle Website zu bauen.
Was ist der Unterschied zwischen CSS und HTML?
HTML legt die Struktur einer Webseite fest, also was jeder Inhalt ist. CSS legt fest, wie er aussieht. HTML erstellt eine Überschrift. CSS gibt dieser Überschrift eine bestimmte Farbe, Grösse und Schrift. Beide arbeiten zusammen: HTML liefert die Elemente, CSS gestaltet sie.
Kann CSS die Website-Geschwindigkeit beeinflussen?
Ja. Grosse, ineffiziente CSS-Dateien machen jeden Seitenaufruf schwerer. Nicht optimiertes CSS kann ausserdem verhindern, dass der Browser die Seite darstellt, bis er alle Stile gelesen hat. Das verzögert, wie schnell Besucher deine Inhalte sehen. Sauberes, schlankes CSS lädt schneller. Deshalb zählt eine gut programmierte Plattform für die Website-Geschwindigkeit.
Was ist ein CSS-Framework?
Ein CSS-Framework ist eine fertig geschriebene Sammlung von CSS-Regeln, die Entwickler als Ausgangspunkt nutzen, statt alles von Grund auf zu schreiben. Es beschleunigt die Entwicklung und liefert von Haus aus einheitliche, getestete Stile. Die meisten Website-Builder nutzen intern ein CSS-Framework, damit ihre Vorlagen schon gut aufgebaut und zuverlässig sind.
Kannst du mit CSS dafür sorgen, dass deine Website auf Desktop und Handy gut aussieht?
Ja, und das ist sogar eine der wichtigsten Aufgaben von CSS. Mit Media Queries wendet CSS je nach Bildschirmgrösse andere Stile an. Auf einem breiten Desktop-Bildschirm erscheinen Inhalte vielleicht in mehreren Spalten mit grossen Bildern. Auf dem Handy werden dieselben Spalten untereinander angeordnet, Schriftgrössen passen sich an, und die Abstände werden enger, damit alles auf den kleineren Bildschirm passt. So funktioniert Responsive Design, und es läuft komplett über CSS, ohne eine eigene mobile Version deiner Website.
Was passiert, wenn CSS auf einer Seite nicht lädt?
Lädt die CSS-Datei nicht, wird die Seite trotzdem angezeigt, aber ohne Gestaltung. Du siehst schlichten Text und Bilder ohne Farben, Schriften oder Layout. Alles steht untereinander in der Reihenfolge des HTML. Es sieht kaputt aus, aber die Inhalte sind technisch noch da. Auf gut gepflegten Plattformen kommt das selten vor, es zeigt aber gut, wie viel visuelle Arbeit CSS auf jeder Seite leise erledigt.