Zengarden: eigen vormgeving met CSS
Bekijk het origineel bestand op csszengarden.nl.
Donwload de HTML-pagina (index.html) en maak je eigen opmaak met CSS-code.
Bekijk hier voorbeelden van vorige jaren.
Stap 1: Structuur verstaan
Bestudeer even hoe de basisstructuur in de index.html pagina is opgebouwd.

Stap 2: Start CSS-bestand
Start met deze basis opmaak. In commentaar staat de volgorde van de code uitgelegd.
@charset "utf-8";
/* CSS Document */
/* niet optellen van borders en paddings bij de breedte van het element */
* {
box-sizing: border-box
}
/* hoofdelement = root */
body {
font-family:;
font-size:14px;
color:;
margin:0;
background-color:skyblue;
background-image:url(foto1.png,foto2.png);
background-repeat:no-repeat;
background-position: center center;
}
/* structuurelementen */
.page-wrapper {
width:1024px;
margin:0 auto;
display:flex;
}
header {
width: 100%;
background-image:url();
background-size:cover;
min-height:400px;
}
.main {
width:65%;
/* bij achtergrondkleur ruimte binnen meegeven */
padding: ;
}
.sidebar {
margin-left:5%;
width:30%;
}
/* tekstopmaak */
/* voorgans de browser */
p {
font-size:;
color:;
}
h1, h2, h3 {
font-family:;
}
h1 {
font-size:;
color:red;
}
h2 {
font-size:;
color:;
}
h3 {
font-size:;
color:;
}
/* specifiek voor header */
.intro h3 {
color:blue;
}
/* link */
a {
color:;
text-decoration:none;
}
/* muisover link */
a:hover {
color:;
}