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

Datenschutz-Übersicht

Diese Website verwendet Cookies, damit wir dir die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in deinem Browser gespeichert und führen Funktionen aus, wie das Wiedererkennen von dir, wenn du auf unsere Website zurückkehrst, und hilft unserem Team zu verstehen, welche Abschnitte der Website für dich am interessantesten und nützlichsten sind.