| CSS invoegenAls een browser een stylesheet leest, zal het document naar de layout van de stylesheet worden opgemaakt. Er zijn drie manieren om een stylesheet in te voegen.
|
- externe stylesheets;
- interne stylesheets;
- inline styles.
Externe Stylesheet
Een externe stylesheet is ideaal als een stijl op vele pagina´s toegepast moet worden. Met een externe stylesheet kan je het uiterlijk van een volledige website veranderen door slechts 1 bestand aan te passen. Elke pagina moet een link hebben naar de sylesheet, hiervoor gebruiken we de <link> tag. De <link> tag hoort in de <head> sectie van een webpagina:
voorbeeld:<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
De browser zal de stijl definities lezen van het "mystyle.css" bestand, en het document zodanig opmaken.
Een externe stylesheet kan in elke tekst editor geschreven worden. Het bestand kan geen html tags bevatten. De stylesheet moet worden opgeslagen met de .css extensie. Een voorbeeld van een stylesheet bestand staat hieronder:
voorbeeld:hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}N.b.: Zet GEEN spatie tussen de eigenschap waarde en de eigenschap unit! Als je "margin-left: 20 px" gebruikt in plaats van "margin-left: 20px" zal het alleen goed werken in IE6 maar zal het niet werken in Mozilla/Firefox of Netscape.
Interne Stylesheet
Een interne stylesheet moet gebruikt worden als een enkel document een unieke style moet krijgen. Je definieerd styles in de <head> sectie van het document door gebruikt te maken van de <style> tag, zoals:
voorbeeld:<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
De browser zal de style definities lezen en het document zodanig opmaken.
N.b.: Een browser zal onbekende tags verbergen. Dit houdt in dat oudere browsers welke geen style tags ondersteunen, de <style> tag zullen negeren. De inhoud van de <style> tag zal dan op de pagina worden weergegeven als tekst. Om dit te voorkomen kan je de inhoud verbergen door deze te verbergen in het
HTML comment element:
voorbeeld:<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Inline Styles
Een inline style verliest veel van de voordelen van stylesheets, door de inhoud en presentatie te mixen. Gebruikt deze methode dan ook minimaal, bijvoorbeeld als een style een enkele keer op een enkel element toegepast moet worden.
Om inline styles te gebruiken, voeg je het style attribuut toe aan de tag waar de style gebruikt moet worden. Het style attribuut kan elke
CSS eigenschap bevatten. Het voorbeeld laat zien hoe je de kleur en de linker margin van een paragraaf opmaakt:
voorbeeld:<p style="color: #ff0000; margin-left: 20px">
Dit is een paragraaf
</p>
Meerdere Style Sheets
Als er eigenschappen voor dezelfde selector zijn gedefiniëerd in verschillende stylesheets, zal de waarde geërft worden van de meest specifieke stylesheet.
Bijvoorbeeld, een externe stylesheet heeft de volgende eigenschappen voor de h3 selector:
voorbeeld:h3
{
color: red;
text-align: left;
font-size: 8pt
}
En een interne stylesheet heeft deze eigenschappen voor de h3 selector:
voorbeeld:h3
{
text-align: right;
font-size: 20pt
}
Als de pagina met de interne stylesheet ook linkt naar de externe stylesheet, zullen de eigenschappen voor h3 zo zijn:
voorbeeld:color: red;
text-align: right;
font-size: 20pt
De kleur zal worden overgenomen uit de externe stylesheet, de tekst uitlijning en de letter grootte zal vervangen worden door die van de interne stylesheet.
