Als we naar een html document kijken, dan kunnen we concluderen dat het erg lijkt op een ruitjesblad, met grote ruiten die weer uit andere ruiten c.q. blokken kunnen bestaan. Binnen html hebben we twee soorten blokken, namelijk block en inline elementen, zie hier voor meer uitleg.
De blokken die we voor html5 met <div> </div> aangaven hebben in html versie 5.x aparte namen zoals <article></article>, maar het blijft een uitdaging om bepaalde blokken te kunnen adresseren voor bepaalde opmaak.
In het begin hebben we het over Styling gehad d.m.v. css (Cascading Style Sheets), met css kunnen we de uiteindelijke opmaak regelen. Om een onderscheid te kunnen maken tussen dubbele blokken of tags, heeft elk tag een eigen eigenschap d.m.v. van een "id=" of "class=" toevoeging.
<p class="normaal"> of <p id="normaal"> hebben hetzelfde resultaat, met dien verstande dat een "id" slechts voor een element geld en een class voor meerdere, elementen binnen een pagina.
In het html voorbeeld zagen we hoe we de css definities koppelen aan het document d.m.v. de regel <link href="/styles.css" rel="stylesheet" type="text/css"/> waar styles.css de naam van het bestand is, in dezelfde folder als de pagina die we willen stylen.
De inhoud kan er als volgt uitzien;
body {
font-size:14.0pt; font-family:"Calibri Light",sans-serif; color:black';
}
h1,h2,h3,h4 {color: #ec8038;
margin:0cm;
margin-bottom: 0;
}
img {padding: 30px;
}
Elke tag begint met zijn naam en wordt gevolgt door een aantal stijl parameters tussen "{" en "}", waarbij ELKE stijl parameter eindigt met een ";"
Een "id" begint met een "#" en een class met een "."
In het voorbeeld geven we het lettertype aan voor de gehele body van het document, want er is maar een body tag in elke document.
Voor alle types van het header blok geven we in het voorbeeld dezelfde kleur en margin.
Willen we afwijken van de standaard voor de body, dan zullen we een "id" of "class=" moeten meegeven aan dat bepaalde element.
.img1 img {padding: 0px;
}
Zoals u bij de font-family tag kunt zien, staan daar meerdere fonts/letter types aangegeven. Het zijn er meer, omdat diegene die uw pagina in zijn browser oproept, dat eerste font misschien niet op zijn toestel heeft geinstalleerd, maar hopenlijk wel de tweede of derde.
Als u speciale lettertypes wilt gebruiken, bijvoorbeeld voor een logo, dan is het beter als u een klein plaatje van die tekst maakt en die gebruikt i.p.v. een tekst, die bij de gebruiker er niet uitziet zoals u wilt.
Geeft geen tussen ruimte aan die plaatjes die in een blok met de class="img1" definitie staan. Alle andere plaatjes hebben 30px ruimte tussen hun eigen blok en het plaatje.
De css stijl parameters zijn talrijk en een goed begin is weer op w3chool.com via deze link.