Skip to content

CSS Stijl Cheat Sheet

CSS (Cascading Style Sheets) wordt gebruikt om de lay-out en vormgeving van webpagina’s te bepalen. Deze cheat sheet bevat de meest gebruikte eigenschappen en selectors.

Selectors

Type Voorbeeld Beschrijving
All * { } Selecteert alle elementen
Type h1 { } Selecteert specifieke HTML-tag
Class .header { } Selecteert elementen met class=“header”
ID #main { } Selecteert element met id=“main”
Descendant div p { } Selecteert alle p binnen div
Pseudo a:hover { } Status bij mouseover

Boxmodel 

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Binnenmarge */
  border: 1px solid #ccc; /* Rand */
  margin: 20px;     /* Buitenmarge */
  box-sizing: border-box; /* Inclusief rand en padding */
}

Typografie

Property Beschrijving Voorbeeld
font-family Lettertypefamilie font-family: Arial, sans-serif;
font-size Lettergrootte font-size: 16px;
font-weight Lettergewicht font-weight: bold;
text-align Tekstuitlijning text-align: center;
line-height Regelhoogte line-height: 1.5;
color Tekstkleur color: #333;

Kleuren & Achtergronden

Property Beschrijving Voorbeeld
background-color Achtergrondkleur background-color: #f0f0f0;
background-image Achtergrondafbeelding background-image: url('bg.jpg');
background-size Achtergrondgrootte background-size: cover;
opacity Transparantie opacity: 0.8;

Positionering

  • position: static; : Standaard flow lay-out
  • position: relative; : Verschuiving t.o.v. eigen positie
  • position: absolute; : Positionering t.o.v. dichtstbijzijnde niet-statische ouder
  • position: fixed; : Positionering t.o.v. browservenster
  • position: sticky; : Vastgezet bij scrollen naar specifieke positie
  • z-index: 10; : Stapelvolgorde bepalen

Display & Lay-out

  • display: block; : Blokelement
  • display: inline; : Inline-element
  • display: inline-block; : Inline-blokelement
  • display: flex; : Flex-lay-out inschakelen
  • display: grid; : Grid-lay-out inschakelen
  • display: none; : Element verbergen zonder ruimte in te nemen

Eigenschappen Afkortingen

  • margin: 10px 5px 15px 20px; (Boven Rechts Onder Links)
  • padding: 10px 5px; (Boven-Onder Links-Rechts)
  • border: 1px dashed red; (Breedte Stijl Kleur)