CSS #2 | Schriften formatieren

Die Schriftart(en) für Deine Website bindest Du über die functions.php Deines Child-Themes ein (Snippets > Google Fonts in Child-Theme einbinden).

Anschließend wird über die Stilvorlage (style.css) festgelegt, wie die Schrift(en) verwendet werden sollen.

Hauptschriftart

Die Hauptschriftart wird dem body zugewiesen.

body {font-family: "DeineSchrift", sans-serif; }

Schriftformatierung im Backend-Editor

Im Backend-Editor kannst Du Deinen Text formatiert. Dabei werden HTML Elemente erzeugt. Schalte dafür die Ansicht des Editor von “Visuell” auf “Text” und Du siehst, wie die Elemente heißen.

Überschriften 1-6

h1 { Eigenschaft: Wert; }
h1, h2, h3, h4, h5, h6 { Eigenschaft: Wert; }

Willst Du z.B. die Überschrift 1 (headline 1 = h1) ändern, kannst Du folgendes schreiben:

h1 { font-size: 26px; color: #222; }

Haben z.B. Überschrift 1 und 2 einen gemeinsamen Stil, schreibst Du z.B.:

h2, h2 { font-weight: 700; }

Absatz / Text

p { Eigenschaft: Wert; }

Vorformatiert

pre { Eigenschaft: Wert; }

Punkte einer Liste (Aufzählung)

Aufzählung = unordered list (ul)
Unterpunkte = list item (li)

ul li { Eigenschaft: Wert; }

Nummerierte Liste

Nummerierte Liste = ordered list
Unterpunkte = list item (li)

ol li { Eigenschaft: Wert; }

Bildunterschriften

caption { Eigenschaft: Wert; }

Beispiele für Eigenschaften und Werte

h1 { font-family: "DeineSchrift", serif;}

.kursiver-text { font-style: italic; }

article p { font-size: 1em; }

.menu li { line-height: 2.5em; }

footer h3 {font-weight: 700; }

Artikel zu Schriftformatierung: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung

Artikel zu Wertetypen: https://wiki.selfhtml.org/wiki/CSS/Wertetypen