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 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;

		}