Opdracht

Als je bij de uitleg met de "devtools" rond hebt geneusd in de inspector van je browser, dan is je misschien opgevallen dat er allerlei css regels op je site van toepassing zijn die je helemaal niet zelf geschreven hebt!

Dat komt omdat elke browser een hele set "ingebouwde" css-regels heeft. Die zorgen ervoor dat h1 teksten groter zijn dan h2 teksten, dat er ruimte zit tussen 2 paragrafen, dat linkjes standaard blauw en onderstreept worden, etc, etc.

Dit is op zich een goede zaak, want hiermee ziet zelfs een pagina zonder css (zoals je pas zelf gemaakt hebt in de eerste hoofdstukken van deze cursus) er al heel acceptabel uit. Je eigen css regels komen als het ware "bovenop" de standaard regels en samen maken ze je site tot wat je ziet. Als 2 regels "ruzie maken" met elkaar (dus de ene regel maakt teksten blauw en de ander diezelfde teksten geel), dan gaat de meest specifieke regel voor. In het geval van ingebouwde regels, gaat je eigen regel altijd voor op een ingebouwde.

Toch kan het soms verwarrend zijn. Stel je schrijft een css regel die zegt dat h1 tags groen moeten zijn. Dan schrijf je natuurlijk zoiets als:

h1 { 
  color: green;
}

Dat werkt prima, de h1 teksten worden braaf groen. Maar ze hebben ook een margin (lege ruimte er omheen), terwijl je daar niets over gezegd hebt in je code. Jouw code zegt alleen maar welke kleur h1 tags moeten worden en overschrijft daarmee de standaardkleur. Maar omdat je in jouw code niets over margins of paddings hebt gezegd, blijven daarvoor de standaardregels van toepassing. In de "devtools" kun je dat goed zien.

Stap 1

Om de uitleg over de ingebouwde css regels hierboven even zichtbaar te maken, gaan we even om te testen een stel standaard css regels ongedaan maken. Hiervoor gebruiken we de speciale selector * , deze selecteert alle html elementen die er zijn en past zijn regels dus op alle onderdelen van de pagina toe.

Zet bovenaan je .css bestand de volgende stijlregel om alle margins en paddings te resetten:

* {  margin: 0px;  padding: 0px;}

Herlaad je pagina. Je ziet dat alle dingen ineens veel dichter op elkaar zijn gaan staan. Logisch, want je hebt immers van alles de paddings en margins weggehaald en die zorgen nou net voor ruimte tussen de elementen in. Als bijverschijnsel heb je ook de lijst stukgemaakt:

Nu zie je pas hoeveel stijl je "cadeau" kreeg uit het standaard stylesheet.

Gevorderde websitebouwers vinden het vaak fijn om volledige controle over de layout te hebben en gebruiken regels zoals hierboven om de standaard-css uit te zetten. Voor ons is het wel fijn dat hij er wel is, omdat het ook veel werk uit handen neemt. Haal dus de regel css die alle margins en paddings uitzet weer weg uit je code. (En daarmee heb je bij deze stap niets toegevoegd aan je site, maar heeft het hopelijk wel inzicht gegeven in de werking van css 😉)

Stap 2

Je hebt eerder al borders toegevoegd aan de paragrafen en h1 en h2 tags. Geef deze nu ook verschillende paddings en margins.

​