HTML les 9 – Stijlen 1 (CSS)
Stijlen zijn te gebruiken voor je website. In deze cursus leer je hoe je elementen kunt aanpassen aan
je eigen wensen. Dit is het eerste deel over stijlen er volgt nog een tweede deel, die ingaat op het
maken van stijlbladen.
Hieronder zie je drie links staan. De html-code van alledrie de pagina’s is hetzelfde, alleen de
link naar het stijlblad is aangepast. Die link naar het stijlblad is als volgt:
<link rel=”stylesheet” type=”text/css” href=”mijnstijl1.css” />
Let op de bestandsnaam: .css!
Kies een stijl, deze opent in een nieuw venster, als je hem sluit ben je weer terug op deze pagina.
– Stijl 1 Zo verschijnt de pagina zonder stijlblad.
– Stijl 2 Het stijlblad toegevoegd.
– Stijl 3 Een ander stijlblad toegevoegd.
Zoals je ziet zijn de mogelijkheden groots. Je moet alleen even doorkijgen hoe het werkt en dat is het doel
van deze cursus.
Eigenschap en waarde
Een stijldefinitie bestaat uit een eigenschap en een waarde. Deze moeten worden gescheiden door een :
(dubbele punt). Gebruik je meer stijlen, dan moet je die scheiden door een ; (punt-komma).
We gaan dit eens toepassen. We nemen het element <h2> (koptekst 2)
We willen dat dit element 24 punten groot wordt en dat het in het lettertype Garamond verschijnt.
De eigenschappen zijn ‘fontsize’ (lettergrootte) en ‘font-type’ (lettertype). Daarachter komt dan de waarde te
staan. Wij krijgen dus dit:
h2 { fontsize: 24pt; font-type: Garamond; }
Zoals je al ziet komen de eigenschappen en waardes tussen {} (accolades) te staan.
Stel dat je wilt dat alle kopteksten, h1 tot en met h6, schuin komen te staan dan moet je het volgende doen:
h1,h2,h3,h4,h5,h6 { font-style: italic; }
De verschillende elementen staan achter elkaar, gescheiden door een komma (,).
Stijlen toepassen
Je kunt stijlen op drie manieren toepassen:
– In de tag van een element De stijl geldt alleen voor dat element.
– In de header van de webpagina De stijl geldt voor de elementen op de betreffende pagina.
– Op aparte stijlbladen De stijl geldt voor die pagina’s van je website die naar het stijlblad gelinkt
zijn.
Stijl voor een element
Wil je een stijl toepassen voor een specifiek element, dan zet je in de tag het attribuut ‘style’ en
daarachter de eigenschap(pen) en waarde(s).
<h1 style=”fontsize: 24pt; font-weight: bold;”> Inhoud </h1>
Bepaal voor jezelf nu eens wat er gebeurd met de stijl van het element h1.
Schrijf nu zelf een aantal elementen op, eerst bedenken wat je wilt en vervolgens de eigenschappen en
waardes bepalen.
Hieronder zie je een overzicht van eigenschappen.
Stijl voor een webpagina
Als je een stijl wilt maken voor een pagina moet je de stijldefinities in de header (<head>) plaatsen.
Dat doe je tussen de tags <style> en </style>. Je moet hieraan toevoegen dat het om een css verwijzing
gaat, en je krijgt dan bijvoorbeeld het volgende:
<style type=”tekst/css”>
h1 {fontsize: 24pt; fontweight: bold; }
b {font-weigth: 800; }
</style>
Dit wordt nu in de hele pagina toegepast.
Stijl voor een (deel van een) website
Wil je een stijl maken voor je hele, of een deel van je website, dan maak je een apart stijlblad. Dit is ook
weer makkelijk als je een verandering wil aanbrengen. Je hoeft dit alleen maar in het stijlblad te doen en het heeft
direct resultaat in de hele website. Hoe dit gaat kun je lezen in de volgende cursus;
