CSS¶

CSS (Cascading Style Sheets) bepaalt hoe HTML eruitziet: kleuren, lettertypen, ruimte, layout en responsiviteit. Op deze pagina leer je de basis die je nodig hebt om snel te starten en nette, consistente webpagina’s te maken.

Doelen¶

Begrijpen wat CSS is en hoe je het koppelt aan HTML
Basisselectoren en de cascade/specifiteit toepassen
Werken met het box model, typografie, kleuren en spacing
Layout maken met Flexbox en een voorproefje van Grid

CSS toevoegen aan HTML¶

Er zijn drie manieren. Gebruik bij voorkeur een extern stylesheet.

1) Extern (aanrader)

<!-- in <head> -->
<link rel="stylesheet" href="/styles.css">

2) Intern (vermijden)

<style>
  p { color: #333; }
</style>

3) Inline (ook vermijden)

<p style="color: #333;">Tekst</p>

Selectors: elementen, klassen, id’s en combinaties¶

Element: p, h1, a
Klasse: .card voor herbruikbare stijlen
ID: #header voor unieke onderdelen
Combinaties: nav a, ul li a:hover

/* Element */
h1 { font-size: 2rem; }

/* Klasse */
.button { background: #0ea5e9; color: white; padding: 0.5rem 1rem; }

/* ID (spaarzaam gebruiken) */
#hero { background: #f1f5f9; }

/* Combinatie + state */
nav a:hover { text-decoration: underline; }

Het Box Model¶

Elk element is een doos: content + padding + border + margin.

.card {
  box-sizing: border-box; /* aan te raden om berekeningen voorspelbaar te maken */
  width: 300px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  margin: 1rem auto; /* 1rem boven/onder, automatisch centreren links/rechts */
}

Kleuren en eenheden¶

Kleuren: #1f2937, rgb(31 41 55), hsl(215 20% 65%)
Eenheden: px, rem (relatief aan root), em (relatief aan parent), %, vh/vw

Aanrader: gebruik rem voor consistente schaal:

html { font-size: 16px; } /* 1rem = 16px */
body { font-size: 1rem; line-height: 1.5; }

Typografie¶

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #0f172a; /* tekstkleur */
}

h1 { font-size: 2rem; margin-bottom: 0.5rem; }
p { margin-bottom: 1rem; }
a { color: #0ea5e9; text-decoration: none; }
a:hover { text-decoration: underline; }

Spacing en layout-basics¶

.container {
  max-width: 960px;
  margin: 0 auto;    /* centreren */
  padding: 0 1rem;   /* zijmarges op kleine schermen */
}

Flexbox (veelgebruikt)¶

.row {
  display: flex;
  gap: 1rem;            /* ruimte tussen items */
  align-items: center;  /* kruis-as uitlijning */
  justify-content: space-between; /* hoofd-as verdeling */
}

.col {
  flex: 1;              /* verdeel beschikbare ruimte */
}

HTML:

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

Grid¶

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Responsief ontwerp¶

Media queries passen stijlen aan op schermbreedte.

.card { padding: 1rem; }

@media (min-width: 768px) {
  .card { padding: 2rem; }
}

Gebruik flex/grid met gap, %, fr, rem en max-width in plaats van vaste pixels waar mogelijk.

States, pseudo-classes en -elements¶

button:hover { background: #0284c7; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* pseudo-elementen */
.badge::before {
  content: "Nieuw"; /* voegt virtuele content toe */
  display: inline-block;
  background: #22c55e;
  color: #064e3b;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  margin-right: 0.5rem;
  border-radius: 0.25rem;
}

Best practices voor beginners¶

Hou CSS in aparte bestanden en werk met herbruikbare classes
Geef betekenisvolle classnamen (.card, .button-primary)
Vermijd diepe geneste selectors; houd het simpel en voorspelbaar
Gebruik box-sizing: border-box overal
Start mobiel-vriendelijk en schaal op met media queries
Vermijd !important

Debuggen en tools¶

Browser DevTools: Inspecteer element, bekijk toegepaste regels en box model
Gebruik formatter/linters (Prettier/Stylelint) in je editor

Verder lezen¶

MDN Web Docs – https://developer.mozilla.org/docs/Web/CSS
Flexbox Cheatsheet – https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid Guide – https://css-tricks.com/snippets/css/complete-guide-grid/