Overzicht van de cursus
CSS
LEERDOELEN
- De termen opmaak, stylesheet kunnen benoemen en definieren
- Weten wat een selector is en een selector zo kunnen opbouwen dat de juiste html-elementen worden geselecteerd
- Weten wat een stijlregel is en de juiste stijlregels kunnen vinden om de opmaak correct te definieren
- Weten wat het CSS box model is en waar het voor dient
- De termen margin, padding, border kunnen benoemen en definieren
- Weten wat een state selector is en deze kunnen gebruiken
- Kunnen werken met lettertypes en lettertypes kunnen aanpassen
- Kleuren kunnen definieren aan de hand van een hexadecimale waarde, een rgb waarde en een kleurnaam
OPBOUW VAN DE CURSUS
CSS open_in_new
Opmaak is een belangrijk onderdeel van elke website. Hoe laat je een element er goed uitzien? In dit hoofdstuk wordt een algemene inleiding gegeven over de rol van CSS in webontwikkeling.
Selectors open_in_new
Bij het opmaken van een website wil je vaak dezelfde stijlregels toepassen op veel verschillende elementen. Selectors geven CSS de mogelijkheid om bijvoorbeeld alle h1 elementen er hetzelfde te laten uitzien.
Kleuren open_in_new
Bij opmaak spelen kleuren een belangrijke rol. In CSS zijn er verschillende manieren om een kleur te bepalen. In dit hoofdstuk krijg je de drie belangrijkste aangeleerd.
Tekst en Lettertypes open_in_new
Een lettertype kan veel vertellen over de inhoud, toon en het doel van een webpagina. In dit hoofdstuk wordt dieper ingegaan op de verschillende manieren waarop je met CSS lettertypes kunt manipuleren.
Box Model open_in_new
Bij opmaak zijn de twee meest bepalende factoren kleur en grootte. In dit hoofdstuk wordt getoond hoe je de ruimte kan bepalen die elk element inneemt.
Foutopsporing in HTML en CSS open_in_new
BELANGRIJKE TERMEN
css
- CSS
- De taal die gebruikt wordt om een website van opmaak te voorzien.
- selector
- CSS-code die aanduidt welke HTML elementen aangepast zullen worden door de stijlregels.
- declaratie
- De verzameling van stijlregels die toegepast zullen worden op één of meerdere HTML elementen.
- opmaak
- Hoe een HTML element wordt weergegeven.
- property
- De naam van de stijlregel die aangeeft wat er veranderd wordt aan de opmaak.
- property-value (waarde)
- De waarde van de stijlregel die bepaalt in welke mate er iets veranderd wordt aan de opmaak.
- stylesheet
- De verzameling van stijlregels voor een webpagina.
- externe stylesheet
- Een apart bestand waarin de verzameling van stijlregels voor een webpagina wordt bijgehouden.
- *.css
- Met deze bestands-extensie worden externe stylesheets van een website opgeslagen als document.
selectors
- selector
- CSS-code die aanduidt welke HTML elementen aangepast zullen worden door de stijlregels.
- conflicterende stijlregel
- Wanneer twee verschillende declaraties dezelfde stijlregel op hetzelfde element toepassen.
- hover
- Wanneer een gebruiker met de muis over een element gaat.
kleuren
- hexadecimale kleurwaarde
- Een kleurwaarde die bestaat uit een rood, groen en blauw gedeelte, waarbij elk deel wordt aangegeven door twee cijfers tussen 0 en 15.
- rgb kleurwaarde
- Een kleurwaarde die bestaat uit een rood, groen en blauw gedeelte, waarbij elk deel wordt aangegeven door een getal tussen 0 en 255.
tekst
- font
- De manier waarop letters, leestekens en cijfers worden weergegeven.
- generic family
- Een brede verzameling van lettertypes die dezelfde algemene eigenschappen delen.
- font family
- Een verzameling lettertypes die hetzelfde zijn qua stijl en vormgeving.
- serif
- Een lettertype dat een klein lijntje toevoegt aan de uiteindes van elke letter.
- sans-serif
- Een lettertype dat geen klein lijntje toevoegt aan de uiteindes van elke letter.
- monospace
- Een lettertype waarbij elke letter exact even groot is.
box-model
- box model
- De rechthoek die rond elk HTML element bestaat.
- padding
- de ruimte rondom de inhoud, aan de binnenkant van de rand.
- border
- de ruimte tussen padding en margin die zichtbaar gemaakt kan worden tot een rand.
- margin
- de ruimte rondom het HTML element die zorgt dat er ruimte is tussen dit en andere HTML elementen.
- width
- de breedte van de inhoud van het element.
- height
- de hoogte van de inhoud van het element.