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

 

De structuur van de website (HTML) ziet er zo uit:

 

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

* opmaak voor alle elementen */
* {
    /* zorgt dat bij de breedte van de inhoud geen padding en border wordt opgeteld */
    content-box:border-box;
}

/* opmaak voor het root elementen (browser) */
body{
    /* tekstkleur grijs #666666 */
    color: #666666;
    /* achtergrondafbeelding "images/dark-wood.jpg" */
    background-image: url("images/dark-wood.jpg");
    /* achtergrond positionering in het midden */
    background-position: center;
    /* achtergrondkleur #f9f8f6*/
    background-color: #f9f8f6;
    /* lettertypen Georgia, Times, schreefloos */
    font-family: Georgia, Times, serif;
    /* regelafstand (relatief) 1.4 em = 140% tov lettergrootte 16 pixels */
    line-height: 1.4em;	
    /* geen buitenkanten */
    margin: 0px;			 
    /* lettergrootte 16 pixels */
    font-size:16px;
}

We gaan de structuurelementen te positioneren en een breedte en hoogte te geven.

/* structuurelementen */

/* Klasse-selector container */
.container {
    /* breedte 940 pixels */
    width: 940px;
    /* buitenkant: boven en onder 20 px, links en rechts 0 px */
    margin: 20px auto 20px auto;
    /* rand: dikte 2 px + volle lijn + kleur zwart */
    border: 2px solid black;
    /* achtergrondkleur wit */
    background-color: #ffffff;
}

main {
    /* weergave flexibel */
    display: flex;
    /* horizontale inhoud tegen de linker- en rechterkant uitlijnen */
    justify-content: space-between;
}

header {
    /* relatieve positie */
    position: relative;
    /* hoogte 160 pixels */
    height: 160px;
    /* achtergrondafbeelding "images/header.jpg" */
    background-image: url(images/header.jpg);
}

nav {
    /* absolute positie */
    position:absolute;
    /* beneden positioneren op 0 pixels */
    bottom:0;
    /* breedte volledig vullend */
    width: 100%;
    /* hoogte 50 pixels */
    height:50px;
}

/* linkerkolom */
section.courses {
    /* breedte 70 % */
    width: 70%;
    /* lijn rechts van 1 pixel breedt, stijl een volle lijn en kleur hex #aeaca8 */
    border-right: 1px solid #aeaca8;
}

/* rechterkolom */
aside {
    /* breedte 30 % */
    width: 30%;	
    /* binnenkant element links 20 pixels */
    padding: 0px 0px 0px 20px;
}

nav, footer {
     /* beide zijkanten (links & rechts) vrijhouden */
    clear: both;
    /* tekstkleur wit */
    color: #ffffff;
    /* achtergrondkleur #aeaca8 /
    background-color: #aeaca8;
    /* hoogte 30 px */
    height: 30px;
}

article {
     /* beide zijkanten (links & rechts) vrijhouden */
    clear: both;
    /* de flow (inhoud) automatisch de hoogte laten uitrekenen */
    overflow: auto;
    /* breedte volledig vullend */
    width: 100%;
}

footer {
    /* lettergrootte 80 % van het root element, dus 20% kleiner (in rem plaatsen) */
    font-size: 0.8rem;
    /* binnenkant: rechts 7 px en links 20 px, boven en onder 0 px */
    padding: 0px 7px 0px 20px;
}

hgroup {
    /* buitenkant boven 40 pixels */
    margin-top: 40px;
}

figure {
    /* zwevend element links */
    loat: left;
    /* breedte 290 pixels */
    width: 290px;
    /* hoogte 220 pixels */
    height: 220px;
    /* binnenkant 5 pixels */
    padding: 5px;
    /* buitenkant 20 pixels */
    margin: 20px;
    /* rand 1 pixels dikte, stijl een volle lijn , hex #aeaca8 */
    border: 1px solid #aeaca8;
}

We gaan de menu opmaken:

/* menu opmaak */

/* Binnen de HTML-selector nav gaan we de HTML-selector ongeordende opsomming opmaken */

nav ul {
    /* buitenkant 0 */
    margin: 0px;
    /* binnenkant: boven en onder 5 px, rechts 0 px en links 30 px */
    padding: 5px 0px 5px  30px;
}

/* Binnen de HTML-selector nav gaan we de HTML-selector lijstitems opmaken */

nav ul li {
    /* weergeven naast elkaar */
    display: inline;
    /* buitenkant rechts 40 px */
    margin-right: 40px;
}

/* Binnen de HTML-selector nav gaan we de HTML-selector (hyper)links opmaken */

nav ul li a {
    /* tekstkleur wit */
    color: #ffffff;
}

/* 2 selectors: HTML-selector (hyper)links met actie over (:pseudo-klasse) + Klasse-selector current */

nav ul li a:hover, nav ul li a.current {
    /* tekstkleur zwart */
    color: #000000;
}

We gaan als laatste de teksten verder opmaken:


/* 2 selectors: hoofding2 en hoofding 3 */
h1,h2,h3 {
    /* lettergewicht op normaal */
    font-weight: normal;
}
				
/* hoofding 2 */ 
h2 {
    /* buitenkant boven 10 pixels en onder 5 pixels, links en rechts 0 pixels */
    margin: 10px 0px 5px 0px;
    /* binnenkant op 0 pixels */
    padding: 0px;
    /* lettergrootte 160 % groter dan het root element, (in rem plaatsen) */
    font-size:1.6rem;		
}

/* hoofding 3 */
h3 {
   /* buitenkant onderaan 10 pixels */
    margin-bottom: 10px;
    /* tekstkleur hex #de6581 */
    color: #de6581;
    /* lettergrootte 110 % groter dan het root element, (in rem plaatsen) */
    font-size:1.1rem;			
}

/* hoofding 2 binnen het aside element */
aside h2 {
    /* binnenkant boven 30 pixels en onderkant 10 pixels */
    padding: 30px 0px 10px 0px;
   /* tekstkleur hex #de6581 */	
   color: #de6581;
}
			
figcaption {
    /* lettergrootte 90 % van het root element (in rem plaatsen) */
    font-size:0.9rem;
   /* tekst links uitlijnen */
    text-align: left;		
}

/* HTML-selector alinea */
p {
    /* lettergrootte 100 % van het root element (in em plaatsen) */
    font-size:1.0rem;
}