CSS Einführung
Mit CSS lassen sich HTML-Elemente gestalten, Seitenlayouts erstellen sowie Farben, Schriften und Abstände festlegen. Lerne, Webseiten mit CSS zu stylen.
Cascading Style Sheets (CSS) ist die Sprache, die das Aussehen einer Webseite bestimmt. Während HTML den Inhalt und die Struktur einer Seite definiert (Überschriften, Absätze, Listen, Links), beschreibt CSS deren Darstellung — Farben, Schriften, Abstände, Größen und Layout. Beide arbeiten zusammen: HTML ist das Skelett, CSS ist die Haut.
CSS wurde vom World Wide Web Consortium (W3C) entwickelt und ist heute ein offener Standard, der von jedem modernen Browser unterstützt wird.
Diese Seite erklärt, was CSS ist, warum es existiert, wie eine CSS-Regel aufgebaut ist und wie es weitergeht.
Warum CSS existiert
In den Anfängen des Webs wurde die Gestaltung direkt in HTML eingebettet, über Attribute und präsentationsbezogene Tags. Das machte Seiten schwer wartbar: Eine Farbänderung bedeutete, jedes Element auf jeder Seite zu bearbeiten. CSS löst dieses Problem, indem es Inhalt und Darstellung trennt. Du schreibst dein Markup einmal und steuerst das Aussehen über separate Regeln.
Diese Trennung bringt drei wesentliche Vorteile:
- Eine Änderung, überall wirksam. Ein einziges externes Stylesheet kann jede Seite einer Website gestalten. Eine Datei aktualisieren, und die gesamte Website ändert sich.
- Saubereres, kleineres HTML. Dein Markup bleibt auf Bedeutung fokussiert, was leichter lesbar ist und der Barrierefreiheit sowie SEO zugutekommt.
- Wiederverwendbares, einheitliches Design. Dieselben Regeln gelten automatisch für jedes passende Element, sodass Schaltflächen, Überschriften und Links überall gleich aussehen.
Wie eine CSS-Regel aussieht
Eine CSS-Regel besteht aus zwei Teilen: einem Selektor, der bestimmt, welche Elemente gestylt werden, und einem Deklarationsblock (innerhalb von { }), der auflistet, was geändert werden soll. Jede Deklaration ist ein property: value;-Paar.
p {
color: blue;
font-size: 16px;
}In dieser Regel:
pist der Selektor — er zielt auf jedes<p>-Element (Absatz) ab.colorundfont-sizesind Eigenschaften — das, was gestylt wird.blueund16pxsind Werte — auf was jede Eigenschaft gesetzt wird.- Das Semikolon
;beendet jede Deklaration; die geschweiften Klammern{ }gruppieren sie.
Hier ist eine vollständige Seite, die CSS verwendet, um Überschrift und Absatz zu gestalten:
<!DOCTYPE html>
<html>
<head>
<title>My first CSS page</title>
<style>
h1 {
color: #1c87c9;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>Die Überschrift wird blau und zentriert, und der Absatz wird grau und größer — ohne den Text selbst zu verändern.
Wo CSS eingebunden wird
Du kannst CSS auf drei Arten einbinden, und du wirst alle im Kapitel How to Add CSS kennenlernen:
- Extern — Regeln werden in einer separaten
.css-Datei gespeichert und von der Seite verknüpft. Das ist der Standardansatz für echte Websites, da eine Datei viele Seiten gestaltet. - Intern — Regeln werden in einem
<style>-Element im<head>der Seite platziert (wie im Beispiel oben). - Inline — ein
style-Attribut an einem einzelnen Element, verwendet für schnelle Einzelanpassungen.
Wie es weitergeht
Jetzt, da du weißt, was CSS ist, fahre mit den Grundlagen fort:
- CSS Syntax — der Aufbau einer Regel im Detail.
- How to Add CSS — Inline-, interne und externe Stile.
- CSS Selectors — alle Möglichkeiten, Elemente anzusteuern.
- CSS Id and Class — bestimmte Elemente nach Name ansprechen.