Vereisten

• Ultieme HTML

Opmerking

Als je nieuw bent met webontwikkeling en nog geen kennis hebt gemaakt met HTML, raden we aan om eerst met HTML te beginnen. HTML vormt de basis voor CSS, en een goed begrip van HTML zal je CSS-traject verbeteren.

Welkom in de wereld van webdesign

CSS (Cascading Style Sheets) is een krachtig hulpmiddel dat gewone webpagina's transformeert tot visueel aantrekkelijke en gebruiksvriendelijke ervaringen. Als de "toverstaf" van webdesign bepaalt CSS hoe de met HTML gemaakte inhoud op het scherm verschijnt, en voegt het stijl, kleur en esthetiek toe om je ontwerpen echt te laten opvallen.

Wat is CSS?

CSS, de afkorting van Cascading Style Sheets, is een opmaaktaal die wordt gebruikt om de presentatie van documenten in HTML (Hypertext Markup Language) te definiëren. Maar wat betekent dat precies?

Zie HTML als het fundament van een huis – het biedt de essentiële structuur en indeling voor je webpagina. Stel je nu CSS voor als de interieurontwerper van dat huis. CSS is verantwoordelijk voor het toevoegen van stijlen, kleuren en esthetiek aan de structuur, waardoor deze uitnodigend en visueel aantrekkelijk wordt.

Bekijk deze illustratie:

Aan de linkerkant zie je eenvoudige HTML die de basisstructuur biedt. Aan de rechterkant komt dezelfde HTML tot leven met CSS, wat de magie van styling laat zien.

CSS-syntaxis begrijpen

CSS lijkt in het begin misschien een vreemde taal, maar volgt een eenvoudige syntaxis. Een CSS-regel bestaat uit een selector en een declaratieblok. De selector geeft aan op welk HTML-element(en) de regel van toepassing is, terwijl het declaratieblok één of meer eigenschap-waardeparen bevat die de opmaak bepalen.

Laten we dit verduidelijken met een voorbeeld:

p {
  color: purple;
  background-color: green;
}

• De p is de selector, wat aangeeft dat deze regel geldt voor alle <p>-elementen;
• color: purple; specificeert dat de tekstkleur paars moet zijn;
• background-color: green; specificeert dat de achtergrondkleur groen moet zijn.

We gaan later dieper in op selectors, eigenschappen en waarden, maar onthoud dat CSS ons in staat stelt om elementen te selecteren en stijlen toe te passen binnen de accolades {}.

Wat komt hierna?

In de volgende hoofdstukken gaan we dieper in op CSS-selectors, eigenschappen, waarden en technieken om webpagina's visueel aantrekkelijk te maken. Aan het einde van deze cursus beschik je over de vaardigheden om eenvoudige HTML om te zetten in ontwerpen die inspireren en indruk maken.