CSS
CSS bestimmt, wie eine Webseite aussieht. Farben, Schriften, Abstände, Layout: alles, was Sie visuell wahrnehmen, wird durch CSS gesteuert.
- Cascading Style Sheets
Was ist CSS?
CSS steht für Cascading Style Sheets. Es ist eine Stylesheet-Sprache, die beschreibt, wie HTML-Elemente im Browser dargestellt werden sollen. Während HTML die Struktur einer Seite definiert, ist CSS für das visuelle Erscheinungsbild zuständig.
Ein einfaches Beispiel: HTML sagt «hier ist eine Überschrift». CSS sagt «diese Überschrift soll blau sein, 32 Pixel gross und fett».
h1 {
color: #1a4f8a;
font-size: 32px;
font-weight: bold;
}Das Prinzip dahinter ist die Trennung von Inhalt und Darstellung. HTML und CSS sind bewusst getrennte Sprachen, damit das Design einer Seite geändert werden kann, ohne den Inhalt anzufassen.
Funfact
Der Name «Cascading» beschreibt, wie CSS-Regeln ineinandergreifen: Mehrere Regeln können dasselbe Element betreffen, und CSS entscheidet nach einer festen Prioritätsreihenfolge, welche gilt. Das ermöglicht ein flexibles, schichtweises Designsystem.
Warum ist CSS für meine Webseite wichtig?
Ohne CSS würden alle Webseiten gleich aussehen: schwarzer Text auf weissem Hintergrund, ohne Abstände, ohne Farben, ohne Struktur. CSS macht aus einem technischen Dokument eine professionelle, markenkonforme Webseite.
Gut geschriebenes CSS hat direkte Auswirkungen auf die Nutzererfahrung: Eine Seite, die klar strukturiert, gut lesbar und auf dem Smartphone genauso nutzbar ist wie auf dem Desktop, hält Besucher länger und führt zu mehr Kontaktanfragen.
Wenn Sie Ihre Webseite über ein CMS wie admiralCX pflegen, bearbeiten Sie CSS in der Regel nicht direkt. Das Erscheinungsbild wird einmalig professionell gestaltet und bleibt dann konsistent, egal welche Inhalte Sie später hinzufügen.
CSS und Responsive Design
Ein wichtiger Einsatzbereich von CSS ist das sogenannte Responsive Design. Mit sogenannten Media Queries kann CSS erkennen, auf welchem Gerät eine Seite angezeigt wird, und das Layout entsprechend anpassen.
@media (max-width: 768px) {
.navigation {
display: none;
}
}Dieser Code versteckt die Navigation auf kleinen Bildschirmen, zum Beispiel auf Smartphones. So kann dieselbe Webseite auf Desktop, Tablet und Mobilgerät optimal dargestellt werden, ohne separate Versionen erstellen zu müssen.
CSS, HTML und JavaScript
CSS ist Teil des Trios, das jede moderne Webseite ausmacht: HTML liefert den Inhalt, CSS das Aussehen, JavaScript die Interaktion. Die drei Technologien sind eng verzahnt, aber klar in ihrer Aufgabe getrennt. Diese Trennung macht Webseiten wartbarer und einfacher weiterzuentwickeln.