css

Dit is de Kop 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.;

Dit is Kop 2

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

Dit is Kop 3

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

Dit is kop 3

Dit is Kop 4

De h4 heeft een margin-top: 0 gekregen en sluit dus aan met de h3 erboven die een margin-bottom: 0 heeft. Vind je dat niet mooi en wil je liever wel witruimte tussen deze koppen, geef dan voor de h4 in je eigen document niets in.

KOp 4

De h4 heeft een margin-top: 0 gekregen en sluit dus aan met de h3 erboven die een margin-bottom: 0 heeft. Vind je dat niet mooi en wil je liever wel witruimte tussen deze koppen, geef dan voor de h4 in je eigen document niets in.

Dit is Kop 4

Waarom sluit deze h4 niet aan bij de alinea erboven, want hij heeft toch zojuist een margin-top: 0 gekregen? Dit komt van de alinea erboven die een margin-bottom heeft, niet in jouw stylesheet maar in de stylesheet van de browser.

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