Vereisten

• Ultieme HTML

Welkom in de wereld van webdesign

CSS (Cascading Style Sheets) verandert eenvoudige HTML in visueel aantrekkelijke, gebruiksvriendelijke webpagina's. Het beheert kleuren, lay-out, afstand en de algehele presentatie—het brengt ontwerpen tot leven.

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?

Beschouw 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:

De linkerkant van de illustratie toont eenvoudige HTML. De rechterkant laat zien hoe CSS dezelfde inhoud kan transformeren met stijl en kleur.

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(e) HTML-element(en) de regel van toepassing is, terwijl het declaratieblok een of meer eigenschap-waardeparen bevat die de opmaak bepalen.

Laten we het 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 voorlopig 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 worden selectors, eigenschappen, waarden en praktische stylingtechnieken behandeld. Aan het einde kun je eenvoudige HTML omzetten in overzichtelijke, aantrekkelijke ontwerpen.