MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

CSS (Cascading Style Sheets) laten je toe om webpagina's te maken die er fantastisch uitzien.  Maar hoe werkt het?  Dit artikel legt uit wat CSS is, hoe de browser HTML omvormt naar het Document Object Model (DOM), hoe CSS wordt toegepast op delen van de DOM, geeft enkele zeer elementaire syntaxvoorbeelden, en toont welke code er gebruikt wordt om CSS toe te voegen in onze webpagina.

Vereisten: Algemene computervaardigheden, de basissoftware geïnstalleerd hebben, algemene kennis van hoe met files werken, en een basiskennis van HTML (bekijk Introductie tot HTML.)
Doel: Leren wat CSS is en de basis van hoe het werkt.

Wat is CSS?

CSS is een taal om te specifiëren hoe documenten worden gepresenteerd aan gebruikers: welke layout ze hebben, welke opmaak wordt toegepast, ... .

Een document is doorgaans een tekstbestand dat gestructureerd wordt met behulp van een opmaaktaalHTML is de meest voorkomende markuptaal, maar je zal ook andere opmaaktalen tegenkomen zoals SVG of XML.

Een document presenteren aan een gebruiker, betekent dat je het omzet in een bruikbare vorm voor je doelpubliek. Browsers, zoals Firefox, Chrome of Internet Explorer, zijn ontworpen om documenten visueel weer te geven op een computerscherm, projector of printer.

Hoe wordt CSS toegepast op HTML?

Web browsers passen CSS regels toe op een document om zo het uitzicht te veranderen. Een CSS regel bestaat uit:

  • Een set van properties, die waarden krijgen waarmee het uitzicht van de HTML inhoud wordt beïnvloedt.  Bv. wanneer ik wil dat de breedte van mijn element 50% bedraagt van het ouderelement, samen met een rode achtergrond. 
  • Een selector, die de elementen selecteert waarop je de aangepaste waarden wil toepassen.  Bv.: ik wil mijn CSS regel toepassen op alle paragrafen van het document.

Een set van CSS regels, die in een stylesheet staan, bepalen hoe een webpagina er moet uit zien.  Je leert meer over hoe CSS syntax er uitziet in het volgende artikel van de module — CSS Syntax.

Een snel CSS-voorbeeld

Het onderstaande voorbeeld zal de bovenstaande beschrijving verduidelijken.  Laat ons een eenvoudig HTML document nemen met een <h1> en een <p> (merk op dat er een stylesheet wordt toegepast op de HTML via een <link> element):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

De CSS in dit voorbeeld bevat twee regels:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

De eerste regel begint met een h1 selector, die zijn inhoud zal toepassen op het  <h1> element. De regel bevat drie eigenschappen en hun waarden (een combinatie van een eigenschap en een waarde noemen we een declaratie):

  1. De eerste stelt de tekstkleur in op blauw.
  2. De tweede stelt de achtergrondkleur in op geel.
  3. De derde zorgt voor een doorlopende zwarte rand die 1 pixel breed is.

De tweede regel begint met een p selector, die zijn inhoud zal toepassen op het <p> element. De regel bevat één declaratie, die de tekstkleur instelt op rood.

In een webbrowser zal de bovenstaande code volgende output produceren:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

Niet echt mooi, maar het geeft wel een idee van hoe CSS werkt.

Actief leren: Schrijf je eerste CSS

Nu krijg jij de kans om je eerste CSS te schrijven.  Je kan dit doen in de Inputvelden hieronder, die live kunnen aangepast worden. Net zoals in het voorbeeld hierboven heb je enkele eenvoudige HTML-elementen en enkele CSS eigenschappen.  Probeer enkele eenvoudige declaraties toe te voegen aan je CSS, om de HTML op te maken.

Indien je een fout maakt, kan je altijd de Reset knop gebruiken.  Als je echt vast zit, gebruik dan de Toon oplossing knop om één mogelijk antwoord te zien.

Hoe werkt CSS?

Wanneer een browser een document weergeeft, moet het de inhoud van dat document combineren met de stijlinformatie.  Het document wordt in twee stappen verwerkt:

  1. De browser zet HTML en CSS om in de  DOM (Document Object Model). De DOM is een representatie van het document in het geheugen van de computer.  Het combineert de inhoud met de stijl.
  2. De browser geeft de inhoud van de DOM weer.

