Was ist CSS? Gestaltung und Regeln erklärt
Autor: Redaktion Domeny.ForSale Veröffentlicht
Kurz gesagt: CSS ist eine Stylesheet-Sprache, die das Aussehen und Layout von Webseiten festlegt: Farben, Schriftarten, Abstände und die Anordnung von Elementen. Sie arbeitet mit HTML zusammen, das die Struktur und Bedeutung der Inhalte beschreibt. Dank CSS kann dieselbe Seite sowohl auf einem Smartphone als auch auf einem großen Monitor übersichtlich dargestellt werden.
Wofür ist CSS zuständig und wie unterscheidet es sich von HTML?
Die Abkürzung CSS steht für Cascading Style Sheets, also kaskadierende Stylesheets. Es handelt sich um eine deklarative Sprache: Du legst fest, wie ein Element aussehen soll, und der Browser übernimmt die Darstellung. Du musst nicht Schritt für Schritt beschreiben, wie ein Button gezeichnet oder ein Absatz angeordnet werden soll.
Die Aufgabenverteilung auf einer Webseite lässt sich am einfachsten anhand eines Kontaktformulars erklären:
- HTML legt fest, dass das Formular Beschriftungen, Eingabefelder und einen Button zum Absenden enthält.
- CSS bestimmt die Breite der Felder, das Aussehen des Buttons, die Abstände und die Anordnung des Formulars auf unterschiedlichen Bildschirmen.
- JavaScript kann zusätzliche Funktionen übernehmen, etwa das Senden der Daten, ohne die Seite neu zu laden.
CSS ersetzt kein korrektes HTML. Wenn ein gewöhnlicher Textabschnitt wie eine Überschrift aussieht, wird er dadurch für assistive Technologien noch nicht zu einer Überschrift. Das Aussehen und die Bedeutung eines Elements sind zwei verschiedene Dinge.
Stylesheets ermöglichen es außerdem, die Darstellung vom Inhalt zu trennen. Eine gemeinsame CSS-Datei kann das Aussehen von Buttons auf vielen Unterseiten ändern, ohne dass jeder Button einzeln bearbeitet werden muss.
Wie sieht eine CSS-Regel aus?
Eine CSS-Regel besteht aus einem Selektor, der die Elemente auswählt, und Deklarationen, die ihr Aussehen festlegen. Jede Deklaration enthält eine Eigenschaft und den zugehörigen Wert.
p {
color: #222222;
font-size: 18px;
line-height: 1.6;
}
Der Selektor p wählt alle Absätze aus. Die Eigenschaft color legt die Textfarbe fest, font-size die Schriftgröße und line-height die Zeilenhöhe. In diesem Beispiel beträgt die Zeilenhöhe das 1,6-Fache der Schriftgröße. Dadurch erhält der Text mehr Platz in vertikaler Richtung.
Allerdings möchtest du nicht immer alle Elemente eines bestimmten Typs ändern. Eine Klasse ist ein Name, der einem Element in HTML zugewiesen wird und über den du es in CSS auswählen kannst. Ein Klassenselektor beginnt mit einem Punkt:
.hervorhebung {
background-color: #fff4cc;
padding: 16px;
border-radius: 8px;
}
Diese Regel gibt Elementen mit der Klasse hervorhebung einen hellen Hintergrund, einen Innenabstand und abgerundete Ecken. Es reicht nicht aus, den Namen nur im Stylesheet anzugeben: Dem jeweiligen Element muss diese Klasse in HTML zugewiesen sein.
Was bedeutet Kaskade und warum werden Stile überschrieben?
Auf ein Element können mehrere Regeln zutreffen. Die Kaskade ist der Mechanismus, der entscheidet, welche Deklaration angewendet wird, wenn unterschiedliche Regeln dieselbe Eigenschaft festlegen.
Dabei gilt nicht einfach „Die letzte Angabe gewinnt immer“. Der Browser berücksichtigt unter anderem die Herkunft und Wichtigkeit der Deklarationen, die Kaskadenebenen und die Spezifität, also das Gewicht des Selektors. Sind die übrigen Bedingungen gleich, entscheidet die Reihenfolge der Angaben.
p {
color: navy;
}
.hinweis {
color: darkred;
}
Ein Absatz mit der Klasse hinweis wird dunkelrot dargestellt. In diesem Beispiel hat der Klassenselektor eine höhere Spezifität als der Selektor, der den Elementtyp auswählt.
Ein eigener Mechanismus ist die Vererbung: Manche Eigenschaften, etwa die Textfarbe, können vom übergeordneten Element an dessen Inhalt weitergegeben werden. Das gilt nicht für alle Einstellungen: Rahmen und Außenabstand werden standardmäßig nicht vererbt. Wenn ein Stil nicht greift, prüfe zunächst, ob der Selektor passt und welche Deklarationen miteinander konkurrieren. Füge nicht sofort !important hinzu: Diese Angabe verändert die Priorität der Deklaration und kann spätere Anpassungen erschweren.
Wie passt CSS eine Seite an den Bildschirm an?
Responsives Design bedeutet, dass sich das Layout an den verfügbaren Platz anpasst. CSS ermöglicht dies durch flexible Breiten, Verfahren zur Anordnung von Elementen und Medienabfragen (media queries). Diese legen Bedingungen fest, unter denen bestimmte Stile angewendet werden, beispielsweise bei einer bestimmten Breite des Anzeigebereichs der Seite.
Zum Aufbau von Layouts dienen unter anderem Flexbox, das sich gut für die Anordnung von Elementen in einer Richtung eignet, und Grid für Layouts mit Zeilen und Spalten. Eine Produktliste kann beispielsweise auf einem breiten Bildschirm drei Spalten und auf einem schmalen Bildschirm eine Spalte haben.
Beim Festlegen von Abmessungen musst du das Boxmodell verstehen: Ein Element besteht aus einem Inhaltsbereich, einem Innenabstand (padding), einem Rahmen (border) und einem Außenabstand (margin). Standardmäßig gilt die angegebene Breite nur für den Inhalt. Mit der Einstellung box-sizing: border-box umfasst sie auch die Innenabstände und den Rahmen. Dadurch lässt sich die Größe des Elements leichter kontrollieren.
Wie beginnt man mit CSS?
Meist werden die Regeln in einer separaten Datei mit der Endung .css gespeichert, die im Kopfbereich des HTML-Dokuments eingebunden wird. Stile können auch direkt im Dokument stehen, doch ein gemeinsames Stylesheet erleichtert gewöhnlich die Pflege einer größeren Website.
Für die erste Übung musst du keine zusätzlichen Werkzeuge installieren:
- Öffne eine Seite im Browser und wähle im Kontextmenü die Option zum Untersuchen eines Elements.
- Wähle einen Absatz aus und ändere im Bereich für die Stile dessen
coloroderfont-size. - Prüfe, welche Deklarationen durchgestrichen sind: Meist wurden sie durch andere Regeln überschrieben.
- Verkleinere die Fensterbreite und prüfe, ob der Text lesbar bleibt und kein unnötiges horizontales Scrollen erforderlich wird.
Änderungen in den Entwicklertools sind normalerweise vorübergehend und verschwinden, wenn du die Seite neu lädst. Wenn das Ergebnis stimmt, übertrage die Regel in die Projektdatei. Ändere zunächst ein einzelnes Element und prüfe das Ergebnis auch bei vergrößertem Text. So verstehst du die Zusammenhänge schneller, als wenn du ein umfangreiches, fertiges Stylesheet einfügst.
Lesen Sie auch
