HTML bepaalt wat er op een webpagina staat. CSS bepaalt hoe het eruitziet. Dat is het verschil in twee regels, en met die twee talen is elke pagina op internet gemaakt, ook de pagina die je nu leest.
HTML staat voluit voor Hyper Text Markup Language. Het is geen programmeertaal maar een opmaaktaal: je zet tags om je tekst heen die vertellen wát iets is. Een kop, een alinea, een lijstje, een link, een afbeelding. De browser leest die tags en weet daardoor wat hij moet neerzetten en in welke volgorde.
Zo ziet dat eruit:
<h1>Cursus HTML en CSS</h1> <p>In twee dagen bouw je je eerste webpagina.</p> <a href="/cursus/html-en-css-basis">Bekijk de cursus</a>
Bewaar dat in een bestand met de naam index.html en dubbelklik erop. Je browser opent een webpagina met een kop, een alinea en een link. Lelijk, maar het werkt. En precies daarvoor is CSS bedacht.
CSS staat voor Cascading Style Sheets. Ook dat is geen programmeertaal maar een manier om op te schrijven hoe die tags eruit moeten zien. Welk lettertype, welke kleur, hoeveel ruimte eromheen, hoe breed een kolom mag worden.
h1 { color: #f87200; font-size: 32px; }
p { font-family: helvetica, arial, sans-serif; line-height: 1.6; }
a { color: #283354; }
Het woord cascading zit er niet voor niets in. Regels stapelen: wat je voor alle alinea's afspreekt geldt overal, tenzij je er voor één alinea iets specifieker overheen zet. Die stapeling is het handigste en het verwarrendste van CSS tegelijk.
De twee samen in één pagina
Dit is een complete pagina. Zet hem in een bestand, open hem in je browser, verander een kleur en vernieuw de pagina. In vijf minuten heb je gezien hoe de twee talen op elkaar inwerken.
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Mijn eerste pagina</title>
<style>
body { font-family: helvetica, arial, sans-serif; margin: 2em; }
h1 { color: #f87200; }
.kader { border: 1px solid #ddd; padding: 1em; }
</style>
</head>
<body>
<h1>Hallo</h1>
<div class="kader">
<p>Dit staat in een kader omdat de stijl dat zegt.</p>
</div>
</body>
</html>
In dit voorbeeld staat de CSS in de pagina zelf, tussen style-tags. Bij een echte website zet je die regels in een apart bestand, bijvoorbeeld stijl.css, en verwijs je daarnaar. Dan geldt één stijlblad voor honderd pagina's en hoef je een kleur maar op één plek te veranderen.
Wat er bij beginners meestal misgaat
Vier dingen komen in onze trainingen steeds terug. De opmaak wordt in de HTML gezet in plaats van in een stijlblad, waardoor je later bij elke wijziging alle pagina's langs moet. Het stijlblad is niet gekoppeld, en dan zit iemand een half uur te zoeken waarom er niets verandert. Alles wordt in vaste pixels vastgezet, waarna de pagina op een telefoon niet meer past. En het bestand wordt niet opgeslagen voordat de pagina wordt verversd, wat vaker gebeurt dan je zou denken.
Alle vier zijn ze in tien minuten uit te leggen en daarna maak je ze niet meer. Dat is ook het aardige van dit vak: de basis is klein en je ziet direct resultaat op je scherm.
Hoe ver kom je met alleen de basis?
Verder dan de meeste mensen denken. Een verzorgde pagina met een kop, tekst, afbeeldingen, een menu en een contactformulier maak je met basiskennis van HTML en CSS. Ook het aanpassen van een thema in WordPress of een sjabloon in een nieuwsbrief wordt een stuk minder eng als je weet wat er in de code staat.
Waar het ophoudt: een webwinkel, een inlog met wachtwoorden of gegevens uit een database. Daar komt programmeerwerk bij kijken, met bijvoorbeeld JavaScript of PHP. Maar voor het overgrote deel van wat je op een zakelijke site tegenkomt is HTML en CSS genoeg.
Zelf beginnen
Wil je het gewoon eens proberen, dan hebben we een gratis cursus HTML en CSS als pdf. Daarin staan dezelfde stappen als hierboven, met wat meer voorbeelden om over te typen.
Kom je er zelf niet doorheen of wil je het in één keer goed leren, dan is er de cursus HTML en CSS Basis. Die duurt twee dagen, je bouwt er je eigen pagina en je krijgt de opzet van een website, hyperlinks, tekst en afbeeldingen en de eerste stappen in zoekmachineoptimalisatie mee.