Internes CSS

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 7 von 76.

Internes CSS ist eine Methode zum Hinzufügen von CSS-Styles zu einem HTML-Dokument, indem diese innerhalb eines <style>-Tags im <head>-Bereich des Dokuments platziert werden. Dieser Ansatz ermöglicht es Ihnen, Styles auf mehrere Elemente einer einzelnen Seite anzuwenden, ohne dass externe Stylesheets erforderlich sind. Internes CSS ist nützlich für das Styling eines einzelnen Dokuments oder für schnelle Style-Änderungen.

Hier ist die grundlegende Syntax für die Verwendung von internem CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

In diesem Beispiel enthält das <style>-Tag CSS-Regeln, die die Hintergrundfarbe des body auf Hellblau festlegen, sowie die Farbe des p (Absatz) auf Blau und die Schriftgröße auf 16 Pixel. Diese Stile werden auf alle Elemente innerhalb des HTML-Dokuments angewendet.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument zur Verfügung gestellt. Verwenden Sie internes CSS, um das Dokument mit den folgenden Eigenschaften zu gestalten:

Setzen Sie die Hintergrundfarbe des body auf lightgreen.
Setzen Sie die Textfarbe aller h1-Überschriften auf red.
Setzen Sie die Schriftgröße aller Absätze (p) auf 18px.

Ihnen wird ein CSS-Startcode dafür zur Verfügung gestellt.

Spickzettel

Internes CSS wird innerhalb eines <style> Tags im <head> Bereich eines HTML-Dokuments hinzugefügt:

<head>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

Internes CSS ermöglicht es Ihnen, Stile auf mehrere Elemente auf einer einzelnen Seite anzuwenden, ohne externe Stylesheets zu verwenden.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>