HTML college: Stijldefinitie met CSS

De <font> tag is geschrapt uit HTML-4 en niet zonder reden. Het is veel logischer om de gedaante van text te gebruiken om de betekenis uit te drukken dan om op een heleboel plaatsen ad-hoc te definieren hoe de tekst eruit moet zien.

Een voorbeeld:
Je wilt dat bepaalde woorden in een tekst extra opvallen. Dat kun je doen door die woorden dik gedrukt te maken. Of door ze te onderstrepen, een andere font te geven, een andere kleur etc... Als je nu bij elke woord dat moet opvallen aangeeft dat het dik gedrukt moet worden, dan heb je een tekst met enkele dik gedrukte woorden. Als je die tekst naar een printer stuurt vallen de dik gedrukte woorden misschien niet echt goed op en zou je ze eigenlijk willen onderstrepen. Het begrip dikgedrukt is dus niet altijd synoniem voor opvallen. Eigenlijk wil je een begrip 'opvallen' introduceren. Als je dit onderscheid begrijpt ben je een eind op weg met CSS.

Met Cascading Style Sheets (CSS) kun je veel meer dan alleen tekst een andere kleur of font geven. CSS maakt het mogelijk om het uiterlijk van je website vorm te geven door bijvoorbeeld het aangeven van kleuren, lijndiktes, lijntypen, positie, afmetingen etc. van allerlei HTML-objecten.

Wat is CSS

De CSS2 specificatie stamt uit 1998. Het geeft je de mogelijkheid om op een centrale plaats het uiterlijk van je hele site te beschrijven. Die beschrijving neem je dan op in een 'externe stijldefinitie', ook wel 'external style sheet' genoemd.
Je kunt er ook voor kiezen om in een HTML-file een stijl te definieren met een 'in-line style' of in de header van je HTML-document een 'document-level style definition' op te nemen waarmee je alleen het uiterlijk van die ene HTML-pagina beschrijft. In de volgende paragrafen staan de verschillende mogelijkheden beschreven.

Binnen CSS heb je een ruime keuze aan wat je kunt instellen. Een paar voorbeelden:

Inline style

Een voorbeeld van gebruik van inline-style bij de p tag:

Bron Resultaat

<p>
De RVD ontkent dat koningin Beatrix geërgerd is over de actie van premier Balkenende tegen de Oranje- satire.De Volkskrant stelt op basis van bronnen in en rond het Oranjehuis,dat Beatrix vindt dat Balkenende met zijn actie de monarchie heeft beschadigd.
</p>

<p style="color: blue; font-style: italic">
De Volkskrant schrijft ook dat Beatrix alleen haar zorg over het toneelstuk 'Landgenoten.Beatrix spreekt' gedeeld heeft met Balkenende,en niets heeft gezegd over Egoland of Kopspijkers.
</p>

<p>
De RVD benadrukt dat bij het wekelijkse gesprek van de koningin en de premier geen derden aanwezig zijn en dat dus niemand weet wat daar besproken wordt.
</p>

De RVD ontkent dat koningin Beatrix geërgerd is over de actie van premier Balkenende tegen de Oranje- satire.De Volkskrant stelt op basis van bronnen in en rond het Oranjehuis,dat Beatrix vindt dat Balkenende met zijn actie de monarchie heeft beschadigd.

De Volkskrant schrijft ook dat Beatrix alleen haar zorg over het toneelstuk 'Landgenoten.Beatrix spreekt' gedeeld heeft met Balkenende,en niets heeft gezegd over Egoland of Kopspijkers.

De RVD benadrukt dat bij het wekelijkse gesprek van de koningin en de premier geen derden aanwezig zijn en dat dus niemand weet wat daar besproken wordt.

Document level style

Als je een 'document level stijdefinitie' wilt gebruiken dan MOET deze in de header gedefinieerd worden:


