Opmerking: na het publiceren moet je misschien je browsercache legen om de veranderingen te zien.

  • Firefox / Safari: houd Shift ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5 of Ctrl-R (⌘-Shift-R op een Mac)
  • Google Chrome: druk op Ctrl-Shift-R (⌘-Shift-R op een Mac)
  • Edge: houd Ctrl ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5.
/* deze code stelt de grootte van de kaders in */ 

html {box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit; 
}/* deze code stelt de maximale en minimale breedte van de body in */ 

body {background-color: Thistle;font-family: 'PT Sans Narrow', sans-serif;margin-left: auto; 
margin-right: auto; 
max-width: 1024px; 
min-width: 256px; 
padding-top: 8px; 
padding-bottom: 24px; 
padding-left: 24px; 
padding-right: 24px; 
}

/* deze code voegt een mooie achtergrond toe */
html {background: radial-gradient(circle, SkyBlue, SkyBlue 50%, LightCyan 50%, SkyBlue);background-size: 8px 8px; 
}/* de header */ 

header { 
}
header p {float: left;font-size: 16px;font-weight: bold;margin-top: 0px;}header h1 {font-size: 16px;text-align: right;
}

/* het menu */nav ul {list-style-type: none;background-color: #B577B5;
border: 2px solid black; 
border-radius: 10px; 
font-family: sans-serif; 
font-weight: bold; 
padding: 16px;}nav ul li {display: inline;border-right: 2px solid #111111; 
padding-right: 8px; 
padding-left: 8px;}

nav ul li:last-child { 
border-right: none;
}
nav ul li a { 
text-decoration: none; 
color: #111111;}

nav ul li a:hover { 
text-decoration: underline; 
}

nav li.selected { 
color: #606060;}/* biografieën */section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}

/* het aside-element */

aside {
}

/* footer */

footer {
}

footer p.copyright {
float: left;
margin-top: 0px;
}

footer p.contact {
text-align: right;
}

/* kleine plaatjes krijgen een maximale hoogte van 200px */ 

img.small {float: left;height: 200px;margin-bottom: 24px;margin-right: 24px;}/* middelgrote plaatjes mogen de helft van het element waarin ze zich bevinden innemen, met een maximale breedte van 360px */img.medium { 
max-width: 360px; 
width: 50%;}/* grote afbeeldingen mogen de hele breedte van het element waarin ze zich bevinden innemen */ 

img.large {width: 100%;}/* deze code voorziet ieder element dat geen kader heeft van een kader */ 

body, section, img {border: 2px solid #B1B1B1;border-radius: 16px;}/* deze code zorgt ervoor dat je webpagina er op schermen van allerlei groottes goed uitziet */ 

@media all and (min-width: 900px) {article {float: left;width: 66%;}aside {float: left;padding-left: 24px;width: 34%;}footer {clear: both;}}

table {font-size:70%; 
border-collapse: collapse; 
width: 100%;
}th,td {
border:1px solid #000000;
padding:8px;
text-align: left;}th { 
background-color: #FCAB68;
} 

td { 
background-color: #BA99C0;
}

p.top-tip { 
border: 4px solid #0000FF; 
border-radius: 10px; 
padding: 1em;} 

p.top-tip::before { 
color: #111111; 
content:"TOPTIP: "; 
font-weight: bold; 
}