Schriftstärke

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

In CSS wird die Eigenschaft font-weight verwendet, um die Fettschrift oder Stärke des Textes innerhalb eines HTML-Elements zu steuern.

Gängige numerische Werte für font-weight sind:

100: Dünn
200: Extraleicht
300: Leicht

400: Normal
500: Medium
600: Halbfett

700: Fett
800: Extrafett
900: Schwarz

Häufige Schlüsselwortwerte für font-weight sind:

normal: Entspricht 400
bold: Entspricht 700

lighter: Gibt eine geringere Stärke als das Elternelement an
bolder: Gibt eine größere Stärke als das Elternelement an

Zum Beispiel:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>) gegeben. Ihre Aufgabe ist es, die Eigenschaft font-weight zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <h1>-Element abzielt. Setzen Sie font-weight auf 900.
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie font-weight auf lighter.
Schreiben Sie eine CSS-Regel, die auf das <div>-Element abzielt. Setzen Sie font-weight auf 600.

Probier es selbst

<html>
<head>
    <title>Font Weight</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>