⏱️ Leestijd: ca. 5 min.

Basiseigenschappen & borders

Wanneer je een lay-out ontwerpt in software zoals Adobe InDesign of Figma, werk je voortdurend met visuele kaders: hoe breed is de kolom, hoe hoog is een informatieblok, welke rand krijgt een afbeelding en staat de kaart mooi gecentreerd op het scherm?

In webdesign werkt dit exact hetzelfde. Elk element op een webpagina—van een simpele alinea tot een complete navigatiebalk—is in essentie een rechthoekig blok.

In deze les leer je hoe je de afmetingen van die blokken bepaalt met width en height, hoe je strakke randen toevoegt met border, en hoe je een element perfect in het midden van de pagina plaatst met de klassieke CSS-truc margin: auto.

1. Afmetingen bepalen: width & height

Standaard nemen zogenaamde block-elementen (zoals <div>, <section>, <article> of <h1>) de volledige beschikbare breedte ($100\%$) van de pagina in. Met de eigenschappen width (breedte) en height (hoogte) neem je zelf de controle over de afmetingen.

.kaart {
    width: 400px;   /* Vaste breedte van 400 pixels */
    height: 250px;  /* Vaste hoogte van 250 pixels */
}

Pixels (px) vs. Percentages (%)

.banner {
    width: 100%;    /* Vult altijd de volledige breedte van het scherm */
}

De kracht van max-width (Responsive Design)

Als je een element een vaste breedte geeft van width: 800px;, ontstaat er een probleem op een smartphone met een scherm van $375\text{px}$ breed: het element past niet op het scherm en er verschijnt een lelijke horizontale scrollbalk.

De oplossing hiervoor is max-width:

.container {
    max-width: 800px; /* Maximaal 800px breed op een groot scherm... */
    width: 100%;      /* ...maar krimpt flexibel mee op kleinere mobiele schermen! */
}
Gouden regel voor height: Probeer het instellen van een vaste height bij tekstelementen zo veel mogelijk te vermijden. Als een gebruiker de tekstgrootte aanpast of de pagina leest op een smal scherm, kan de tekst 'uit' het vak stromen (overflow). Laat de hoogte liever automatisch bepalen door de inhoud van het element!

2. Randen toevoegen: De border eigenschap

Met een border (rand) geef je de contouren van een element aan. Je kunt de dikte, de stijl én de kleur van de rand instellen.

De verkorte weergave (Shorthand)

In plaats van drie losse CSS-regels te schrijven, combineren we de eigenschappen meestal in één overzichtelijke regel:

.kaart {
    /* border: [dikte] [stijl] [kleur]; */
    border: 2px solid #2563eb;
}

De drie onderdelen uitgelegd:

  1. Dikte (border-width): Bepaalt hoe dik de lijn is (bijv. 1px, 3px, 5px).
  2. Stijl (border-style): Bepaalt het type lijn. De meest gebruikte opties zijn:
3. Kleur (border-color): De kleur van de rand (Hex-code, RGB, HSL of kleurnaam).

Randen per zijde instellen

Wil je enkel aan de onderkant een lijn trekken (bijvoorbeeld onder een titel)? Je kunt elke zijde afzonderlijk stylen:

h2 {
    border-bottom: 3px solid #ef4444; /* Enkel een rode lijn onderaan */
}

.offerte-box {
    border-left: 6px solid #10b981;   /* Een opvallende groene accentlijn links */
}

Bonus: Afgeronde hoeken (border-radius)

Geen strakke hoeken van $90^\circ$, maar zachte afgeronde hoeken? Gebruik de eigenschap border-radius:

.kaart {
    border: 1px solid #cbd5e1;
    border-radius: 8px; /* Rondt alle 4 de hoeken af met een straal van 8px */
}

.ronde-knop {
    border-radius: 999px; /* Maakt een knop volledig afgerond (pilvormig) */
}

.pasfoto {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Maakt van een vierkante afbeelding een perfecte cirkel! */
}

3. Elementen horizontaal centreren met margin: auto

Een van de meest gestelde vragen door beginnende webdesigners is: "Hoe plaats ik een blok of kaart netjes in het midden van mijn pagina?"

Als je een tekst wilt centreren, gebruik je text-align: center;. Maar als je een heel blok-element (zoals een <main> of een <div class="card">) wilt centreren op het scherm, werkt text-align niet. Daarvoor gebruiken we margin: auto.

.gecentreerd-blok {
    max-width: 600px; /* 1. Bepaal een breedte! */
    margin: 0 auto;   /* 2. Centreer het blok horizontaal */
}

Hoe werkt margin: auto?

margin regelt de buitenruimte rondom een element. Met de notatie margin: 0 auto; zeg je:

⚠️ Onthoud deze cruciale voorwaarde:
margin: auto werkt ENKEL als het element een ingestelde breedte (width of max-width) heeft die kleiner is dan het scherm. Een element dat $100\%$ breed is, heeft immers geen overgebleven ruimte aan de zijkanten om te verdelen!

4. Compleet Praktijkvoorbeeld

Laten we alle geleerde concepten combineren in een stijlvolle, responsieve informatiekaart:

HTML (index.html)

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viso Grafische Technieken</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <main class="profiel-kaart">
        <h2>Grafische Technieken</h2>
        <p>In deze richting combineer je creatieve vormgeving met de nieuwste digitale webtechnologieën.</p>
        <a href="#" class="knop">Ontdek meer</a>
    </main>

</body>
</html>

CSS (style.css)

/* Algemene instellingen */
body {
    background-color: #f1f5f9;
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    margin: 0;
}

/* De gecentreerde kaart */
.profiel-kaart {
    /* 1. Afmetingen & Centreren */
    max-width: 480px;
    width: 100%;
    margin: 0 auto; /* Centreert de kaart op het scherm */

    /* 2. Binnenruimte & Achtergrond */
    background-color: #ffffff;
    padding: 32px;

    /* 3. Randen & Afwerking */
    border: 2px solid #e2e8f0;
    border-top: 6px solid #2563eb; /* Opvallende accentrand aan de bovenkant */
    border-radius: 12px;
}

.profiel-kaart h2 {
    color: #0f172a;
    margin-top: 0;
}

.profiel-kaart p {
    color: #475569;
    line-height: 1.6;
}

/* De knop binnen de kaart */
.knop {
    display: inline-block;
    background-color: #2563eb;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    border: none;
}

Samenvatting