Begleitende Website zum Kurs Künstler*innen Website gestalten mit WordPress für Kunststudierende, Kunstschaffende und Interessierte.

CSS | 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. In dem Drei-Punkte-Menü an jedem Block kannst Du Dir diesen als HTML anzeigen lassen 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.:

h1, 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 (ol)
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.5;
}

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