Der CSS-Schneemann
Türchen 2
Die heutige Geschichte
Der CSS-Schneemann
Emily entdeckte, wie sie mit CSS wunderbare Dinge auf dem Bildschirm zaubern konnte. Sie erstellte einen Schneemann aus reinem Code und nannte ihn „Frosty.css“.
Die Hintergründe
CSS zum Styling
CSS, die Abkürzung für „Cascading Style Sheets“ (zu Deutsch: „Kaskadierende Stilvorlagen“), ist eine Gestaltungssprache, die in Verbindung mit HTML verwendet wird, um das Aussehen und die Darstellung von Webseiten zu definieren. CSS ermöglicht es, das Layout, die Farben, Schriftarten und andere visuelle Aspekte einer Webseite zu kontrollieren, ohne den eigentlichen Inhalt der Seite zu verändern. Hier ist eine Erklärung, wie CSS funktioniert:
1. Trennung von Inhalt und Gestaltung
Eine der wichtigsten Funktionen von CSS besteht darin, den Inhalt einer Webseite von seiner Gestaltung zu trennen. Das bedeutet, dass HTML für die Struktur und den Inhalt der Seite verantwortlich ist, während CSS für das Erscheinungsbild und die Stilgebung verantwortlich ist.
2. Selektoren und Regeln
CSS verwendet Selektoren, um HTML-Elemente auszuwählen, auf die die Gestaltungsregeln angewendet werden sollen. Diese Selektoren werden dann mit Deklarationen kombiniert, die die gewünschten Stileigenschaften festlegen. Eine typische CSS-Regel sieht so aus:
selector {
property: value;
}
- Der „Selektor“ wählt die HTML-Elemente aus, auf die die Regel angewendet wird (z.B.,
pfür Absätze oder.classfür Elemente mit einer bestimmten Klasse). - Die „property“ (Eigenschaft) definiert, welche Stilattribute geändert werden sollen (z.B.,
colorfür die Textfarbe oderfont-sizefür die Schriftgröße). - Der „value“ (Wert) gibt an, welchen Wert die Eigenschaft haben soll (z.B.,
bluefür die Textfarbe oder16pxfür die Schriftgröße).
3. Kaskadierung und Priorität
Das „Cascading“ in CSS bezieht sich auf die Art und Weise, wie Stilregeln angewendet werden, wenn sie in Konflikt geraten. CSS-Regeln können aus verschiedenen Quellen stammen, wie externen CSS-Dateien, internen <style>-Tags oder Inline-Stilen. Wenn mehrere Regeln auf dasselbe Element angewendet werden, wird die spezifischere Regel normalerweise Vorrang haben.
4. Erbschaft
CSS ermöglicht auch die Vererbung von Stilregeln. Wenn Sie beispielsweise einem übergeordneten HTML-Element einen Stil zuweisen, können seine untergeordneten Elemente diesen Stil erben, es sei denn, sie haben eigene spezifische Stile.
5. Medienabfragen
CSS ermöglicht es, Stile auf verschiedene Bildschirmgrößen und Gerätetypen anzupassen. Dies geschieht mithilfe von Medienabfragen, die es ermöglichen, spezielle Stile für Desktop-Computer, Tablets, Smartphones und andere Geräte festzulegen.
CSS ist von entscheidender Bedeutung, um Webseiten visuell ansprechend zu gestalten und eine konsistente Darstellung auf verschiedenen Geräten sicherzustellen. Zusammen mit HTML und JavaScript bildet CSS die Grundlage für die Entwicklung von modernen, interaktiven und attraktiven Webseiten.