<html>
  <head>
  <style>
    p     {color: blue; font-style: italic}
    body  {background-image: url(achtergrondje.gif); color: #000000}
    h1    {color: blue}
    table {background-color:#c0b0b0}
  </style>
  <head>
Een opmerking die tegenwoordig niet meer zo van toepassing is: voor oude of zeer beperkte browsers die CSS niet ondersteunen moet je commentaartekens <!-- en --> om de stijldefinitie heen zetten om te voorkomen dat de stijldefinitie als tekst zichtbaar wordt. Ze zullen geen problemen hebben met de style tags zelf, want tags die ze niet kennen zullen ze gewoon negeren. Als je geen idee hebt waar ik het over heb mag je deze opmerking vergeten.
Een browser die wel met de style tags kan werken weet dat de stijldefinitie als commentaar opgenomen kan zijn en weet het er wel uit te halen.

External style sheet

Je moet een verbinding maken tussen de HTML-pagina en de CSS-file die je voor die pagina wilt gebruiken. Daarvoor zijn een paar mogelijkheden.

Eerste mogelijkheid: neem in de header een link-element op:

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

Hierbij geeft href de naam van de style sheet en type geeft aan om wat voor type file het gaat, een css-stylesheet in dit geval. Het attribuut rel geeft aan om wat voor soort link of relatie het hier gaat en dat is in dit geval een stylesheet-relatie.
Hoe ziet zo'n style sheet er nou uit:
selector   {property: value; property: value1 value2 value3}

 De selector kan bestaan uit:

Voor de properties (dat zijn eigenschappen van de selector) kun je iedere geldige HTML-tag invullen. De values geven een waarde aan elke property. Zoals je ziet mogen er meerdere waarden in een keer aan een property gegeven worden. Dat komt soms van pas, zoals het volgende voorbeeld laat zien:

em    {font: italic bold 28pt sans-serif}

Tag nesting

Soms wil je dat bepaalde eigenschappen van een tag afhankelijk zijn van de omgeving van die tag. Zo kun je bijvoorbeeld een tabel een ander randje geven wanneer die binnen een andere tabel valt:

1 2
3
45

Om dit te doen zet je het volgende in de style:
table table {border-style: dashed}

Of je geeft een unordered list een ander kleurtje wanneer het binnen een andere unordered list valt:

Voorbeeld van nesting:
In de style zet je
ul ul {color: magenta} 
<ul>
  <li>Hoofdstuk 1</li>
  <li>Hoofdstuk 2</li>
  <ul>
    <li>Paragraaf 1.1</li>
    <li>Paragraaf 1.2</li>
  </ul>
  <li>Hoofdstuk 3</li>
  <li>Hoofdstuk 4</li>
</ul>
  • Hoofdstuk 1
  • Hoofdstuk 2
    • Paragraaf 1.1
    • Paragraaf 1.2
  • Hoofdstuk 3
  • Hoofdstuk 4

Classes

Met classes kun je in een externe style sheet of een document level style verschillende stijlen definieren voor dezelfde tag. Voor inline styles heeft dit geen zin want die gebruik je maar 1 keer.
Voorbeeld: je wilt drie typen tabellen laten zien, waarbij tabellen met weerbericht altijd als achtergrondkleur blauw hebben, tabellen met wisselkoersen geel en tabellen met openingstijden van restaurants op Saturnus paars. Dan moet je op een of andere manier onderscheid kunnen maken tussen verschillende tabellen. Nou worden in HTML tabellen altijd aangegeven door <table> tags dus als je een achtergrondkleur voor table definieert dan krijgen alle tabellen die kleur. Dat schiet niet op.
Nou bestaat er gelukkig een manier om voor die table tag (net als voor alle andere tags trouwens) verschillende klassen aan te geven. Voor de table tag zet je dat zo in je stijldefinitie: 

table.weer      {background-color: blue}
table.beurs     {background-color: #808000}
En in de HTML-code gebruik je deze classes als volgt: 

<table border='0' class="weer">
<tr>
  <td>
    Geen weer vandaag 
  </td>
</tr>
</table>

<br>

<table border='1' class="beurs">
<tr>
  <td>
    Beurskoersen op de Amsterdamse beurs
  </td>
</tr>
<tr>
  <td>
    De koersen zijn weer eens gekelderd
  </td>
</tr>
</table>

<br>

<table border='1'>
<tr>
  <td align='center'>
    Openingstijden
  </td>
<tr>
</tr>
  <td>
    De kroeg is open om half acht
  </td>
</tr>
</table>
Dat ziet er dan zo uit:
Geen weer vandaag

Beurskoersen op de Amsterdamse beurs
De koersen zijn weer eens gekelderd

Openingstijden
De kroeg is open om half acht


De classes zoals hier beschreven voor de <table> tag zijn alleen voor de table tags te gebruiken. Hier volgt nog een voorbeeld van een class die alleen voor <a> tags geldt en waarmee je
het streepje onder een hyperlink-target kunt weghalen:

a.geenstreepje {text-decoration: none}

Dit is een hyperlink zonder streepje maar hij werkt wel gewoon als hyperlink.

Je kunt ook classes definieren die je voor alle tags kunt gebruiken. Dan zet je in de style definitie gewoon geen tag-naam voor de class, maar alleen de naam van de class: 


.kanarie   {background-color: yellow}
.muis      {background-color: #808080}

Pseudo classes

Pseudo classes zijn geen echte classes, maar geven aan dat een bepaalde toestand van een tag aanleiding geeft voor een verandering van uiterlijk van de tekst binnen die tag. Bijvoorbeeld: 
a:link          {color: #0000ff}
a:visited       {color: magenta}
a:active        {color: red}
a:hover         {background-color: #ffffaa}

Commentaar in style sheets

Commentaar in een style sheet niet zoals bij HTML, maar met /* blablabla */ zoals bij C, C++, Java, PHP etc. want CSS is geen HTML en kent de <!--   --> notatie niet.

Stijl zonder tag

Als je een stijl wilt aangeven voor een stuk tekst waar je eigenlijk geen tag wilt gebruiken dan kun je de tag <span> gebruiken. Deze doet uit zichzelf niks met de informatie die tussen <span> en </span> staat, maar je kunt er wel een class aan koppelen. Stel dat je in je stylesheet de class span.sinaasappel hebt gemaakt, dan kun je deze toepassen op een stukje tekst door het zo op te schrijven:

<span class="sinaasappel"> Dit wordt oranje </span>

Precedence: welke definitie wordt gebruikt ?

CSS is een afkorting van 'Cascading Style Sheet'. Met cascading wordt bedoeld dat je een aantal stijldefinities van hetzelfde of verschillende typen achter elkaar kunt schakelen of 'stapelen'. Het effect dat zoiets heeft op het uiteindelijke resultaat hangt af van de volgorde waarin je dingen opgeeft.

In het algemeen gelden de volgende regels:
  1. Hoe dichterbij, des te sterker
  2. Sorteer naar de klasse, bijvoorbeeld h1.muisgrijs is sterker dan h1
  3. Hoe specifieker de context, des te sterker
  4. In het algemeen: laatste definitie wordt gebruikt

Volgens deze regels geldt in de eerste plaats dat een inline definitie sterker is dan een document-level definitie en die is op zijn beurt weer sterker dan een externe definitie. Wanneer je dus een eigenschap van een tag definieert in een externe style sheet en in een document level style en als inline definitie dan wordt alleen de inline definitie gebruikt. Haal je de inline- definitie weg, dan wordt alleen de document-level definitie gebruikt. Haal je die ook weg, dan pas wordt de externe style sheet gebruikt om de betreffende eigenschap te bepalen.
Verder geldt volgens de regel dat een specifiekere context sterker is, dat een definitie van een stijl voor bv. een lijst binnen een lijst sterker is dan voor gewoon zomaar een lijst.
Tot slot geldt dat de laatste definitie telt. Stel dat je binnen een externe style sheet de kleur van h1 tags drie keer definieert: 
h1    {color: red}
h1    {color: yellow}
h1    {color: purple}
In dit geval zullen h1 tags paars worden, want die definitie maakt de voorgaande ongeldig.

Kleuren

Kleuren kun je in HTML en CSS opgeven met hun naam, bv. "red" of "yellow" of met getallen die de componenten van de kleur beschrijven. Voor dat laatste heb je twee mogelijkheden, namelijk een hexadecimaal getal of een 3-tuple.

Zo'n 3-tuple schrijf je op als 'rgb(R,G,B)' waarbij R staat voor de waarde van rood, G voor groen en B voor blauw. R, G en B kun je opgeven als getal tussen 0 en 255 of als percentage.

Wil je een kleur opgeven met een hex-getal, dan schrijf je dat op als '#RGB' waarbij R, G en B weer staan voor rood, groen en blauw, maar nu niet als decimale getallen maar hexadecimaal. Ze kunnen een waarde hebben tussen 00 en ff.

Een paar voorbeelden:

Fonts

Dit is serif
Dit is sans-serif
Dit is cursive
Dit is fantasy
Dit is courier
Times
Garamond
monospace
helvetica
univers
new century schoolbook
palatino
arial

Maten

Afmetingen kun je in CSS op verschillende manieren opgeven. Browsers die dit ondersteunen proberen zo goed mogelijk de absolute maten als in, cm, pt en pc weer te geven. Een overzicht:

Eenheid Afkorting Omschrijving CSS voorbeeld
Inch in Inches width: 5in
Centimeters cm Centimeters height: 20cm
Millimeters mm Millimeters border-width: 20mm
Pixels px Beelschermpixels width: 300px
Point pt 1 point = 1/72ste inch font: 18pt serif
Pica pc 1 pica = 12 points, dus 12/72ste inch font: 2pc serif
Emmen ? em 1 em is de hoogte van de letter 'm' line-height: 3em
X-en ? ex 1 ex is de hoogte van de letter 'x' line-height: 4ex

Voorbeeld

Hier vind je een voorbeeld van een style sheet.