Les 1
Verwijzen naar Style Sheets
Als je stijlregels wilt opstellen voor je pagina's dan zullen deze pagina's moeten verwijzen, oftewel linken, naar de betreffende Style Sheet. Dit wordt ook wel aangeduid als de implementatie van Style Sheets in HTML.
Dit verwijzen naar de Style Sheets in een HTML pagina kan op drie manieren:
1. Een inline Style Sheet. In een inline Style Sheet worden de stijlelementen direct toegevoegd aan de HTML tag. Deze manier is niet erg handig, omdat je de stijlelementen bij iedere tag opnieuw moet intypen. Gebruik de inline Style Sheet alleen als je een unieke stijl aan een enkele tag wilt geven, niet als je de stijl op meerdere pagina's wilt gebruiken. Gebruik dan één van de andere twee methodes.
Voorbeeld van een inline Style Sheet:
(alle CSS codes in de voorbeelden worden weergegeven in deze oranje tekst)
<html>
<head>
<title>De titel van de pagina.</title>
</head>
<body>
<p style="Hier komen de stijlelementen voor deze paragraaf">
</p>
</body>
</html>
2. Een internal (of embedded) Style Sheet. Dit is de meest
voorkomende Style Sheet. Bij de internal Style Sheet schrijf je de stijlinformatie tussen de
<head> en </head> tags.
De stijlinformatie in deze Style Sheet wordt dan
alleen toegepast op dit ene document.
De internal Style Sheet is daarmee ideaal voor sites die
maar een paar pagina's groot zijn of voor individuele pagina's die een aparte stijl moeten hebben
ten opzichte van de rest van de site.
Voorbeeld van een internal (embedded) Style Sheet:
<html>
<head>
<title>De titel van de pagina.</title>
<style type="text/css">
<!--
Hier komen de stijlregels
-->
</style>
</head>
<body>
Hier komt de inhoud van je pagina.
</body>
</html>
N.B. Zie je de tekens: <!-- en --> ? Deze staan er niet zomaar. Dit
zijn de commentaartekens van HTML die ervoor zorgen dat de stijlinformatie niet op het scherm
getoond wordt wanneer een (oude) browser geen CSS ondersteunt.
Je kunt dus het beste altijd de
stijlregels tussen <!-- en --> plaatsen, zoals hierboven!
3. Een external Style Sheet. Deze Style Sheet staat in een
apart document met de extensie .css. Er wordt gelinkt naar dit .css document met de
link tag, zie het voorbeeld hieronder.
External Style Sheets zijn ideaal voor grote sites
met veel pagina's, omdat de stijlinformatie van alle pagina's in een document gezet kan worden.
Wil je de stijl van je pagina's veranderen, dan hoef je slechts een document te veranderen om alle
pagina's aan te passen! Dit scheelt erg veel tijd.
MijnHomepage.nl maakt ook gebruik van external
Style Sheets.
Voorbeeld van een external Style Sheet:
<html>
<head>
<title>De titel van de pagina.</title>
<link href="bestandsnaam.css" rel="stylesheet" type="text/css" />
</head>
<body>
Hier komt de inhoud van je pagina.
</body>
</html>
N.B. * Als je een external Style Sheet gebruikt moet je zorgen dat dit externe bestand
een .css extensie heeft, dus bijv. "bestandsnaam.css".
* Verder moet je opletten
dat je nooit HTML tags in de stijlregels gebruikt, anders werkt het niet. Dus daar geen <
en > gebruiken.
Einde les 1
In de eerste les heb je de verschillende wijzen van linken naar CSS gezien en hun voor- en nadelen. In de volgende les leer je hoe je nou echt een eerste Style Sheet maakt.
MijnHomepage Tip
Heb je genoeg van je hostingprovider?
Neem dan een host die wel de kwaliteit kan bieden die je zoekt. Breng je site bijvoorbeeld onder bij Alphamega Hosting. Hun klanten zijn over het algemeen erg tevreden waardoor er maar weinig mensen overstappen naar een andere webhost. En dat is altijd een goede graadmeter voor de kwaliteit van een host. Alphamega biedt zelfs een niet-tevreden-geld-terug-garantie van 100 dagen.
Het First-class hostingpakket is voor veel mensen het meest geschikte pakket. Je krijgt het volgende:
100 MB» nu 512 MB schijfruimte2 GB» nu 10 GB dataverkeer- een eigen domeinnaam
- 1000 (pop)mailboxen
- 100 MySQL databases
- hoge kwaliteit techniek en prima support (helpdesk ook telefonisch bereikbaar)
Al met al is dit een prima pakket voor nog geen tientje per maand. Bekijk de site van Alphamega Hosting voor meer informatie!
