Stap 6: De inhoud
In deze stap kijken we naar het hoofdgedeelte van de pagina: de inhoud. De
inhoud is veruit het belangrijkste deel van een website dus moet je er i.i.g.
goed voor zorgen dat dit gedeelte goed leesbaar en uitnodigend is. We beginnen
door bepaalde elementen zoals alinea's (P elementen) en lijsten
(UL, OL en DL) voldoende ruimte te geven
waardoor de inhoud er niet uitziet als op een hoop gegooide collectie van
letters en cijfers. We doen dit door de volgende CSS code toe te voegen:
#content p {
margin-bottom:1em;
}
#content ul,#content ol {
margin:1em 2em;
}
#content dl {
margin:1em 0;
}
#content dd {
margin:0 0 1em 2em;
}Ook is in deze stap te zien dat we de koppen hebben aangepakt. Door de koppen een leuk kleurtje en een rand eronder te geven zorgen we ervoor dat de koppen goed opvallen en weet de lezer wanneer een nieuw stuk van de tekst begint en waar dat stuk over gaat. Hiervoor gebruiken we de volgende CSS code:
h2 {
border-bottom:1px solid #DDD;
font-size:2em;
color:#53C920;
}
h3 {
margin:3em 0 .1em;
border-bottom:3px solid #EEE;
font-size:1.5em;
}
h4 {
margin-top:2em;
font-size:1.2em;
}
h2 code,h3 code,legend {
font-weight:bold;
}
h2,h3 {
font-weight:normal;
}Op websites heb je meestal ook te maken met hyperlinks. Ook op deze website.
Zoals te lezen valt in het hoofdstuk De basis van CSS hebben links verschillende
statussen en kunnen in CSS d.m.v. psuedo-klassen (:link,
:visited, :hover, :focus en
:active) opgemaakt worden. Daarom gebruiken we de volgende CSS
code om gaat aan te geven in welke status een link is:
a {
color:#36F;
}
a:visited {
color:#99F;
}
a:hover,a:focus {
color:blue;
}
a:visited:hover,a:visited:focus {
color:#36F;
}
a:active {
color:#C63;
}Vervolgens worden in deze fase ook nog andere elementen opgemaakt zoals de grote code blokken die nu zijn voorzien van een blauwe achtergrond en een blauwe rand. Daarna worden een aantal elementen die in formulieren gebruikt worden opgemaakt waarmee we op een CSS code zijn gekomen die hier te vinden is.
Zoals je ziet was deze stap nogal simpel. Het enige wat we eigenlijk hebben gedaan is een aantal elementen voorzien van wat kleurtjes en randen. In de volgende en laatste stap nemen we het laatste onderdeel onder handen: het secundaire menu.