Zengarden: eigen vormgeving met CSS

Bekijk het origineel bestand op csszengarden.nl.

Donwload de HTML-pagina (index.html) hier en maak een eigen CSS-bestand.

Bekijk hier voorbeelden van vorige jaren.

Stap 1: Structuur verstaan

Bestudeer even hoe de basisstructuur in de index.html pagina is opgebouwd. web

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:;
}