CSS leren

Wat leer je met CSS?

CSS is meer dan alleen kleurtjes instellen. Wie CSS goed beheerst, kan complete lay-outs bouwen en websites laten werken op elk apparaat. In de CSS-track behandelen we alles wat je als webontwikkelaar nodig hebt:

• Kleuren, lettertypen en achtergronden — de visuele basis van elke pagina
• Margins, padding en het box model — hoe ruimte om elementen werkt
• Flexbox — de moderne manier om elementen naast en onder elkaar te plaatsen
• Grid — krachtige tweedimensionale lay-outs in een paar regels
• Media queries — zodat je site er op een telefoon net zo goed uitziet als op een laptop
• Animaties en transitions — subtiele beweging die je interface levend maakt
• CSS-variabelen en best practices — onderhoudbare code schrijven

De CSS-track van mbo-sd

De CSS-track bestaat uit 12 gratis lessen. Elke les bouwt voort op de vorige en bevat uitleg, codevoorbeelden en oefeningen die je direct in de browser uitvoert. Je hebt geen editor of extra software nodig.

Wat is CSS precies?

CSS staat voor Cascading Style Sheets. Je schrijft regels die zeggen: "dit element heeft die stijl." Een CSS-regel bestaat uit drie delen: een selector (welk element), een eigenschap (wat je aanpast) en een waarde (hoe het eruitziet).

Bijvoorbeeld: je hebt een HTML-element <h1>Hallo</h1>. Met CSS geef je dat een kleur en lettergrootte:

/* Selector   Eigenschap   Waarde */
h1 {
  color: indigo;       /* tekstkleur  */
  font-size: 2rem;     /* lettergrootte */
  margin-bottom: 1rem; /* ruimte onder het element */
}

/* Klasse-selector: begint met een punt */
.card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Het woord "Cascading" verwijst naar de volgorde van regels: als meerdere regels hetzelfde element stijlen, wint de meest specifieke of de laatste. Dat klinkt ingewikkeld, maar in de praktijk leer je snel hoe dat werkt — les 2 over selectors legt het stap voor stap uit.

Wat heb je nodig?

Om CSS te leren heb je één ding nodig: basiskennis van HTML. CSS geeft stijl aan HTML-elementen — zonder HTML is er niets om op te stijlen. Als je nog geen HTML kent, begin dan eerst met de HTML-cursus. Specifiek les 1 van de HTML-track geeft je al genoeg basis om met CSS te starten.

Je hebt geen speciale software nodig. Alle oefeningen in de CSS-track draaien direct in de browser. Wel handig om later te installeren: een code-editor zoals VS Code, maar dat is geen vereiste om te beginnen.

Wat na CSS?

Zodra je CSS beheerst, liggen de volgende stappen voor de hand:

• JavaScript leren — de derde pijler van webontwikkeling. Met JavaScript maak je pagina's interactief.
• Bootstrap — een CSS-framework met kant-en-klare componenten die voortbouwen op alles wat je al weet over CSS. Sneller mooie pagina's bouwen.

CSS is ook de basis voor frameworks als Tailwind CSS, die je later tegenkomt. Alles wat je hier leert, is daarvoor direct bruikbaar.