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.
Homepage-Maken.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 bijvoorbeeld "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.
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
