Schriftgröße

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

In CSS wird die Eigenschaft font-size verwendet, um die Größe von Text innerhalb eines HTML-Elements zu steuern.

Hier sind einige gängige Einheiten, die zur Angabe von Schriftgrößen verwendet werden:

Pixel (px): Eine absolute Einheit, die die Schriftgröße in Pixeln angibt. Dies ist die unkomplizierteste und am häufigsten verwendete Einheit zum Festlegen von Schriftgrößen.

Ems (em): Eine relative Einheit, die auf der Schriftgröße des Elternelements basiert. Wenn zum Beispiel das Elternelement eine Schriftgröße von 16px hat, dann entspricht 1em 16px, 2em entspricht 32px und so weiter.

Rems (rem): Eine relative Einheit, die auf der Schriftgröße des Wurzelelements (<html>) basiert. Diese Einheit bietet mehr Konsistenz im gesamten Dokument, da sie nicht von der Schriftgröße der Elternelemente beeinflusst wird.

Prozent (%): Eine relative Einheit, die auf der Schriftgröße des Elternelements basiert, ähnlich wie em. Wenn zum Beispiel das Elternelement eine Schriftgröße von 16px hat, dann entspricht 100% genau 16px, 150% entspricht 24px und so weiter.

Zum Beispiel:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

In diesem Beispiel wird die Schriftgröße aller <p> (Absatz-)Elemente auf 16px festgelegt, alle <h1>-Überschriften werden auf 2.5em gesetzt (was relativ zur Schriftgröße ihres Elternelements ist), die Basisschriftgröße des Dokuments wird auf 1.4rem festgelegt und alle Elemente mit der Klasse small-text haben eine Schriftgröße von 80% (was relativ zur Schriftgröße ihres Elternelements ist).

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>) gegeben. Deine Aufgabe ist es, die Eigenschaft font-size zu verwenden, um diese Elemente zu gestalten. Folge den unten stehenden Schritten:

Schreibe eine CSS-Regel, die das <h1>-Element anspricht. Setze die font-size auf 32px.
Schreibe eine CSS-Regel, die das <p>-Element anspricht. Setze die font-size auf 1.2em.
Schreibe eine CSS-Regel, die das <div>-Element anspricht. Setze die font-size auf 120%.

Spickzettel

Die Eigenschaft font-size steuert die Größe des Textes innerhalb eines HTML-Elements.

Gängige Einheiten für Schriftgrößen:

Pixel (px): Absolute Einheit, die die Schriftgröße in Pixeln angibt
Ems (em): Relative Einheit basierend auf der Schriftgröße des Elternelements
Rems (rem): Relative Einheit basierend auf der Schriftgröße des Wurzelelements
Prozent (%): Relative Einheit basierend auf der Schriftgröße des Elternelements

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Probier es selbst

<html>
<head>
    <title>Font Size</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>