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

CSS | Stilvorlage

Das Ausstehen Deiner Website wird durch die Stilvorlage bestimmt. Änderungen kannst Du in der Datei style.css des Child-Theme bestimmen.

CSS ist die Abkürzung für Cascading Style Sheet, zu deutsch gestufte Gestaltungsbögen. Kurz gesagt ist das Schöne daran, dass Vorgaben an untergeordnete Elemente vererbt und Anweisungen durch folgende ergänzt oder überschrieben werden.

CSS Syntax

Die CSS Syntax sieht schematisch so aus:

Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; }
Selektor Eins, Selektor Zwei { Eigenschaft: Wert; }

Artikel zur Syntax: https://wiki.selfhtml.org/wiki/CSS/Syntax

Selektoren

Bei den Selektoren handelt es sich um HTML Elemente, Klassen oder IDs.

HTML Element (Typselektoren): element

div, article {padding: 24px;}
a {color: #181818;}

Die Elemente div und article mit 24px Polsterung.
Das Element a hat die Farbe mit diesem Hex-Code.

Klassenselektoren: .class

.menu a { padding: 8px; }

In einem Element mit der Klasse .menu hat das Element a (Anchor-Tag = Link)  8 px Polsterung.

Achtung: im HTML-Code steht die Klasse ohne den Punkt. In der style.css must Du ihn hinzufügen!

ID-Selektoren: #id

.menu#sitemap a { padding: 16px; }

In einem Element mit der Klasse .menu und der ID #sitemap hat das Element a (Anchor-Tag = Link) 16 px Polsterung.

Achtung: im HTML-Code steht die ID ohne die Raute. In der style.css must Du sie hinzufügen!

Universalselektor: *

* { padding: 0px; }

Alle Elemente ohne Polsterung.

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

Eigenschaften

Es gibt jede Menge Eigenschaften, die Selektoren zugewiesen werden können, und mit einem festgelegten Wert das Ausstehen verändern. Der Wert ist dabei abhängig von der Art der Eigenschaft.

Eine Übersicht findest Du bei https://wiki.selfhtml.org/wiki/Referenz:CSS/Eigenschaften