HTML les 10 – Stijlen 3 (CSS)
We gaan in deze aflevering stijlbladen maken, hiervoor moet je wel de eerste cursus Stijlen hebben
gedaan, omdat we hier op voortborduren. We weten inmiddels hoe we een element onze eigen stijl kunnen
geven. Dit kunnen we toepassen in een element zelf en voor een webpagina. Nu gaan we het leren toepassen
in een website.
Je moet een apart bestand maken en daar je stijlen in plaatsen. In feite worden die stijlen hetzelfde
geschreven als voor een webpagina, maar nu komen alle stijlen op ee blad te staan. Dit blad krijgt als extentie
.css (Voor een html-pagina is dat .htm of .html).
We gaan een nieuwe pagina openen. Daarin gaan we een aantal stijlen plaatsen.
Dat kan bijvoorbeeld er zo uit zien:
body { background: white; font-family: verdana;}
:link { color: black; font-weight: bold; }
:active { color: black; font-weight: bold; }
:visited { color: black; font-weight: bold; }
:hover { color: #ff0000; font-weight: bold; text-decoration: underline; }
a { font-size: 7pt; text-decoration: none;}
p { font-size: 7pt; font-family: verdana; }
h1 { font-size: 21pt; }
Dit document sla je bijvoorbeeld op als ‘mijnstijl1.css’, dan herkent de browser dit namelijk als een
Cascading Style Sheet (CSS)
en niet als een html-pagina ofzo.
Verwijzen
Een html-pagina die gebruik moet gaan maken van de door jouw bedachte stijl, moet verwijzen naar het stijlblad.
Daar moet dus een link-tag (<link />) voor komen die je plaatst in de header (<head>) van je html-pagina. Dat wordt
Je moet dit er in zetten, anders gebeurd er niets. Er moeten drie attributen bij het element gezet worden,
namelijk:
– rel=”stylesheet”
– type=”text/css
– href=”adres”
Je krijgt dan bijvoorbeeld het volgende:
<link rel=”stylesheet” type=”text/css” href=”mijnstijl1.css” />
In feite is dit alles en kun je alles gaan uploaden naar je server.
Maak zelf twee stijlbladen
Ga nu eens, om het een en ander uit te proberen, zelf twee stijlbladen maken, geef ze allebei een
unieke naam en maak vervolgens een webpagina, die je twee keer opslaat en waarin alleen de verwijzing
naar de stijlbladen wijzigt. Dus de een krijgt een verwijzing naar je eerste stijl en de ander naar de
tweede stijl. Als het goed is krijgt een en dezelfde webpagina een heel ander uiterlijk, net als we in het
begin van de eerste les over stijlen hebben gedaan. Ga maar eens met je muis over het plaatje hieronder. Dezelfde
webpagina in twee verschillende stijlen.
Meerdere stijlen voor een element
Je kunt een element ook meerdere stijlen toekennen door deze onder te verdelen in klassen.
Je kunt bijvoorbeeld vinden dat sommige links (<a>) kleiner
worden weergegeven dan andere, sommige links moeten juist groter worden dan de rest, het
gaat wel steeds om links. Nu geef je die kleinere links de klasse klein mee en de grotere links, de
klasse groot. Het gewone element verschijnt dan in een gewoon lettertype. Je moet aan vier zaken denken:
– HTML code;
– .klassenaam (Deze moet uniek zijn)
– {eigenschap: waarde; eigenschap: waarde: }
In ons voorbeeld krijgt de klassen klein en groot de volgende stijl:
a.klein {font-size: 8pt; }
a.groot {font-size: 12pt; }
In je html-pagina zet je dan het volgende:
<a href=”link1.htm” class=”klein”>Link klein</a>
<a href=”link1.htm” class=”groot”>Link groot</a>
Het resultaat is dat een link klein zo wordt weergegeven:
En dit is het resultaat voor een grote link:
Met de elementen <p> (paragraaf) en <div> (tekstblok) kun je delen van teksten aanpassen. Deze worden dan ook veel gebruikt
bij de toepassing van klassen.
Klassen voor alle tekstelementen
Stel nu dat je wilt dat alle elementen de teksten schuin (Italic) weergeven, dan kun je ook klassen
opgeven zonder de html-code en zet je dus alleen maar de volgende definitie in je document:
.schuin {font-style: italic ; }
Je kunt nu deze stijl aan ieder tekst element koppelen. Dus:
<div class=”schuin”>
Maar ook:
<h3 class=”schuin”>
