html-wijzer

De basis van CSS

Cascading Style Sheets (afgekort: CSS) is de opmaakafdeling van HTML. Hoewel je ook HTML kunt gebruiken om je pagina op te maken, heeft CSS veel meer mogelijkheden.

Introductie

HTML is gemaakt om structuur te geven aan documenten. In het begin werd er dan ook nog helemaal niet aan opmaak gedacht. Toen begon HTML zich te ontwikkelen, en er werden mogelijkheden ingevoegd om een pagina op te maken met HTML.

Omdat HTML eigenlijk helemaal niet bedoeld is om websites op te maken, is CSS ontwikkeld. Hiermee kun je je website opmaken zonder dat je er HTML bij nodig hebt. HTML is immers alleen om structuur te geven.

Werking

Het handige van CSS is dat je alle opmaakgegevens in één bestand opslaat. Als je site dus een nieuw lettertype nodig heeft, hoef je maar één bestand te veranderen.

Verwijzen

Als eerste maak je natuurlijk het CSS bestand aan. Het maakt niet uit hoe het heet, als de extensie maar .css is. Nu verwijs je in elk HTML-document nog naar dat bestand. Dat doe je door dit tussen de head tags te zetten:

<link href="cssbestand.css" rel="stylesheet" type="text/css">

Als je nu het CSS-bestand wijzigt, worden de wijzigingen als vanzelf in alle pagina's doorgevoerd.

Syntax

CSS-code is over het algemeen genomen als volgt opgebouwd.

selector { eigenschap: waarde; }

Letteropmaak

body { font-family: Arial; font-size: 12px; background-color: lightblue; }

Zoals je ziet bepalen we eerst op welk HTML-element de opmaak toegepast moet worden (body in dit geval).

• font-family: bepaalt het lettertype, nu dus Arial.
• font-size: bepaalt de grootte van de letters op je site in pixels (px) of punten (pt).
• background-color: bepaalt de achtergrondkleur.

Ook is het mogelijk om, als er bijvoorbeeld geen Arial is geïnstalleerd op de computer van een bezoeker, een ander lettertype naar keuze te laten zien. Dat gaat zo:

p { font-family: Arial, Verdana, Times New Roman, sans-serif; }

Het p gaat over alle tekst die tussen <p> en </p> staat. Verder zie je Arial als eerste in de lijst staan. Is deze niet geïnstalleerd, dan word Verdana weergeven. Is deze er ook niet, dan Times New Roman, enz.

Wil je je letters een ander kleurtje geven? Gebruik de volgende code:

p { color: #ffffff; }

Verder is het mogelijk om bijvoorbeeld alle tekst tussen de h2 tags cursief weer te geven. Dat moet zo:

h2 { font-style: italic; }

In plaats van italic kun je ook gebruiken:

• normal
• oblique

Natuurlijk kun je ook h2 door h3 of h1 vervangen. Wil je h2 onderstrepen? Gebruik dan dit:

h2 { text-decoration: underline; }

In plaats van underline kun je ook gebruiken:

• none
• overline
• line-through
• blink

Of alle tekst tussen h5 vet maken?

h5 { font-weight: bold; }

Alle mogelijkheden voor font-weight op een rijtje:

• normal
• bold
• bolder
• lighter
• een getal tussen 100 en 1000

Links

Nu zijn de links aan de beurt.

a:link { color: red; } a:visited { color: yellow; } a:hover { color: purple; } a:active { color: green; }

• a:link bepaalt de kleur van een link.
• a:visited bepaalt de kleur van een bezochte link.
• a:hover bepaalt de kleur van een link waar je met je muis op staat.
• a:active bepaalt de kleur van een actieve link.

Klasses

In de bovenstaande voorbeelden hebben we steeds een opmaak aan een bepaalde tag gekoppeld. Klasses maken het echter mogelijk om losse elementen een opmaak toe te wijzen.

Je wilt bijvoorbeeld een bepaalde paragraaf een ander lettertype geven. Dat gaat op de volgende manier:

<p class="paragraaf">Hier komt een paragraaf met tekst.</p> .paragraaf { font-family: Comic Sans MS; }

Je ziet dat we hier het element een naam hebben gegeven (paragraaf) die we in het CSS-bestand kunnen oproepen. Als je een klasse aanroept, moet je dit echter wel altijd aangeven door er een puntje voor te plaatsen.

Slot

Probeer eens goed te oefenen met deze informatie, en je zult zien dat het niet zo moeilijk is als het lijkt. Bij de artikelen kun je andere CSS-onderdelen vinden.