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.
De blokken die we voor html5 met <div> </div> aangaven hebben nu 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;
}
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.
Succes.