Hallo, CSS wereld!

In het volgende vertellen we je wat CSS is en waarom het handig is. Uiteraard wil je eerst weten wat de mogelijkheden van CSS zijn voor je moeite in deze cursus gaat steken. Als je de huidige tekst in een webbrowser leest, zie je CSS meteen al aan het werk. Let op de verschillende achtergrondkleuren van de tekstvakken, let op de diverse lettertypes en de kleuren van de letters in de hoofdjes, let op het menu bovenaan de pagina en de clickable cursusinhoud rechts. CSS zorgt voor dit alles. De onderliggende CSS code van de huidige pagina is te moeilijk voor een beginner, dus laten we op een meer basaal niveau beginnen.

Elk zichzelf respecterende inleiding in computerprogrammering begint altijd met een voorbeeld waarin de tekst "Hallo, wereld!" naar beeldscherm of printer geschreven wordt. Hiermee wordt uitgelegd hoe de lezer op de eenvoudigst mogelijke manier output uit zijn programma kan krijgen. Omdat dit in HTML zonder meer kan, zonder gebruik van CSS, leuken we het voorbeeld een beetje op door de letters een kleurtje te geven.

<style type="text/css">
h1 {
	color: DeepSkyBlue;
}
</style>

<h1>Hello, world!</h1>

Ja, dat is alles. Dit is onze eerste CSS regel die de letterkleur hemelsblauw definieert en toepast op een H1 (header) element. Dit gebeurt door de kleurwaarde "DeepSkyBlue" toe te kennen aan de kleureigenschap (color property) van de de tekst in het element. Je kan het controleren door de regel met knippen en plakken over te brengen naar je tekst editor, of simpelweg op de "Try this example" knop te klikken.

Samenvatting

Je ziet waarschijnlijk al wel dat CSS tamelijk eenvoudig is, maar schrik niet als je het voorbeeld toch nog niet helemaal begrijpt. In het volgende hoofdstuk gaan we namelijk uitleggen wat de CSS regels feitelijk betekenen en waarom ze zo opgeschreven zijn als ze zijn.