MyLeoNes™

CSS-Gestaltung — Informatik, 11–13

CSS steuert das Aussehen einer Webseite, ohne ihren eigentlichen Inhalt zu ändern. Du lernst, Bedeutung und Gestaltung zu trennen, und legst dann Farben, Abstände, Größen und Anordnung mit Regeln fest.

Inhalt und Aussehen

Eine Webseite enthält Inhalte wie eine Überschrift oder einen Absatz und kann zusätzlich gestaltet werden. CSS gibt an, wie Elemente aussehen sollen: blauer Text, ein großer Rand oder zwei Spalten. Die Seite kann dieselbe Botschaft behalten, während sich ihr Stil ändert.

Warum Gestaltung trennen?

Wenn jede Seite ihre Wörter mit allen Gestaltungsanweisungen vermischen würde, müsste man für eine Farbänderung oder eine Korrektur viele Stellen bearbeiten. CSS entstand, damit mehrere Seiten einheitlich gestaltet und leichter geändert werden können. Außerdem kann derselbe Inhalt an ein Handy, einen großen Bildschirm oder einen Drucker angepasst werden.

Eine Überschrift blau machen

Angenommen, eine Seite hat eine als Überschrift markierte Überschrift. Wähle zuerst diese Elementart als Ziel. Setze dann die Textfarbe auf Blau und die Größe auf 24 Pixel. Beim Laden der Seite erhält jede passende Überschrift diese Einstellungen. Änderst du die Regel einmal, ändern sich alle passenden Überschriften gemeinsam.

Die Falle: Gestaltung ist Inhalt

Es liegt nahe, Größe oder Farbe als Bedeutung zu verwenden, weil dir das Aussehen zuerst auffällt. Eine Seite kann dadurch richtig wirken, aber für Browser und Hilfstechnologien unklar aufgebaut sein. Kennzeichne ein Element nach seiner Bedeutung und nutze CSS für sein Aussehen.

CSS in echten Webseiten

Alltags-Webseiten verwenden CSS für gut lesbaren Text, Menüs, Karten, Abstände und Anordnungen, die auf verschiedene Bildschirme passen. Ein Online-Shop kann dieselben Produktinformationen behalten und sie auf Handy oder Computer anders darstellen. CSS erzeugt keine fehlenden Fakten und macht ein schlechtes Bild nicht verständlich; es gestaltet die Darstellung.

Weiter erkunden

Andere Sprachen

MyLeoNes™ wird geladen…