Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

CSS de basis

De opmaak van een webpagina hangt niet alleen af van wat je kan met html. Door gebruik te maken van stijlbladen kan je op een snelle manier de stijl van een site bepalen. Het vergt een planning aan het begin, maar staat het eenmaal op papier dan kan je daar zeer veel profijt van hebben. Hier vind je een cursus CSS de basis uitgelegd voor de absolute beginners. Voor gevorderden betreft het een handig naslagwerk.

CSS de basis

Je kan in een pagina het lettertype gaan bepalen. Voor een hele html pagina kan je het basefont gaan bepalen en dan verder per alinea of per zin. Het vergt veel typewerk en later veel werk als je het wilt gaan veranderen. Gelukkig kan je css gebruiken. In css kan je het lettertype een keer vastleggen en vervolgens kan je die voortdurend gebruiken op de pagina. Je zult al snel zien dat hier veel tijdwinst in zit.

Voorbeeld:

BODY { font-family: helvetica, sans-serif }

In dit voorbeeld wordt aan de hele body van de pagina het lettertype helvetica gegeven. Als dit niet mogelijk blijkt, wordt sans-serif als vervangend lettertype gebruikt.

[ad]

De body geeft het element aan van de stijldefinitie. Hier kan ook table staan of h1 en ga maar door. De font-family is de property van de stijldefinitie. Hier bepaal je de te beïnvloeden eigenschap van de pagina. In dit geval dus het lettertype. Het lettertype is de value. De value geeft de waarde aan het element. Als je dit schema onthoudt, zul je snel begrijpen hoe css in elkaar steekt.

Je kan css op verschillende manier gaan verwerken in een html pagina. Het kan per pagina geschieden. Alleen dan schiet je nog niets op als je zometeen op elke pagina het lettertype wil gaan vervangen. Mogelijk is het dus ook om een extern bestand te maken en daar naar te verwijzen. Deze manier verdient in elk opzicht de meeste voorkeur.

Intern stijlblad.

In de head tag wordt de definitie van een stijl gezet. Daarvoor wordt de volgende standaard opmaak gebruikt:

<head>
<style type=”text/css”>
<!- -
P {font-family: arial;font-size: 12px;}
- – >
</style>
</head>
<body>

Elke p krijgt nu deze waarden toegekend, maar alleen de p’s in deze pagina.

Extern stijlblad

Door een extern bestand te maken moet je wel weten hoe je dan in html deze pagina gaat aanroepen. Daar heb je altijd de volgende zin voor nodig:

<link rel=”stylesheet” href=”basis.css” type=”text/css”>

Zo weet de pagina waar de stijldefinities te vinden zijn. In dit geval heet het bestand basis.css en zie je dat een stijlblad als extensie .css meekrijgt. Dit kan in elke tekstverwerker geschreven worden. Het makkelijkste is om notepad te nemen. Tenminste voor de tijd dat je geen speciaal programma voor het maken van stijlbladen hebt. Verder staat het bestand in dezelfde map als de pagina.

Ik geef wel aan dat er meer mogelijkheden bestaan, maar dat ik die mogelijkheden of niet praktisch acht of gewoonweg overbodig. Mocht het nodig zijn om andere manieren alsnog te behandelen, dan kom je ze tegen in het vervolg van deze cursus. Het doel van de cursus is niet om alles te behandelen, maar dat deel dat nodig is om een fatsoenlijke pagina in elkaar te zetten en css te gaan gebruiken in combinatie met html en javascript, samen dhtml genaamd.

De pagina basis.css moet ook een opmaak gaan krijgen. Ik doe altijd het volgende:

P {
font-family: arial, tahoma;
font-size: 12px;
}

Verder hoeft de pagina geen opmaak. Je kan de pagina beginnen met <style type=”text/css> en eindigen met </style>. Dit is wel zo netjes, maar verplicht is het niet. Verder kan je toevoegen <! – - – - >, dit om te voorkomen dat de stijldefinitie in oude browsers foutmeldingen gaat opleveren. Maar hier is mijn vraag wie dan nog gebruik maakt van IE 3 of NS 3. Tegenwoordig ondersteunen alle browsers CSS goed.