Over de DOM

Een DOM heeft een boomstructuur. Elk element, attribuut en stukje tekst in de opmaaktaal wordt een DOM node in de boomstructuur.  De nodes worden gedefinieerd door hun relatie tot de andere DOM nodes.  Sommige elementen zijn ouders van kindernodes, en kindnodes hebben broers/zussen.

De DOM begrijpen helpt je CSS te schrijven, debuggen en onderhouden omdat de DOM de plaats is waar je CSS en de documentinhoud aan elkaar gekoppeld worden.

DOM voorstelling

In plaats van een lange, saaie uitleg kijken we naar een voorbeeld van hoe de DOM en de CSS samenwerken.

Gegeven volgende HTML code:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

In de DOM, is de node die overeenkomt met ons  <p> element is een ouder.  De kinderen ervan zijn een tekstnode en nodes die overeenkomen met onze <span> elementen. De SPAN nodes zijn zelf ook ouders, van de tekstnodes die hun kinderen zijn:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

Dit is hoe een browser de HTML interpreteert, die wordt verwerkt tot de bovenstaande DOM-boom, en dan wordt die als volgt in de browser getoont:

CSS toepassen op de DOM

Laat ons zeggen dat we wat CSS toevoegen aan ons document om het te stijlen.  De HTML verandert niet:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Maar we voegen de volgende CSS toe:

span {
  border: 1px solid black;
  background-color: lime;
}

De browser zal de HTML verwerken en de DOM creëeren.  Pas dan zal de browser de CSS verwerken.  Aangezien de enige regel in de CSS een span selector heeft, zal het die regel toepassen op elke span.  Daarna ziet de output er als volgt uit:

Hoe CSS toepassen op je HTML

Er zijn drie verschillende manieren om CSS toe te (laten) passen op een HTML document.  Niet alle manieren zijn even nuttig, maar we overlopen ze hier allemaal.

Externe stylesheets

Je hebt al externe stylesheets gezien in dit artikel, zonder ze zo te noemen.  Een externe stylesheet is wat je krijgt wanneer je CSS neergeschreven is in een apart bestand met een .css extensie. Je refereert ernaar vanuit een HTML element met behulp van een HTML <link> element. Het HTML bestand ziet er uit als volgt:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

En het CSS bestand:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Deze methode is doorgaans de beste, aangezien je met dezelfde stylesheet meerdere documenten kan stijlen.  Bij een wijziging moet je dan maar op één plaats aanpassingen maken.

Interne stylesheets

Een intern stylesheet is wanneer je geen extern CSS bestand hebt, maar in de plaats daarvan je CSS binnen een <style> element plaatst.  Dat element moet binnen de HTML head staan. De HTML zal er als volgt uit zien:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Dit kan nuttig zijn in bepaalde gevallen (bv. als je werkt met een inhoudsbeheersysteem waar je de CSS bestanden niet rechtstreeks kan aanpassen), maar is niet even efficiënt als externe stylesheets.  In een website zou de CSS op elke pagina moeten herhaald worden, en ook op elke pagina aangepast moeten worden bij wijzigingen.

Inline stijlen

Inline stijlen zijn CSS declaraties die slechts op één element worden toegepast, en die vervat zijn in een style attribuut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Doe dit alsjeblieft niet, tenzij het echt niet anders kan!  Dit is zeer slecht voor de onderhoudbaarheid van je code.  Bij wijzigingen is het mogelijk dat je dezelfde informatie meerdere keren per document moet aanpassen.  Het vermengt ook de presentationele informatie van je CSS met de structurele informatie van je HTML.  Dat maakt het moeilijker om de CSS te lezen en de begrijpen.  Verschillende soorten code gescheiden houden maakt het een pak eenvoudiger om met die code te werken.

De enige reden om inline stijlen te gebruiken is wanneer je werkomgeving zeer restrictief is (bv. als je CMS je enkel toelaat om de HTML body te wijzigen).

Verdere literatuur

Je zou nu een basisbegrip moeten hebben van hoe CSS werkt, en hoe browsers er mee omgaan.  In het volgende deel leer je meer over CSS syntax.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,