Springe zum Inhalt

CSS-Eigenschaften zur Schriftformatierung

Cascading Style Sheets (CSS) stellen eine Formatierungssprache dar, welche die Textstruktur von HTML um das Layout ergänzt. Meist lagert man die Formatierungsanweisungen in eine separate CSS-Datei aus. Hierdurch wirkt sich eine Änderung in der externen CSS-Datei auf alle HTML-Seiten gleichermaßen aus, was den Pflegeaufwand erheblich reduziert. So kann man schnell mal die Hintergrundfarbe ändern, ohne sämtlich Seiten einzeln zu bearbeiten.

Einbindung einer externen CSS-Datei in eine HTML-Datei:

Im Head-Bereich der HTML-Datei fügt man folgenden Quellcode ein:

<link href="/style.css" rel="stylesheet" type="text/css" media="all">

Die CSS-Datei "style.css" ist eine Textdatei mit der Dateiendung .css und befindet sich im selben Verzeichnis, wie die entsprechende HTML-Datei.

Formaler Aufbau (Syntax) einer CSS-Anweisung:

Selektor {Eigenschaft:Wert;}

1. Selektor: HTML-Element z. B. H1
2. Eigenschaft: z. B. COLOR
3. Wert: z. B. Farbname z. B. blue

Werte können Schlüsselwörter, Längen-, Prozent- oder Farbwerte sowie URLs sein.

Beispiel: H1 {color:blue;}

Durch diese Anweisung werden alle in der HTML-Datei mit <H1> ausgezeichneten Überschriften blau dargestellt.

Die wichtigsten CSS-Eigenschaften für die Schriftformatierung:

Format CSS- Eigenschaft Beispiel
Schriftart font-family font-family: Arial, Helvetica, sans-serif;
Schriftgröße font-size font-size: 80%;
Zeilenabstand line-height line-height: 140%;
Schriftfarbe color color: red;
Hintergrundfarbe background background: grey;
Schriftgewicht font-weight font-weight: bold;
Textdekoration text-decoration text-decoration: underline;
Horizontale Ausrichtung text-align text-align: center;
Vertikale Ausrichtung vertical-align vertical-align: top;
Rahmen border border: 1px solid black;
Außenabstand margin margin: 10px;
margin: 5px 10px 5px 20px;
(oben rechts unten links)
Innenabstand padding padding: 10px;
padding: 5px 10px 5px 20px;
(oben rechts unten links)

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen