CSS

Cheat Sheet / Spickzettel

© LerneProgrammieren.de
CSS Grundlagen & Syntax

Aufruf CSS-Code (Inline Style)

Aufruf CSS-Code (Embedded, Head)

Aufruf CSS-Code (Embedded, Extern)

CSS-Kommentare
CSS Positionierung & Abmessungen

Boxes Box Model

margin

padding-top
padding-right
padding padding-bottom
padding-left

border-top
border-right
border border-bottom
border-left

border-top-color
border-right-color
border-color border-bottom-color
border-left-color

border-style

border-top-width
border-right-width
border-width border-bottom-width
border-left-width
CSS Selektoren

CSS-Selektoren CSS Pseudo-Selektoren

* Alle Elemente :active Fügt dem aktiven Element einen Stil hinzu

tag Alle Tag-Elemente :before Inhalt der Anzeige vor dem gewählten Element

tag tag2 tag2-Elemente innerhalb des tags :first-letter Fügt Stil zum ersten Zeichen hinzu

tag * Alle Elemente innerhalb des Tags :focus Fügt dem fokussierten Element einen Stil hinzu

tag, tag2 Alle Tag- und Tag2-Elemente :after Fügt Inhalte nach dem Element hinzu

tag > tag2 tag2 ist ein Kind von tag :first-child Fügt den Stil zum ersten Kind-Element hinzu
.class Elemente mit der Klasse 'Klasse' :first-line Fügt den Stil zur ersten Zeile hinzu
#id Element mit der ID 'id'. :hover Wenn Maus über das Element bewegt wird
tag + tag2 tag2 mit vorangestelltem tag :link Fügt Stil zu einem nicht besuchten Link hinzu
tag.class Alle Tags mit der Klasse 'class'. :visited Fügt dem besuchten Link einen Stil hinzu
tag#id Tag mit der Kennung 'id'.
 CSS Text & Allgemeine Größen, Farben

Text Größen und Farben (Allgemein)

font-family Setzt die Schriftart

font-style Textgröße
font-style normal | italic | oblique | inherit
Absolute Größen cm | mm | px |in |pt | pc
font-variant normal | small-caps | inherit
font-weight normal | bold | bolder | lighter | int (100- 900) | inherit
Farben
color Textfarbe
line-height normal | int | % | inherit
text-align left | right | center | justify | inherit
text-decoration none | underline | overline | line-through | blink | inherit
text-indent int | % | inherit
text-transform none | capitalize | uppercase | lowercase | inherit

int | % | baseline | sub | super | top | text-top middle | bottom |

vertical-align text-bot-tom | inherit
white-space normal | nowrap | pre | pre-line | pre-wrap| inherit
word-spacing normal | length | inherit
 CSS Positionierung & Abmessungen

Positionierung Abmessungen

position absolute | fixed | relative | static | inherit height auto | int | % | inherit

top, right, bottom, left Setzt Abstand zu den Rändern width auto | int | % | inherit

display Setzt die Platzierung des Elementes fest max-height none | int | % | inherit

visibility visible | hidden | collapse | inherit max-width none | int | % | inherit

float left | right | none | inherit min-height int | % | inherit

clear left | right | both | none | inherit min-width int | % | inherit

overflow visible | hidden | scroll | auto | inherit

z-index auto | int | inherit

CSS Schnellstart – Einfach CSS Lernen

Jetzt noch leichter CSS lernen mit dem LerneProgrammieren CSS-Schnellstart.

Ein Online-Kurs für alle, die frustfrei CSS3 lernen möchten.

- Ohne Vorkenntnisse
- Keine Installationen nötig (du programmierst bequem im Browser)
- Style und designe echte Webseiten und Projekte mit CSS

Hier klicken