Labo 3: CSS
Deze pagina is je oefenterrein. Alles wat je hieronder leest, ga je ook opmaken. Werk van boven naar onder en lees eerst wat er staat.
Koppelen
Een stylesheet hang je aan je pagina met een link-tag in de
head. Normalize komt eerst, je eigen bestand daarna.
Draai je die twee om, dan wint normalize van jou en vraag je je een half uur af waarom er niets verandert.
Kleur
Kleuren schrijf je in oklch(). De lightness is daar voorspelbaar, en
dus kan je er over contrast mee redeneren.
When approaching which markup to use, ask yourself, what elements best
describe the data that I am going to populate?
Een kleurencombinatie met te weinig contrast is niet lelijk, ze is onleesbaar! Controleer ze.
Selectors
- de element selector, op tag name
- de class selector, met een punt
- de id selector, met een hekje
- de attribute selector, tussen vierkante haken
Vervang hieronder de twee paden door afbeeldingen uit je eigen
images-map. Let op je relatieve pad, je zit drie mappen diep.
De tweede afbeelding is decoratief en houdt dus een lege alt.
Cascade
Twee regels die hetzelfde zeggen over hetzelfde element: de sterkste wint, en bij gelijke sterkte de laatste.
Werkt een regel niet? Open de devtools en kijk!.
Fonts
Een lettertype dat je bij Google ophaalt, stuurt het IP-adres van je bezoeker mee.
Daarom host je het zelf, met @font-face.
En je voorziet altijd een fallback.