CSS-Cheatsheet

---

Syntax

Der folgende Syntax wird für CSS verwendet:
Selektor {
Eigenschaft: Wert;
Eigenschaft2: Wert2;
}

Wohin mit dem Styling

1. Über ein externes Stylesheet

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

2. Über interne Styles im head Bereich

<style> ... </style>

Welche Selektoren gibt es?

Selektoren bestimmen, welches ELEMENT gestylt wird. Es gibt:
Universal-Selektor (*) ... den Universal-Selektor. Dieser betrifft alles.

Universal-Selektor (*) ... den Universal-Selektor. Dieser betrifft alles.

Tag (h1) ... den Typ-Selektor

Class (.class-name) ... den Class-Selektor

ID (#idName) ... den ID-Selektor

Größeneinheiten

Pixel (px) ... Absolute Größe; Überall Gleich; Nicht dynamisch;

Prozent (%) ... Relativ zu Elternelement; Einfach; Ungewolltes aufsummieren;

EM (em) ... Relativ zu Elternelement; Sinnvoll f. Text; Ungewolltes aufsummieren;

REM (rem) ... Relativ zu Rootelement; Sinnvoll f. Text; Kein aufsummieren;

Viewport (vh/vw) ... Realtiv zu Viewport (Fenster); Responsive; Praktisch f. Layouts

Welche häufigen Styling-Eigenschaften & Werte gibt es?

COLOR Styles

background-color: rgb(255,0,0); ... Hintergrundfarbe in RGB

color: red; ... Schrift-/Linienfarbe als Name

FONT Styles

font-family ... z.B.: ...

font-size ... z.B.: ...

font-style ... z.B.: ...

font-weight ... z.B.: ...

TEXT & andere Styles

text-align ... z.B.: ...

text-decoration ... z.B.: ...

line-height ... z.B.: ...

Wichtige Links zum Nachschauen

w3schools CSS
w3schools CSS Referenz