Technologie

Wie ändere ich die Schriftgröße von h3 mit CSS?

Melden
  1. Einleitung
  2. Grundlegende Verwendung von font-size
  3. CSS-Beispiel zur Änderung der Schriftgröße von <h3>
  4. Einbinden von CSS auf verschiedene Arten
  5. 1. Interne Einbettung im <style>-Tag
  6. 2. Inline-CSS im <h3>-Element
  7. 3. Externe CSS-Datei
  8. Fazit
  9. Beispielh3 Überschrift

Einleitung

Um die Schriftgröße eines <h3>-Elements mit CSS zu ändern, nutzen Sie die CSS-Eigenschaft font-size. Diese Eigenschaft bestimmt, wie groß der Text in einem bestimmten Element dargestellt wird. CSS kann entweder direkt im HTML-Dokument eingebettet oder in einer externen Datei definiert werden.

Grundlegende Verwendung von font-size

Die Eigenschaft font-size kann verschiedene Werte annehmen. Die häufigsten sind Pixel (px), Em (em), Rem (rem), Prozent (%) oder Schlüsselwörter wie small, medium, large. Zum Beispiel:

font-size: 20px; bewirkt, dass die Schriftgröße exakt 20 Pixel groß ist.

font-size: 1.5em; setzt die Schriftgröße auf das 1,5-fache der Schriftgröße des übergeordneten Elements.

CSS-Beispiel zur Änderung der Schriftgröße von <h3>

Im folgenden Beispiel definieren wir im <style>-Bereich eine Regel für alle <h3>-Elemente. Hier setzen wir die Schriftgröße auf 24 Pixel:

h3 { font-size: 24px;}

Diese CSS-Regel sorgt dafür, dass alle Überschriften vom Typ <h3> im Dokument mit einer Schriftgröße von 24 Pixeln dargestellt werden.

Einbinden von CSS auf verschiedene Arten

Sie können CSS auf drei Arten einbinden, um die Schriftgröße zu ändern:

1. Interne Einbettung im <style>-Tag

Der Stil wird direkt im <head> der HTML-Datei eingefügt, ähnlich wie im Beispiel oben.

2. Inline-CSS im <h3>-Element

Hier wird die Schriftgröße direkt im HTML-Element definiert, z.B.: <h3 style="font-size: 18px;">Überschrift</h3>

3. Externe CSS-Datei

Sie können eine separate CSS-Datei anlegen, z.B. styles.css, mit dem Inhalt:

h3 { font-size: 24px;}

Diese Datei binden Sie im <head> Ihrer HTML-Datei so ein:

<link rel="stylesheet" href="styles.css">

Fazit

Das Ändern der Schriftgröße von <h3>-Elementen mit CSS ist einfach und flexibel. Mit der Eigenschaft font-size bestimmen Sie präzise die gewünschte Größe. Je nach Projekt können Sie zwischen inline, intern oder externem CSS wählen, um Ihre Seite übersichtlich und wartbar zu gestalten.

Beispielh3 Überschrift

Damit sehen Sie die Änderung der Schriftgröße in Aktion.

0

Kommentare