Hoofdstuk 5: CSS Basis - VHSI Webontwikkelingscursus

🎯 Overzicht van de Sessie

Inleiding tot CSS
CSS selectors
Kleuren en achtergronden
Typografie (lettertypen en tekst)
Het Box Model
CSS toevoegen aan HTML

🚀 Leerdoelen

Aan het einde van dit hoofdstuk kun je:

Begrijpen wat CSS is en waarom het wordt gebruikt
CSS toevoegen aan HTML-documenten (3 methoden)
Verschillende CSS selectors gebruiken (element, class, id)
Kleuren en achtergronden toepassen
Tekst en lettertypen stylen
Het CSS Box Model begrijpen

Deel 1: Inleiding tot CSS

Wat is CSS?

CSS (Cascading Style Sheets) bepaalt hoe HTML-elementen eruitzien.

HTML = Structuur (het skelet)
CSS = Stijl (de kleding/make-up)

CSS Syntaxis

selector {
    property: value;
}

Voorbeeld

h1 {
    color: blue;
    font-size: 24px;
}

h1 = Selector (wat je wilt stylen)
color = Eigenschap (welk aspect)
blue = Waarde (hoe het eruit moet zien)

Deel 2: CSS toevoegen aan HTML

Methode 1: Externe CSS (Aanbevolen)

Maak een apart .css bestand en link het in de <head>:

<head>
    <link rel="stylesheet" href="style.css">
</head>

Methode 2: Interne CSS

Plaats CSS in de <style> tag binnen de <head>:

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

Methode 3: Inline CSS

Direct toevoegen aan een element (niet aanbevolen voor grote projecten):

<h1 style="color: blue;">Hallo</h1>

Methode	Wanneer te gebruiken
Extern	Beste voor sites met meerdere pagina's (standaard)
Intern	Styling voor één enkele pagina
Inline	Snelle fixes (vermijd indien mogelijk)

Deel 3: CSS Selectors

Selectors bepalen welke HTML-elementen gestyled moeten worden.

Element Selector

p {
    color: red;
}

Stylt ALLE <p> elementen.

Class Selector

HTML:

<p class="highlight">Tekst</p>

CSS:

.highlight {
    background-color: yellow;
}

Let op: Class selectors beginnen met een .

ID Selector

HTML:

<p id="unique">Tekst</p>

CSS:

#unique {
    font-size: 20px;
}

Let op: ID selectors beginnen met een #. Elk ID moet uniek zijn per pagina.

Selector Prioriteit

Inline CSS (hoogste)
ID selector
Class selector
Element selector (laagste)

Deel 4: Kleuren in CSS

CSS ondersteunt verschillende manieren om kleuren te definiëren:

Kleurnamen: red, blue, tomato (140+ ondersteund)
Hexadecimaal: #FF0000 (Rood), #0000FF (Blauw)
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5) (met 50% transparantie)

Deel 5: Achtergronden

Achtergrondkleur

body {
    background-color: #f0f0f0;
}

Achtergrondafbeelding

div {
    background-image: url('patroon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Deel 6: Typografie (Tekst & Lettertypen)

font-family

Bepaalt de lettertypen: Arial, sans-serif

font-size

Stelt de grootte in: 16px, 1.2rem

font-weight

Stelt de dikte in: bold, normal, 400-900

text-align

Uitlijning: left, center, right, justify

Deel 7: Het Box Model

Elk HTML-element is een box met 4 delen:

Inhoud (Content) → Opvulling (Padding) (binnenkant) → Rand (Border) → Marge (Margin) (buitenkant)

div {
    padding: 20px;       /* Ruimte binnenin */
    border: 2px solid;   /* De lijn */
    margin: 20px;        /* Ruimte buitenaf */
}

Pro Tip: Box Sizing

Gebruik box-sizing: border-box; om de breedte/hoogte inclusief padding en border te maken.

* {
    box-sizing: border-box;
}

Deel 8: Woordenschat

Term	Definitie
Selector	Bepaalt welk element gestyled moet worden
Eigenschap	Het kenmerk dat gestyled wordt
Waarde	De toegepaste stijl
Marge	Ruimte buiten de rand
Padding	Ruimte binnen de rand
Rand	Lijn rondom een element

🏋️ Praktijkoefeningen

Test je kennis met deze scenario-gebaseerde uitdagingen:

Oefening 1: De Gestylde Nieuwsbrief

Maak een inschrijfformulier voor een nieuwsbrief. Vereisten:

Een div container met de class newsletter
Geef het een lichtgrijze achtergrond, 20px padding en een 2px doorgetrokken rand (solid border)
Stijl de h2 en p binnenin met een specifiek lettertype (font-family)
Voeg een 1px rand en 5px padding toe aan de input
Geef de button een blauwe achtergrond en witte tekst

Oefening 2: De Dienstenlijst

Maak een lijst met drie diensten. Vereisten:

Gebruik classes zoals service-item voor elk blok
Geef elk item een andere achtergrondkleur met specifieke class-namen (bijv. .bg-blue, .bg-green, .bg-yellow)
Voeg 15px marge toe tussen de items
Gebruik een class-selector om alle titels van de diensten tegelijk te stijlen

Oefening 3: De Profielkop

Bouw een profielsectie. Vereisten:

Een div die dient als tijdelijke afbeelding met vaste breedte (100px) en hoogte (100px)
Centreer alle inhoud (afbeelding, naam, bio) met text-align: center
Voeg 5px padding en een 3px gestippelde onderrand toe aan de container van de kop
Gebruik een ID-selector voor de profielnaam om deze groter te maken dan de andere tekst

Oefening 4: De Typografische Poster

Maak een lay-out met alleen tekst. Vereisten:

Gebruik minstens drie verschillende kopniveaus (h1, h2, h3)
Experimenteer met font-family (serif vs sans-serif)
Pas line-height en letter-spacing aan om het eruit te laten zien als een poster
Gebruik text-transform: uppercase voor de hoofdtitel

Oefening 5: De "Box Model" Uitdaging

Beheers het box model. Vereisten:

Maak drie geneste boxen (.outer, .middle, .inner)
Geef elke box een andere border kleur en 10px padding
Voeg 20px margin toe aan de middelste box
Pas box-sizing: border-box toe op alle elementen en zie hoe de totale grootte voorspelbaar blijft

Ga Verder met Leren

← Vorige: Semantische HTML Volgende: CSS Gevorderd →