Download het startbestand en vul de commentaren van de CSS verder aan.

We geven eerst de basis mee (achtergrond, lettertype, lettergrootte, ...) aan het hoofdelement.

/* HTML-selector volledig schermweergave */
body {
/* lettergrootte 80 % */
font-size: 80%;
/* letterfamily: "Courier New", Courier, monospace */
font-family:"Courier New", Courier, monospace ;
/* letterruimte 0.15em */
letter-spacing: 0.15em;
/* achtergrondkleur #efefef */
background: #efefef ;
}
We gaan nu de structuurelementen positioneren (#page & #logo).

/* ID-selector page */
#page {
/* maximum breedte 940 pixels */
max-width: 940px;
/* minimum breedte 720 pixels */
min-width: 720px;
/* afstand buitenkant element: boven 10 pixels en onder 10 pixels, links en rechts automatisch */
margin: 10px auto 10px auto;
/* binnenkant 20 pixels (alle zijden) */
padding: 20px;
/* rand 4 pixels dubbele lijn kleur zwart */
border:4px double black;
/* achtergrondkleur wit */
background-color: white;
}
/* HTML-selector header */
header {
/* breedte 150 pixels */
width: 150px;
/* afstand buitenkant element: boven 10 pixels en onder 25 pixels, links en rechts automatisch */
margin:10px auto 25px auto;
}
We gaan de menu opmaken:

/* HTML-selector hoofdelement voor een opsommingslijst (ongeordende lijst) */
nav ul {
/* breedte 570 pixels */
width:570px;
/* binnenkant alle zijden 15 pixels */
padding: 15px;
/* afstand buitenkant element: boven 0 pixels en onder 0 pixels, links en rechts automatisch */
margin:0 auto 0 auto;
/* rand boven 2 pixels volle lijn kleur zwart */
border-top:2px solid black;
/* rand beneden 1 pixels volle lijn kleur zwart */
border-bottom:1px solid black;
/* tekst uitlijnen gecentreerd */
text-align:center;
}
/* HTML-selector lijstitem */
nav ul li {
/* weergave naast elkaar */
display: inline;
/* afstand buitenkant element: boven 0 pixels en onder 0 pixels, links en rechts 3 pixels */
margin: 0 3px;
}
We gaan de links opmaken:

/* HTML-selector hyperlinks binnen de class footer */
a {
/* tekstkleur zwart */
color:black;
/* tekst transformatie eerste letter in hoofdletter */
text-transform: capitalize;
/* geen lijn of tekst decoratie geen */
text-decoration: none;
/* binnenkant element: boven 6 pixels, rechts 18 pixels, beneden 5 pixels en links 18 pixels */
padding: 6px 18px 5px 18px;
}
/* HTML-selector hyperlinks met pseudo-klasse hover-effect, HTML-selector hyperlinks met klasse on */
a:hover , .on {
/* tekstkleur #cc3333 */
color:#cc3333 ;
/* achtergrondkleur wit */
background-color:white;
}
We gaan de alinea opmaken:

/* HTML-selector alinea */
main p {
/* breedte 600 pixels */
width:600px;
/* tekst uitlijnen gecentreerd */
text-align: center;
/* afstand buitenkant element: boven 20 pixels en onder 20 pixels, links en rechts automatisch*/
margin: 20px auto;
/* lettergewicht normaal */
font-weight: normal;
}