INLINE, INTERN en EXTERN

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. Inline Style Sheet
2. Internal (of "Embedded") Style Sheet
3. External Style Sheet


1. In een inline stylesheet 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:
<html>
<head>
<title>Inline stylesheet.</title>
</head>
<body>
<p style= "font:Verdana; background-color:#999" >
dit is een paragraaf met apart lettertype <br/>
en grijze achtergrond.
</p>
</body>
</html>
2. Bij de internal (of embedded) Stylesheet 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>
<style type="text/css">
p{
font:Verdana;
background-color:#999;
}
</style>
<title>Interne stylesheet</title>
</head>
<body>
<p>
dit is een paragraaf met apart lettertype <br/>
en grijze achtergrond.
</P>
</body>
</html>
3. Een external 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.
Onderstaande html-pagina verwijst naar een externe stylesheet:
<html>
<head>
<link href="stijl.css" rel="stylesheet" type="text/css" />
<title>Externe stylesheet</title>
</head>
<body>
<p>
dit is een paragraaf met apart lettertype <br/>
en grijze achtergrond.
</P>
</body>
</html>
Het externe stylesheet ziet er (bijvoorbeeld) zo uit:
body{
background-image:url(media/palmboom.jpg);
font:Arial, Helvetica, sans-serif;
}
p{
font:Verdana;
background-color:#999;
}
Deze pagina heeft geen begin en einde. Je geeft alleen de opmaak aan. LET OP: Als je een external
Style Sheet gebruikt moet je zorgen dat dit externe bestand een .css extensie heeft, dus bijvoorbeeld
"stijl.css". Hoewel het stylesheet de voorkeur geniet, zullen we in deze reader vaak het insterne stylesheet
gebruiken. Dit, omdat de meeste opdrachten uit één pagina bestaan. Dan is het makkelijker om de
opmaak in de pagina zelf te zetten.