Wat is CSS?

Cascading Style Sheets (CSS) zijn een stijltaal die wordt gebruikt om de presentatie van een document te beschrijven dat is geschreven in een opmaaktaal (HTML, XHTML, SVG, XML).

Belangrijkste functies van CSS:

Scheiding van presentatie en inhoud: Hiermee kan het uiterlijk van een webpagina worden gewijzigd zonder de structuur aan te passen.
Stijltoepassing op elementen: Beheer van kleuren, lettertypen, groottes, marges, randen en andere visuele eigenschappen van elementen.
Creëren van responsief ontwerp: Met media queries kunnen verschillende stijlen worden toegepast afhankelijk van de kenmerken van het apparaat van de gebruiker (schermresolutie, oriëntatie, enz.).
Animaties en overgangen: Creëren van visuele effecten voor interactiviteit en verbetering van de gebruikerservaring.
Lay-outbeheer: Positionering van elementen op de pagina met behulp van verschillende technieken (Flexbox, Grid, floats, enz.).

Structuur van een CSS-regel:

/* Selector */
h1 {
  /* Declaraties */
  color: blue; /* Eigenschap: waarde; */
  font-size: 24px;
}

Belangrijkste manieren om CSS te koppelen aan een HTML-document:

Extern bestand (<link>): De meest gebruikte en aanbevolen methode. Stijlen worden opgeslagen in een apart .css-bestand.
```
<link rel="stylesheet" href="styles.css">
```
Binnen <style>-tag: Stijlen worden direct in het HTML-document gedefinieerd, meestal in de <head>-sectie. Geschikt voor kleine stijlen of snelle tests.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Inline stijlen (style-attribuut): Stijlen worden toegepast op een specifiek HTML-element via het style-attribuut. Heeft een hoge prioriteit, maar bemoeilijkt onderhoud en schaalbaarheid.
```
<div style="border: 1px solid black;">
  Dit is een div met inline stijl.
</div>
```

De cascade bepaalt hoe de browser stijlen toepast wanneer er meerdere regels in conflict zijn voor hetzelfde element. Er wordt rekening gehouden met:

Prioriteit van selectors: Meer specifieke selectors hebben een hogere prioriteit.
Volgorde: Later gedeclareerde regels overschrijven eerdere regels met dezelfde prioriteit.
!important: Declaraties met !important hebben de hoogste prioriteit (voorzichtig gebruiken).
Bron van stijlen: Stijlen van de auteur hebben een hogere prioriteit dan die van de gebruiker of de standaardstijlen van de browser.