HTML & CSS Basics

H4 - CSS toevoegen

01 - Structuur en vormgeving scheiden
  • HTML gebruik je voor de inhoud en structuur van een pagina.
  • CSS gebruik je voor de vormgeving van een pagina.
  • CSS is een andere taal dan HTML. Je schrijft dus geen HTML-tags, maar CSS-regels.
  • Dat betekent: HTML vertelt wat iets is, CSS bepaalt hoe het eruitziet.
  • Deze scheiding is een van de mooiste en krachtigste ideeën achter moderne websites.
  • Je kunt dezelfde HTML houden en alleen de CSS aanpassen om een website een andere uitstraling te geven.
  • Je kunt met één CSS-bestand meerdere pagina's tegelijk vormgeven.
  • Daardoor wordt je website overzichtelijker, makkelijker te onderhouden en beter uit te breiden.
<h1>Welkom op mijn website</h1>
<p>Dit is de eerste alinea.</p>

h1 {
    color: navy;
}

p {
    color: black;
}

Actie

  • Kijk naar je eigen HTML-pagina.
  • Bedenk welke HTML-elementen straks een andere vormgeving moeten krijgen.
  • Denk bijvoorbeeld aan de <body>, <h1>, <p> en <a>.
  • Je hoeft nog niets mooi te maken; je kiest eerst welke onderdelen je met CSS wilt aanspreken.
02 - Drie manieren om CSS toe te voegen

Je kunt CSS op drie manieren gebruiken:

  • Inline CSS
  • Embedded CSS
  • Externe CSS

Inline CSS

Inline CSS staat direct in een HTML-tag via het style-attribuut.

<p style="color: red;">Deze tekst is rood.</p>
  • Voordeel: snel om iets kleins te testen.
  • Voordeel: de stijl staat direct bij het element.
  • Nadeel: je HTML wordt rommelig.
  • Nadeel: je moet dezelfde stijl steeds opnieuw typen.
  • Nadeel: onderhoud wordt lastig bij grotere websites.

Embedded CSS

Embedded CSS staat in de <head> van je HTML-bestand, binnen een <style>-tag.

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
  • Voordeel: handig voor één losse pagina.
  • Voordeel: je houdt de CSS iets beter bij elkaar.
  • Nadeel: de CSS geldt alleen voor dat ene HTML-bestand.
  • Nadeel: bij meerdere pagina's moet je dezelfde CSS kopiëren.

Externe CSS

Externe CSS staat in een apart bestand, bijvoorbeeld style.css. In je HTML-bestand zet je in de <head> een <link>-regel. Daarmee verwijs je vanuit de HTML naar een ander tekstbestand met CSS-regels. 

<head>
    <link rel="stylesheet" href="style.css">
</head>
  • Voordeel: beste aanpak voor echte websites.
  • Voordeel: één CSS-bestand kan meerdere HTML-pagina's vormgeven.
  • Voordeel: je HTML blijft schoner en overzichtelijker.
  • Nadeel: je moet goed opletten dat het pad naar het CSS-bestand klopt.
  • Nadeel: je werkt met minimaal twee bestanden tegelijk.

Actie

  • Pas dit CSS-onderdeel toe in je oefenbestand.
  • Verander één waarde en bekijk direct wat er in de browser verandert.
03 - CSS koppelen in de head
  • Een extern CSS-bestand koppel je in de <head> van je HTML-pagina.
  • Daarvoor gebruik je de <link>-tag.
  • Met rel="stylesheet" geef je aan dat het om een stylesheet gaat.
  • Met href="style.css" geef je het pad naar het CSS-bestand op.
<!doctype html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Mijn pagina</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Mijn website</h1>
    <p>Welkom op mijn pagina.</p>
</body>
</html>

Actie

  • Maak naast je index.html een bestand met de naam style.css.
  • Koppel dit bestand in de <head> van je HTML-pagina.
  • Controleer of beide bestanden in dezelfde map staan.
04 - Hoe een CSS-regel werkt

Een CSS-regel bestaat uit een selector, accolades, properties en waarden. 

p {
    color: blue;
    font-size: 18px;
}
  • p is de selector. Daarmee kies je welk HTML-element je wilt vormgeven.
  • De accolades { en } vormen het blok met stijlinstellingen.
  • color en font-size zijn properties. Dat zijn eigenschappen die je wilt aanpassen.
  • blue en 18px zijn waarden.
  • Na elke property en waarde staat een puntkomma: ;.
  • De combinatie property: waarde; noemen we een declaratie.
selector {
    property: waarde;
}

Actie

  • Pas dit CSS-onderdeel toe in je oefenbestand.
  • Verander één waarde en bekijk direct wat er in de browser verandert.
05 - Voorbeeld met font, kleur en uitlijning

In dit voorbeeld gebruik je alleen eenvoudige kleurnamen. Later kun je ook hex-codes, RGB of HSL gebruiken. 

body {
    font-family: Arial, sans-serif;
    color: black;
    background-color: white;
}

h1 {
    color: navy;
    text-align: center;
}

p {
    color: darkgreen;
    font-size: 18px;
    text-align: left;
}

a {
    color: blue;
}
  • font-family bepaalt het lettertype.
  • color bepaalt de tekstkleur.
  • background-color bepaalt de achtergrondkleur.
  • font-size bepaalt de grootte van de tekst.
  • text-align bepaalt de uitlijning van tekst.
  • center centreert tekst.
  • left zet tekst links uitgelijnd.

Actie

  • Zet deze CSS-regels in je bestand style.css.
  • Pas daarna één kleur en één lettergrootte aan.
  • Ververs de browser en controleer wat er verandert.
06 - Tekst en fonts opmaken

Met CSS kun je bepalen welk lettertype tekst gebruikt, hoe groot tekst is en hoeveel ruimte er tussen de regels zit. Dat heeft veel invloed op de leesbaarheid van een website. 

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

p {
    font-style: normal;
}
  • font-family bepaalt het lettertype.
  • Arial is hier het eerste gewenste lettertype.
  • sans-serif is de fallback. Als Arial niet beschikbaar is, kiest de browser een schreefloos lettertype.
  • font-size bepaalt de tekstgrootte.
  • font-weight bepaalt hoe dik de tekst is, bijvoorbeeld normal of bold.
  • font-style bepaalt bijvoorbeeld of tekst normaal of schuin staat.
  • line-height bepaalt de regelhoogte. Meer regelhoogte maakt langere teksten vaak beter leesbaar.
  • text-align bepaalt de uitlijning van tekst.

Gebruik niet te veel verschillende lettertypes op één website. Eén lettertype voor de meeste tekst en eventueel een ander lettertype voor koppen is meestal genoeg.

Actie

  • Pas dit CSS-onderdeel toe in je oefenbestand.
  • Verander één waarde en bekijk direct wat er in de browser verandert.
07 - Van boven naar beneden lezen
  • CSS wordt van boven naar beneden gelezen.
  • Als twee regels even belangrijk zijn, wint meestal de onderste regel.
  • De onderste regel overschrijft dan de eerdere regel.
  • Dit noemen we de cascade.
p {
    color: red;
}

p {
    color: blue;
}

In dit voorbeeld wordt de tekst blauw, omdat de tweede regel later in het CSS-bestand staat.

  • Dit betekent niet dat je dezelfde selector steeds opnieuw moet gebruiken.
  • Probeer CSS overzichtelijk te houden en dubbele regels te voorkomen.
  • Als iets niet werkt, controleer dan of er later in het bestand nog een regel staat die jouw stijl overschrijft.

Actie

  • Pas dit CSS-onderdeel toe in je oefenbestand.
  • Verander één waarde en bekijk direct wat er in de browser verandert.
08 - Waarom werkt mijn CSS niet?
  • Soms schrijf je een CSS-regel, maar zie je geen verandering in de browser.
  • Controleer dan eerst of je CSS-bestand goed gekoppeld is in de <head>.
  • Controleer daarna of er lager in hetzelfde CSS-bestand nog een regel staat voor hetzelfde element.
  • Als twee regels even sterk zijn, wint meestal de onderste regel.
  • Controleer ook of er inline CSS op het HTML-element staat. Inline CSS is vaak sterker dan CSS uit je externe bestand.
<p style="color: red;">Deze tekst wordt rood.</p>

p {
    color: blue;
}

De tekst wordt rood, omdat de stijl direct in de HTML-tag staat. Voor beginners is het daarom beter om inline CSS zoveel mogelijk te vermijden en gewoon in style.css te werken.

Actie

  • Pas dit CSS-onderdeel toe in je oefenbestand.
  • Verander één waarde en bekijk direct wat er in de browser verandert.
09 - Wat doet !important?
  • Met !important maak je een CSS-declaratie extra sterk.
  • Daardoor kan die regel andere CSS-regels overschrijven.
  • Dat kan handig lijken, maar het maakt je CSS sneller onduidelijk.
  • Gebruik !important daarom alleen als je echt geen betere oplossing hebt.
p {
    color: blue;
}

p {
    color: red !important;
}

In dit voorbeeld wordt de tekst rood. De tweede regel gebruikt !important en krijgt daardoor extra invloed. 

p {
    color: red !important;
}

p {
    color: blue;
}

Ook in dit voorbeeld blijft de tekst rood. De blauwe regel staat wel lager, maar de rode regel heeft !important.

  • Voor beginners is het beter om eerst te controleren of je selector klopt.
  • Controleer ook of de volgorde van je CSS-regels logisch is.
  • Gebruik !important pas als laatste redmiddel.

Actie

  • Pas dit CSS-onderdeel toe in je oefenbestand.
  • Verander één waarde en bekijk direct wat er in de browser verandert.
10 - Best practices voor CSS
  • Gebruik voor echte websites meestal een extern CSS-bestand.
  • Gebruik duidelijke bestandsnamen, zoals style.css of layout.css.
  • Zet je CSS-bestand op een logische plek, bijvoorbeeld naast je HTML-bestand of in een map css.
  • Houd HTML voor structuur en CSS voor vormgeving.
  • Gebruik inline CSS alleen om snel iets te testen.
  • Schrijf selectors zo eenvoudig mogelijk.
  • Voorkom veel dubbele regels.
  • Werk netjes met inspringing, zodat je CSS leesbaar blijft.

Actie

  • Pas dit CSS-onderdeel toe in je oefenbestand.
  • Verander één waarde en bekijk direct wat er in de browser verandert.
11 - CSS controleren met de W3C CSS validator

Voor CSS bestaat er ook een validator van W3C. Daarmee controleer je of je CSS-regels technisch goed zijn geschreven. Dat is handig als een kleur, lettertype, achtergrond of uitlijning niet werkt zoals je verwacht.

  • De CSS-validator controleert de schrijfwijze van je CSS.
  • De validator controleert niet of je ontwerp mooi is.
  • De validator kan fouten vinden zoals vergeten puntkomma's, verkeerde properties of fout gespelde waarden.
  • Bij lokale bestanden is Direct Input meestal het makkelijkst.

Stappenplan

  1. Ga naar jigsaw.w3.org/css-validator.
  2. Kies de optie By direct input.
  3. Kopieer je CSS-code uit je HTML-bestand of uit je externe CSS-bestand.
  4. Plak de CSS-code in het invoerveld.
  5. Klik op Check.
  6. Lees de fouten en waarschuwingen van boven naar beneden.
  7. Pas je CSS aan en controleer opnieuw.

Controleer eerst de simpele dingen: staat er een dubbele punt na de property, een puntkomma na de waarde en een sluitende accolade aan het einde?

Quiz

Vraag 1. Waarvoor gebruik je HTML vooral?




Goed. HTML beschrijft de inhoud en structuur van de pagina.
Niet goed. HTML gebruik je vooral voor inhoud en structuur.

Vraag 2. Waarvoor gebruik je CSS vooral?




Goed. CSS bepaalt hoe HTML-elementen eruitzien.
Niet goed. CSS gebruik je voor vormgeving.

Vraag 3. Welke aanpak is meestal het beste voor een echte website?




Goed. Externe CSS houdt je website overzichtelijk en onderhoudbaar.
Niet goed. Voor echte websites gebruik je meestal een extern CSS-bestand.

Vraag 4. Welke tag gebruik je om een extern CSS-bestand te koppelen?




Goed. Met de <link>-tag koppel je een stylesheet.
Niet goed. Een extern stylesheet koppel je met <link rel="stylesheet" href="style.css">.

Vraag 5. Wat is in deze CSS-regel de selector?

p {
    color: blue;
}



Goed. De selector kiest welk HTML-element je vormgeeft.
Niet goed. In dit voorbeeld is p de selector.

Vraag 6. Wat is in color: blue; de property?




Goed. color is de eigenschap die je aanpast.
Niet goed. De property staat voor de dubbele punt.

Vraag 7. Welke kleur krijgt de tekst?

p {
    color: red;
}

p {
    color: blue;
}



Goed. Bij gelijke regels wint meestal de onderste regel.
Niet goed. CSS wordt van boven naar beneden gelezen, dus de onderste regel wint hier.

Vraag 8. Wat controleer je eerst als je externe CSS niet zichtbaar verandert?




Goed. Controleer eerst of de <link>-regel naar het juiste CSS-bestand verwijst.
Niet goed. Begin met controleren of je CSS-bestand goed gekoppeld is.

Vraag 9. Wat doet !important in CSS?




Goed. !important geeft een CSS-declaratie extra invloed.
Niet goed. !important maakt een CSS-declaratie extra sterk, maar gebruik het liever weinig.

Vraag 10. Welke property gebruik je om tekst te centreren?




Goed. Met text-align: center; centreer je tekst.
Niet goed. Voor tekstuitlijning gebruik je text-align.

Vraag 11. Welke property bepaalt het lettertype?




Goed. Met font-family kies je het lettertype.
Niet goed. Het lettertype stel je in met font-family.