/* Programmeer voorbeeld voor het simuleren van frames met HTML5-tags
   Mag vrij worden gebruikt. */
/* Bron: http://home.hccnet.nl/s.f.boukes/html-3/html351a.css */

/* CSS reset - Overschrijf eventueel ongewenste defaults */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym,
address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt,
var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
  margin: 0; padding: 0; border: 0; outline: 0;
}
ol, ul, li {
  list-style: none;
}
a { text-decoration: none;}
a img { border: none; }

/* 
   Hier begint de opmaak van de layout.
   Als we niet vermelden wat de afmetingen van header nav aside section en footer zijn,
   dan verschijnt in de webpagina alles gewoon onder elkaar.
   Er wordt geen gebruik gemaakt van het nav en het footer element.
*/
header img { margin:20px 0 0 10px; }

header {width:100%; height:120px; background-color:grey; padding:20px 20px; }

section { width: 65%; float:left; background-color:#fafafa; padding:20px 20px; }

aside {width:20%; padding:20px 10px; float:left;}

/* Hier begint de opmaak van de tekst*/

body { font-family: verdana, geneva, sans-serif;
       font-size: 100%; }

aside {font-size: 80%;}
h3 {color: yellow}
h4 {color: green}

a {color:blue; text-decoration:underline;}
a:hover   {color:red; text-decoration:underline;}