Skip to content

CSS Style Cheat Sheet

CSS (Cascading Style Sheets) wird verwendet, um das Layout und das Design von Webseiten zu steuern. Dieses Cheat Sheet deckt die am häufigsten verwendeten Eigenschaften und Selektoren ab.

Selektoren

Typ Beispiel Beschreibung
All * { } Alle Elemente auswählen
Type h1 { } Bestimmtes HTML-Tag auswählen
Class .header { } Elemente mit class=“header” auswählen
ID #main { } Element mit id=“main” auswählen
Descendant div p { } Alle p innerhalb von div auswählen
Pseudo a:hover { } Zustand beim Drüberfahren mit der Maus

Box-Modell 

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Innenabstand */
  border: 1px solid #ccc; /* Rahmen */
  margin: 20px;     /* Außenabstand */
  box-sizing: border-box; /* Beinhaltet Rahmen und Innenabstand */
}

Typografie

Property Beschreibung Beispiel
font-family Schriftfamilie font-family: Arial, sans-serif;
font-size Schriftgröße font-size: 16px;
font-weight Schriftgewicht font-weight: bold;
text-align Textausrichtung text-align: center;
line-height Zeilenhöhe line-height: 1.5;
color Schriftfarbe color: #333;

Farben & Hintergründe

Property Beschreibung Beispiel
background-color Hintergrundfarbe background-color: #f0f0f0;
background-image Hintergrundbild background-image: url('bg.jpg');
background-size Hintergrundgröße background-size: cover;
opacity Deckkraft opacity: 0.8;

Positionierung

  • position: static; : Standard-Fluslayout
  • position: relative; : Versatz relativ zur eigenen Position
  • position: absolute; : Position relativ zum nächsten nicht-statischen Vorfahren
  • position: fixed; : Position relativ zum Browserfenster
  • position: sticky; : Fixiert beim Scrollen an eine bestimmte Position
  • z-index: 10; : Steuerung der Stapelreihenfolge

Anzeige & Layout

  • display: block; : Block-Element
  • display: inline; : Inline-Element
  • display: inline-block; : Inline-Block-Element
  • display: flex; : Flex-Layout aktivieren
  • display: grid; : Grid-Layout aktivieren
  • display: none; : Element ausblenden ohne Platz zu beanspruchen

Kurzschreibweisen

  • margin: 10px 5px 15px 20px; (Oben Rechts Unten Links)
  • padding: 10px 5px; (Oben-Unten Links-Rechts)
  • border: 1px dashed red; (Breite Stil Farbe)