Kop 1 met padding, margin, border en pseudo-klasse :hover

Op deze pagina wordt gewerkt met klassen, pseudoklassen, links en een anker. De koppen en alinea's sluiten zonder witruimte op elkaar aan. Standaard krijgen koppen en alinea's van de browser witruimte boven en onder. In het boek wordt dit aangepast door de marges aan alle kanten op 0 te zetten en daarna met padding weer witruimte aan te brengen op de plaatsen waar je dat nodig vindt. Deze pagina doet het anders, in de tekst lees je hoe. Overigens, deze alinea heeft het attribuut class="intro". De enige eigenschap van de klasse is font-style: italic.

Kop 2

Deze alinea sluit zonder witruimte aan bij de kop erboven doordat de h2 een margin-bottom: 0 heeft gekregen en de alinea een margin-top: 0.

Kop 3

En deze alinea sluit aan bij de kop erboven doordat ook de h3 een margin-bottom: 0 heeft gekregen en de alinea al een margin-top: 0 had.

De witruimte boven deze alinea komt van de alinea erboven. Zodra je de margin-bottom van de alinea ook op 0 zet verdwijnt die witruimte. Maar dat is waarschijnlijk niet wat je wilt want alle alinea's zullen dan een aaneengesloten blok tekst vormen.

Kop 3

Kop 4

Ook de h4 heeft een margin-bottom van 0 gekregen, net als de andere koppen. Doordat de alinea een margin-top van 0 heeft gekregen sluit deze aan bij de h4.

Deze alinea heeft een class: accent en een pseudo-klasse :hover. Kijk vooral in de stylesheet om te zien hoe het daar is ingegeven.

Zie ook in de code dat de link hieronder tussen p-tags staat. Een a-element mag niet los in een pagina staan. Dat betekent, met de elementen die je nu bekend zijn, dat je een link kunt plaatsen in een kop of in een alinea. Later komen hier nog andere mogelijkheden bij.