CSS wordt gebruikt voor het stijlen en layouten van webpagina's, bijvoorbeeld om letterypes, kleuren, afmetingen en witruimte van de inhoud aan te passen, of voor het toevoegen van animaties en andere decoratieve eigenschapen. Deze module zet je op weg naar het bemeersteren van CSS, met een basis van de werking. Inclusief selectors and properties, het schrijven van CSS regels, CSS toepassen op HTML, hoe lengtes, kleuren en andere eenheden in CSS toete passen, cascading en overerven en het debuggen van CSS.

Vereisten

Voordat je aan deze module begint, zou je:

  1. Een basiskennis van computers en het web moeten hebben (gewoon kijken naar inhoud is voldoende)
  2. Een basis werkomgeving hebben zoals beschreven in Installing basic software en een begrip van hoe bestanden moerten worden aangemaakt en beheerd, zoals beschreven in Dealing with files.
  3. Een vertrouwdheid met HTML, zoals beschreven in Introduction to HTML.

Opmerking: Als je werkt op een computer, tablet of ander apparaat waar je niet de mogelijkheid hebt om bestanden aan te maken, dan kan je, voor het grootste stuk, codevoorbeelden maken in een online programma zoals JSBin of Thimble.

Handleidingen

Deze module bevat de volgende artikels. Deze omvatten al de basis theorie van CSS en bieden voldoende kansen om vardigheden te testen.

Hoe werkt CSS
In deze module starten we met een theoretische basis, kijken we naar wat CSS is, hoe de browser HTML omvormt in een DOM, hoe CSS wordt toegepast op delen van de DOM, een paar basis voorbeelden en welke code gebruikt wordt om CSS te injecteren in onze webpagina.
CSS syntax
Als volgende gaan we dieper in op de CSS syntax. Kijkend naar hoe properties en hun values samen een declaration vormen, meerdere declarations een declaration block en meerdere van deze declaration blocks en selectors samen een volledige CSS rule worden. We ronden af met te kijken naar andere CSS Syntax mogelijkheden zoals commentaren en witruimtes. 
Selectoren
Selectoren werden al vernoemd in het vorige artikel, maar in dit hoofdstuk gaan we hier dieper op in, welke selectorsoorten zijn er en hoe werken ze.
CSS waarden en eenheden
Er zijn veel verschillende types van CSS waarden om rekening mee te houden. Van numerieke waarden tot kleuren tot functies die een bepaalde actie uitvoeren (zoals het inladen van een achtergrond afbeelding of het draaien van een element). Sommige van deze waarden hangen vast aan bepaalde eenheden om een weergave te bepalen. Wil je een element dat 30 pixels breed is? of een van 30 centimeter?, of 30ems? In dit artikel gaan we kijken naar de meest voorkomende waarden zoals lengtes, kleuren en gemakkelijke functies, maar ook de minder voorkomende waarden zoals graden en zelfs eenheidsloze numerieke waarden.
Waterval en overerving (cascade and inheritance)
CSS heeft twee verschillende, maar verwante systemen om stijlconflicten op te lossen.  Die conflicten kunnen selectorconflicten zijn (verschillende selectoren die hetzelfde element selecteren; welke selector wint er en wordt dus toegepast?) of watervalconflicten (wanneer elementen genest zijn in elkaar en er dus stijlregels van de ouders kunnen overgeërfd worden door de kinderen; sommige overervingen zijn nuttig, andere niet).
Dit artikel behandelt beide systemen in voldoende detail om nuttig te zijn, zonder zo diep te gaan dat het te veel wordt.
Het doos-model (box-model)
Het CSS doosmodel is de basis van layout op het Web.  Elk element wordt voorgesteld als een rechthoekige doos.  De inhoud, vulling (padding), rand (border) en marge zitten rond elkaar genesteld als de laagjes van een ajuin.  Als de browser een webpagina weergeeft (rendering), dan zal die uitzoeken welke stijlen moeten toegepast worden op de inhoud van elke doos, hoe groot de omringende lagen zijn en waar elke doos moet staan ten opzichte van de andere dozen.  Om mooie layouts te kunnen maken met CSS, moet je begrijpen hoe het doosmodel werkt.
CSS debuggen
In het laatste artikel van deze module nemen we een kijkje naar enkele basismethode's om CSS te debuggen.  We kijken hoe we kunnen zien welke CSS wordt toegepast op een pagina, en welke andere hulpmiddelen (tools) er bestaan om fouten te vinden in je CSS code.

Beoordelingen

De volgende beoordelingen zullen je kennis van de basis-CSS, zoals uitgelegd in de gidsen hierboven, testen.

Begrip van basis CSS
Deze beoordeling test je begrip van de bovenstaande gidsen aan de hand van zorgvuldig in elkaar gestoken oefeningen.

Verdere literatuur

Intermediaire Web-geletterdheid 1: CSS introductie
Een uitstekende basiscursus van Mozilla die veel van de vaardigheden waarover gesproken wordt in de basismodule CSS verkent en test.  Leer hoe je HTML-elementen op een webpagina kan stijlen met behulp van CSS selectoren, attributen en waarden.

Documentlabels en -medewerkers

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