Internes CSS

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

Internes CSS ist eine Methode, CSS-Stile zu einem HTML-Dokument hinzuzufügen, indem sie in einem <style>-Tag im <head>-Abschnitt des Dokuments platziert werden. Dieser Ansatz ermöglicht es dir, Stile auf mehrere Elemente auf einer einzelnen Seite anzuwenden, ohne externe Stylesheets zu benötigen. Internes CSS eignet sich zum Gestalten eines einzelnen Dokuments oder für schnelle Stilä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.

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>