Cascading Style Sheets (CSS)

CSS, Cascading Style Sheets, Cascaderende stijlbladen, Stijlbladen, Stylesheets, Stijlblad, Stylesheet, Cascading Style Sheet, Cascading Stylesheet, CSS3, CSS2, CSS-stijlen, .css
CSS is de opmaaktaal om de presentatie van webpagina’s en webapplicaties te bepalen. Met de cascade, selectors en moderne layoutsystemen als Flexbox en Grid stuur je typografie, kleur, spacing en layout aan.
Development

Wat is Cascading Style Sheets (CSS)?

Cascading Style Sheets (CSS) is de opmaaktaal die bepaalt hoe HTML- of XML-inhoud wordt gepresenteerd in de browser. CSS scheidt vormgeving van structuur, zodat je consistent typografie, kleuren, afstanden en layouts kunt beheren en hergebruiken over pagina’s en componenten heen.

Belangrijkste concepten

  • Cascade & specificiteit: Wanneer meerdere regels op hetzelfde element van toepassing zijn, bepaalt de cascade welke stijl wint. De volgorde is grofweg: inline-styles > ID-selectors > class/attribuut/pseudoklasse > element/pseudo-element. Latere regels overschrijven eerdere met gelijke specificiteit. Gebruik !important spaarzaam. Moderne cascade layers (@layer) helpen om prioriteit expliciet te sturen.
  • Box model: Elk element bestaat uit content, padding, border en margin. Met box-sizing: border-box; wordt groottebeheer voorspelbaarder.
  • Selectors: Type-, class- en ID-selectors, combinators (>, +, ~, spatie), attribuutselectors en pseudo(‑)klassen zoals :hover, :focus-visible, :not() en pseudo-elementen (::before, ::after).
  • Layoutmethoden: Flexbox (1‑dimensionaal) voor rijen/kolommen en uitlijning; CSS Grid (2‑dimensionaal) voor complexe rasterlayouts. Positionering (position) en float worden selectief gebruikt.
  • Responsive design: Media queries (@media) en container queries maken component- en schermgrootte-afhankelijke stijlen mogelijk. Viewport-eenheden en functies als clamp() helpen bij fluid typografie en spacing.
  • Variabelen: CSS Custom Properties (--kleur-primary) ondersteunen theming, dynamische updates en consistente design tokens.
  • Animaties & transities: Met transition en @keyframes maak je soepele micro‑interacties. Geef de voorkeur aan transform en opacity voor performance en respecteer prefers-reduced-motion.
  • Compatibiliteit & feature detection: Gebruik @supports voor progressieve verbetering. Vendor-prefixes worden vaak automatisch toegevoegd via tooling.
  • Organisatie & schaalbaarheid: Methodes als BEM, OOCSS, utility-first en cascade layers verbeteren onderhoudbaarheid. Sluit aan op design systems en componentgedreven ontwikkeling.
  • Pre- en postprocessing: Sass/SCSS en PostCSS voegen functies toe zoals nesting en autoprefixing. Bundlers bouwen en splitsen styles voor performance (bijv. critical CSS).
  • Toegankelijkheid: Verwijder focus-indicatoren niet, waarborg voldoende contrast en ondersteun voorkeuren zoals prefers-color-scheme (dark mode) en prefers-reduced-motion.

Toepassingen

CSS wordt gebruikt voor de volledige visuele presentatie van websites en webapplicaties, van basistypografie tot complexe, responsieve componenten en theming binnen design systems.

Veelvoorkomende toepassingen

  • Typografie en kleur: Lettertypes, schalen, leestekstopmaak, contrast en kleurpaletten consistent toepassen.
  • Layout en paginaopbouw: Grid- en componentstructuren bouwen met Flexbox en CSS Grid, inclusief uitlijning, ordering en spacing.
  • Responsiveness: Schaalbare interfaces via media- en container queries, fluid typografie en adaptieve componenten.
  • Interactie en micro-animaties: Hover-, focus- en state-styling, transitions en keyframe-animaties voor feedback en delight.
  • Theming & design systems: Design tokens via CSS-variabelen, licht/donker thema’s en merkrichtlijnen consistent doorvoeren.
  • Toegankelijkheid en voorkeuren: Focus states zichtbaar houden, reduced-motion en color-scheme voorkeuren ondersteunen.
  • Performance optimalisatie: Critical CSS inlinen, assets minimaliseren, font-display strategieën en render-blokkerende styles beperken.
  • Print- en kanaalspecifieke stijlen: @media print voor afdrukken en beperkte CSS voor e-mailtemplates.
  • Integratie met CMS en frameworks: Thema’s en componentbibliotheken stylen binnen CMS’en en component-gedreven frameworks.

Veelgestelde vragen

Er zijn drie hoofdopties:

  • Extern stylesheet (aanbevolen): in de <head> van je HTML: <link rel='stylesheet' href='/styles.css'>.
  • Interne stijl: een <style>-blok in de <head> van het document.
  • Inline stijl: het style-attribuut op een element. Gebruik dit alleen voor uitzonderingen; het schaalt slecht.

Voor onderhoudbaarheid en caching is een extern stylesheet meestal de beste keuze.

Flexbox is 1-dimensionaal en optimaliseert lay-out in één richting (rij of kolom) met sterke mogelijkheden voor uitlijning en verdeling van ruimte. CSS Grid is 2-dimensionaal en geschikt voor complexe rasterindelingen met rijen én kolommen.

  • Gebruik Flexbox voor navbars, knoppenrijen, kaartlijsten en verticale centrering.
  • Gebruik Grid voor pagina-rasters, dashboards en complexe componentlayouts met expliciete rijen/kolommen.

Beperk specificiteitsopbouw en structureer je styles:

  • Schrijf lage-specificiteit selectors (bijv. class-based) en vermijd diepe nesting en ID’s.
  • Gebruik cascade layers (@layer) om de prioriteit van basis-, component- en utility-styles te sturen.
  • Orden styles logisch: reset/base → componenten → utilities → overrides.
  • Pas @supports en progressive enhancement toe i.p.v. generieke overrides.

Reserveer !important voor uitzonderlijke gevallen (bijv. utility-classes of third‑party overrides).

Auteur & updates

Auteur: Wouter
Publicatiedatum: 29-01-2026
Laatste update: 29-01-2026