Stylesheets

Vooraf

In de voorgaande weken hebben we tags gezien die we kunnen gebruiken om aan tekst een betekenis te geven. Zo kunnen we aangeven welke stukken tekst paragrafen vormen en wat voor soort headers daar tussen staan. De browser probeert automatisch er een toepasselijke opmaak voor te verzinnen.

<h1>In je browser ziet deze tekst er automatisch groot uit!</h1>

Nu gaan we kijken hoe we webpagina's mooier kunnen maken door een style aan elementen op de pagina toe te voegen. Op die manier kunnen we bijvoorbeeld kleuren, fonts en randen van elementen aanpassen.

In het onderstaande voorbeeld hebben we alle h1 tags van een nieuwe style voorzien.

h1 { color: #404853; font-size: 26px; font-family: Arial; } <html> <body> <h1>Hoofdstuk 1</h1> <p>Deze kopjes zien er mooier uit dan hoe de browser het standaard opmaakt.</p> <h1>Hoofdstuk 2</h1> <p>En het werkt automatisch op alle h1 tags in de hele webpagina!</p> </body> </html>

Deze style regels die we kunnen toepassen op html elementen heten Cascading Stylesheets (css). Met css kunnen we de opmaak van pagina's veranderen zonder dat we de html hoeven te veranderen.

We zeggen ook wel dat we met stylesheets de inhoud van de opmaak scheiden

Typen stylesheets

Er zijn 3 verschillende soorten manieren om stylesheets op je html toe te passen.

Linked stylesheets

In een webpagina kan een link naar een (extern) stylesheet-bestand op de webserver worden opgenomen. Dit doe je met behulp van het <link> element in de head van de pagina. Dit is de meest gebruikelijke methode om stylesheets op te nemen in een pagina. Je kan namelijk makkelijk dezelfde stylesheet op meerdere pagina's gebruiken.

Als je het css bestand 'style.css' wilt toepassen op de pagina kan je dat doen op de volgende manier:

<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Een header</h1> In dit bestand gebruiken we <a href="style.css">deze</a> stylesheet. </body> </html>
Embedded stylesheets

Soms heb je een stukje style maar op één pagina nodig, dan kan het juist onhandig zijn om dit in een apart bestand te moeten stoppen.

Embedded stylesheets kunnen binnen deze webpagina gedefinieerd worden met behulp van de <style>-tag. Deze tag moet binnen de head van de pagina worden opgenomen:

<html> <head> <style> h1 { color: blue; font-family: Helvetica; } </style> </head> <body> <h1>Een header</h1> <p>Gestyled met een embedded stylesheet</p> </body> </html>
Inline stylesheets

En soms slaat een stukje style maar op één element in één pagina. In dat geval kan je deze style toevoegen met het style-attribuut. Je zet dan alle style achter elkaar in het style attribuut.

Omdat je hiermee stijl-opmaak tussen de HTML plaatst zijn we eigenlijk vies bezig. We willen met CSS juist inhoud van opmaak kunnen scheiden. Gebruik deze techniek dus alleen tijdens het ontwikkelen van een website.

<html> <body> <h1 style="color: blue; font-family: Helvetica;">Een header</h1> <p>Gestyled met een inline stylesheet</p> </body> </html>

Syntax van stylesheets

rule
selector
body
{
declaration
property
color
:
value
red
;
}

Een stylesheet is niks meer dan een hele hoop stijl-regels. Deze regels geven aan hoe bepaalde HTML elementen er uit moeten zien. Zo kunnen we bijvoorbeeld de kleur en lettergrootte aanpassen. In de komende weken gaan we zien dat er een hele hoop verschillende stijl-regels zijn.

Een stijl-regel bestaat uit:

Een voorbeelddefinitie om alle h1 elementen in 16-punts grootte, vet en blauw te laten afdrukken ziet er als volgt uit:

h1 { font-size: 16pt; font-weight: bold; color: blue; }

Commentaarregels worden omgeven met /* en */, vergelijkbaar met Java en C++.

Classes binnen stylesheets

Als je dezelfde stijl wilt geven aan bepaalde elementen en je kunt het niet doen met de tagname dan kun je dat ook via een class doen.

Stel dat we alle belangrijke elementen rood willen maken. Dan kunnen we deze de class "belangrijk" geven. Met css kunnen we deze class dan rood maken. De punt voor de naam in css geeft aan dat we alleen de elementen met de juiste 'class' willen hebben. .belangrijk { color: red; } <h3>Onderwerp</h3> <h3>Nog een onderwerp</h3> <h3 class="belangrijk">Belangrijk onderwerp!</h3> <h3>Laatste onderwerp</h3> <div class="belangrijk"> Dit is een div. Maar wel een belangrijke div. </div>

Hulp voor ontwikkelaars

Met regels die van toepassing zijn op meerdere elementen, en elementen waar meerdere stijlregels op van toepassing kunnen zijn, wordt het al snel onoverzichtelijk waarom dingen er uit zien zoals ze er uit zien. Om daarbij te helpen zit er in elke browser een tooltje die helpt met het inzichtelijk maken van CSS. Deze kan je op de volgende manier openen:

Chrome Webinspector
Stijlregels die van toepassing zijn op de h1

In dit venster kan je op de webpagina een element selecteren en live zien welke CSS er op van toepassing is. Je kan ook live de CSS uitzetten of aanpassen. Krijg je niet te zien wat je verwacht te zien op een pagina? Dan is deze tool onmisbaar!

Welke stijlregels zijn er allemaal van toepassing op deze tekst?

Zet een aantal stijlregels uit met de vinkjes. Wat gebeurt er?