Les 2
Een eerste Style Sheet
In deze les ga je je eerste Style Sheet maken. In de vorige les heb je kunnen zien dat er drie manieren zijn om naar een Style Sheet te verwijzen en dat er daarom inline, internal en external Style Sheets zijn. De eerste Style Sheet hieronder laat ik dan ook drie keer zien, dus als inline, internal en external Style Sheets.
Het is misschien handig om eerst de basisstructuur van een stijlregel aan te geven:
tag { definitie; definitie; definitie }
De definities bestaan weer uit een eigenschap en een waarde. In de war? Geeft niet, het wordt vanzelf wel duidelijk als je er mee gaat werken.
Een internal Style Sheet
Ok, laten we een Style Sheet maken voor deze site, Homepage-Maken.nl, nou ja, als voorbeeld dan. ;-)
We beginnen met een internal Style Sheet.
<html>
<head>
<title>Homepage-Maken.nl - Alles voor het bouwen van je site!</title>
<style type="text/css">
<!--
body { font-family: Verdana; background-color: lightblue }
h2 { color: green; font-style: italic }
p { text-decoration: underline }
-->
</style>
</head>
<body>
<h2>Welkom op Homepage-Maken.nl!</h2>
<p>Dit is de eerste paragraaf. Zoals je ziet is de tekst onderstreept en
is de <h2> groen en schuin gedrukt.
Verder is de achtergrondkleur lichtblauw en het
lettertype Verdana.
Alles is precies zoals opgegeven dus! ;-) </p>
</body>
</html>
Zo ziet het er dan uit in je browser:
Welkom op Homepage-Maken.nl!
Dit is de eerste paragraaf.
Zoals je ziet is de tekst onderstreept en
is de <h2> groen en schuin gedrukt.
Verder is de achtergrondkleur lichtblauw en het
lettertype Verdana.
Alles is precies zoals opgegeven dus! ;-)
N.B. Vergelijk de stijlregels in de Style Sheet met de basisstructuur die aan het begin van deze les beschreven staat.
Nu kun je zien hoe het werkt:
* je begint met de tag (maar zonder < en > !!) waarvoor je stijlregels wilt opgeven, in de Style Sheet hierboven: <body>, <h2> en <p>.
* dan komt de definitie, bestaande uit eigenschappen, hierboven: font-family, background-color, color,
font-style en text-decoration
* verder heeft iedere eigenschap een waarde hierboven: Verdana,
lightblue, green, italic en underline.
Belangrijke dingen voor alle Style Sheets:
* De tag in de stijlregel (bijv. p, body en h2) moet je zonder < en > schrijven!
* De definities worden omvat door deze haken: { en }.
* Als je meerdere definities opgeeft, moet je achter ieder definitie een puntkomma plaatsen, behalve achter de laatste definitie, die hoeft niet, maar mag wel. ;)
Een external Style Sheet
Een external Style Sheet is met het bovenstaande in het achterhoofd vrij makkelijk te maken.
Je zet gewoon de stijlregels in een nieuw bestand en dan sla je het op als .css bestand.
Let er op dat je geen HTML-tags (< >) gebruikt in het .css bestand!
Als je het .css bestand gemaakt hebt, hoef je alleen nog maar te verwijzen naar dit bestand in de betreffende HTML-pagina. Dat doe je met de <link> tag die je in het <head> gedeelte van je pagina plaatst.
Nu een voorbeeld: eerst zie je het .css bestand met de stijlregels, laten we dit bestand stylesheet.css noemen (Goh, origineel!! ;) ), daarna de HTML-pagina die hiernaar verwijst.
Het bestand "stylesheet.css":
body { font-family: Verdana; background-color: lightblue }
h2 { color: green; font-style: italic }
p { text-decoration: underline }
De HTML-pagina die naar "stylesheet.css" verwijst:
<html>
<head>
<title>Homepage-Maken.nl - Alles voor het bouwen van je site!</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
Hier komt dan weer de inhoud van je pagina.
</body>
</html>
Ok, zo dus, niet al te moeilijk toch? Nu wordt de stijlinformatie voor de betreffende HTML-pagina
uit het bestand "stylesheet.css" gelezen.
Let wel altijd op dat je verwijst naar de juiste
locatie van het .css bestand, dus staat het bestand in de subdirectory "styles", dan moet
je verwijzen naar: styles/stylesheet.css
Een inline Style Sheet
Zoals gezegd, een inline Style Sheet schrijf je direct in de HTML-tag. Hierdoor is de inline Style Sheet minder geschikt om veel te gebruiken, aangezien je bij iedere tag de stijlinformatie opnieuw moet intikken. Gebruik het dan ook alleen als je een specifiek tag een afwijkend uiterlijk wilt geven.
Voorbeeld van een inline Style Sheet:
<html>
<head>
<title>Homepage-Maken.nl - Alles voor het bouwen van je site!</title>
</head>
<body style="font-family: Verdana; background-color: lightblue">
<h2 style="color: green; font-style: italic">Welkom op Homepage-Maken.nl!</h2>
<p style="text-decoration: underline">Hier komt de inhoud van de eerste paragraaf.</p>
</body>
</html>
Einde les 2
In deze les heb je je eerste Style Sheet gemaakt en heb je gezien hoe je internal, external en inline Style Sheets maakt. Natuurlijk kan je nog veel meer doen met CSS. Dat lees je in de volgende les die over fonts gaat.
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.
