Download hier het startbestand en vul de CSS verder aan. Open de quiz in bookwidget dit helpt je goed op weg.

 

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;

		}