Je weet nu de basis van html, maar je hebt gezien dat de opmaak met alleen html nogal saai is. Met css-code is het mogelijk om je webpagina een layout te geven die jij wilt. In deze training begin je gemakkelijk en ga je langzaam de pagina's van je website vormgeven.

CSS koppelen aan html

Wat ga je leren?

Een extern css-bestand maken en aan de html-pagina kunnen linken
typografische wijzigingen aanbrengen met css

Een extern css-bestand maken en linken

In de cursus html heb je geleerd hoe je met de elementen verschillende koppen en alinea's kunt gebruiken. De grootte en het lettertype dat daarvoor gebruikt wordt, is standaard. Dit is natuurlijk niet de bedoeling. Met een css-bestand ga je hier eigenschappen aan geven die je zelf wilt. Dit doe je door een bestand aan te maken in je teksteditor en deze op te slaan als css-bestand (.css). Vervolgens maak je in de head van je html-bestand een link naar het externe css-bestand. Je kunt ook in de html-pagina zelf css-code gebruiken, maar dan geldt dat alleen voor die pagina. Dit heet een embeded style sheet (pag. 88) of inline-stijl (pag. 88) en gebruik je niet voor deze training.

VOORBEELD

OPDRACHT CSS 1.

Lees paragraaf 4.1 en 4.2 en doe de oefening 4-1. Je hebt nu alleen nog geen css-bestand. Volg daarvoor de aanwijzingen uit paragraaf 4.3 (pag. 83), het bestand persoonlijk.css komt direct in de Websitemap naast de html-bestanden. Vergelijk jouw pagina mijnfavorietefilm.html met het voorbeeld op pagina 83. Als het goed is zijn alle h2-kopjes gecentreerd (in het midden).

Lees paragraaf 4.3 t/m 4.3.2 en en doe de oefening 4-2 op pagina 86 om het stijlblad uit te breiden.

HUISWERK

Als je achter loopt op het programma, zorg dan zelfstandig dat je je achterstand hebt ingehaald voor het begin van de volgende les.