Version: 28Wa

CSS

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und die Formatierung von HTML-Dokumenten zu beschreiben. Mit CSS können das Layout, die Farben, Schriftarten und andere visuelle Aspekte von Webseiten gesteuert werden.

<html>
    <head>
        <style>
            h1 {
                color: blue;
            }
            code {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <h1>HTML</h1>
        <div>
            Ein <code>div</code>-Tag steht für "Division", also für einen Bereich mit beliebigem Inhalt.
            <p>
                Ein <code>p</code>-Tag steht für "Paragraph", ein Bereich mit <b>Textinhalten</b>.
            </p>
        </div>
    </body>
</html>

Im <style>-Tag wird in der CSS-Syntax der Stil für dieses Dokument definiert.

Selektoren

Mit einem Selektor wird ein Element ausgewählt (z.B. h1 oder code) und in geschweiften Klammern {} werden die Eigenschaften und deren Werte angegeben (z.B. color: blue; oder background-color: yellow;).

Z.4: Mit dem Selektor h1 werden alle Überschriften der Ebene 1 ausgewählt und auf Z.5 deren Textfarbe auf Blau gesetzt.
Ausprobieren
Fügen Sie eine weitere h1-Überschrift hinzu und beobachten Sie, wie diese automatisch blau dargestellt wird.

Z.8: Mit dem Selektor code werden alle Code-Elemente ausgewählt und auf Z.9 deren Hintergrundfarbe auf Gelb gesetzt.

Dokument-Struktur

Jetzt wo CSS verwendet wird, strukturieren wir das HTML-Dokument etwas um, wobei Inhalte unterschieden werden, ob sie für die Darstellung (im <head>) oder für den eigentlichen Inhalt (im <body>) zuständig sind.

<html>
    <head>
        <!-- Hier kommen Metadaten und CSS-Definitionen hin -->
    </head>
    <body>
        <!-- Hier kommt der eigentliche Seiteninhalt hin -->
    </body>
</html>

Cascading

Das "Cascading" in CSS bezieht sich auf die Art und Weise, wie Stylesheets angewendet werden, wenn mehrere Regeln auf dasselbe Element zutreffen. In solchen Fällen wird die Regel mit der höchsten Spezifität (also die präziseste Beschreibung des auszuwählenden Elements) oder die zuletzt definierte Regel angewendet.

Beispiel

In diesem Beispiel werden zwei verschiedene Hintergrundfarben für das code-Element definiert: Gelb und Grün. Da die grüne Regel zuletzt definiert wurde, wird sie angewendet, und alle code-Elemente haben einen grünen Hintergrund.

<html>
    <head>
        <style>
            code {
                background-color: yellow;
            }
            code {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <h1>HTML</h1>
        <div>
            Ein <code>div</code>-Tag steht für "Division", also für einen Bereich mit beliebigem Inhalt.
            <p>
                Ein <code>p</code>-Tag steht für "Paragraph", ein Bereich mit <b>Textinhalten</b>.
            </p>
        </div>
    </body>
</html>

CC 4.0