H4 - CSS toevoegen

Je vier HTML-bestanden en afbeeldingen blijven behouden. Je vergelijkt inline, embedded en externe CSS, maar alle blijvende vormgeving komt in www/style.css. Elke tijdelijke stijlproef eindigt met het herstellen van die werkende basis.

• 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;
}

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.

• 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>

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;
}

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.

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.

• 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.

• 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.

• 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.

• 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.

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.

Gebruik de W3C CSS-validator om je bestaande bestanden te controleren.

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?