Oorspronkelijk diende HTML om structuur aan een tekst te geven, maar niet om het uiterlijk ervan vast te leggen. Daarom waren er "tags" (de "commando's" die tussen < en > staan) voor een titel, koppen op diverse niveaus (<H1>, <H2>, <H3>, enz.), alinea's <p>, opsommingen en hyperlinks.
Hoe de tekst er uit moest komen te zien bepaalde de browser, op basis van de structuur en de mogelijkheden van de monitor, maar dat stond niet gespecificeerd.
Later wilden mensen dat toch kunnen, en er kwamen "tags" bij om lettertypen, corpsgrootte, tekstkleur, achtergrondkleur enz. enz. aan te geven. Dat lijkt leuk, maar het heeft vele nadelen:
Met CSS (Cascading Style Sheets) zijn al deze problemen elegant op te lossen.
Met CSS koppel je uiterlijke eigenschappen aan een element
in HTML. Die eigenschappen kunnen met weinig of veel details
beschreven zijn, maar het gebeurt maar één keer, niet steeds
opnieuw. Het beste is de standaard HTML-elementen te gebruiken
(bijvoorbeeld body, h1, h2, p, strong), dan hoeft er in de inhoud
(HTML) niets speciaals te staan over het uiterlijk (CSS).
Voorbeeld:
Stel ik wil voor al mijn pagina's een fraai font. Ik kies er
een uit, en zet in het CSS-bestand waarnaar ik verwijs:
body
{
font-family: Trebuchet MS, Arial, sans-serif;
margin: +32pt;
}
Ik vind namelijk Trebuchet wel een aardig font, smaken verschillen.
Maar het is een Windows-font, andere systemen kennen het waarschijnlijk
niet. Het kan ook wel zijn dat alleen de wat nieuwere Windows-versies
het hebben, en oudere niet. Dat weet ik niet precies, en dat wil
ik ook niet weten, en niet hoeven weten. Ik kan dat doen door ook
alternatieve
fonts op te geven. Als de browser het eerste font niet kent mag het het
tweede gebruiken, en anders het derde. Arial is ook schreefloos, en
bestaat op alle Windows-versies vanaf 3.1.
Sans-serif (letterlijk: schreefloos)
is op alle systemen in een of andere vorm wel geïmplementeerd.
Mijn pagina's zullen er nu dus niet op alle systemen
precies
hetzelfde uitzien, maar wel ongeveer zoals ik het
bedoeld heb.
Ik heb ook nog een linker- en rechtermarge opgegeven, uitgedrukt in
points (pt).
Doordat ik het font opgeef voor de body geldt het
meteen ook voor p, h1, h2, li, strong enz. Ik kan ook wel voor elk
van die elementen een apart lettertype opgeven, maar dat hoeft niet.
Als ik hetzelfde wil, hoef ik het niet te herhalen. Dat spaart ruimte,
complexiteit, en interpreteertijd voor de browser.
Microsoft®
Word®
doet het vaak heel anders, veel
onhandiger.
Sommige elementen hebben nog nadere onderverdelingen, bijvoorbeeld
het Anchor van de HREF, dat kent
link (een nog niet bezochte hypertekst-verwijzing),
visited (een al wel bezochte verwijzing),
active (de link waar de cursor op staat, meestal te
verplaatsen met toetsen Tab en Shift-Tab),
hover (de link maar de muisaanwijzer boven hangt,
nog zonder te klikken).
Om hiervoor allemaal verschillende
kleuren
te hebben, kan bijvoorbeeld dit in het stijlblad (style-sheet) staan:
a:link {color: #66ffbb; }
a:visited {color: #ff8800; }
a:active {color: #5577ff; }
a:hover {color: #5577ff; }
De kleuren kunnen ook overigens ook gewoon met namen worden aangeduid.
Eerder zagen we hoe je een stukje tekst vet
of cursief kunt maken of kan onderstrepen om er de nadruk op te
leggen. Nadeel is dat de vorm van de benadrukking al vastligt, en
bij wijziging van die benadrukkingsstijl moet je alles weer door.
Het is daarom beter alleen vast te leggen dat
iets benadrukt moet worden, maar niet hoe, want
dat staat dan apart in CSS, geldig voor alle pagina's die van die
definitie gebruik maken.
HTML heeft daarvoor de aanwijzing <strong>, door tekst
daartussen te plaatsen krijgt het een bijzonder uiterlijk. Ik
deed dat hierboven met de woorden <strong>dat</strong> en
<strong>hoe</strong>.
Het is niet nodig hiervoor iets in CSS te zetten, omdat de browser zelf
al een manier heeft om <strong> te laten zien, bijvoorbeeld
vette tekst. Maar wil je iets anders, bijvoorbeeld cursief en een kleur,
neem je in het CSS-stijlblad op:
strong
{
font-style: italic;
color : red;
}
Het is ook mogelijk eigen subklassen te definiëren. Ik deed dat hierboven om de opgesomde nadelen meer op te laten vallen. Ik maakte een subklasse disadv (van disadvantage, nadeel) van het standaard li (list-item). In de HTML schrijf ik dan in plaats van <li> : <li class="disadv">, waardoor die punten van de opsomming tot die klasse gaan behoren, en het bijbehorende uiterlijk aannemen. Dat uiterlijk definieer ik in CSS, als volgt:
li.disadv
{
color : green;
font-style: italic;
}
De subklasse disadv hoort dan speciaal bij <li>. Maar ik kan ook een algemene subklasse vastleggen:
.disadv
{
color : green;
font-style: italic;
}
Dan kan ik ook midden in een tekst een nadeel
extra laten uitkomen, dus het in de HTML zo aan te geven:
<span class="disadv">nadeel</span>
Met CSS is nog veel meer mogelijk. Zie voor
uitgebreide uitleg
w3.org
en de specificaties.
Hans de Jong geeft deze
uitleg
in het Nederlands.
Verder is het boek "Webdesign in de praktijk" van Peter Kentie (de editie
van 2003 of 2005) aan te raden, en niet alleen voor wie meer over CSS wil
weten.
Zie ook deze toelichtende notitie.
Zelf ben ik pas CSS gaan gebruiken na de uitleg (geschreven door
Edwin Martin) in zijn boek doorgenomen te hebben, nadat eerdere pogingen
met alleen de specs strandden doordat ik er niets van begreep.
Voor deze uitleg heb gebruik ik het stijlblad "../html_en/style.css". Merk op dat er maar één stijlblad is voor alle talen, reden dat ik hem in een andere directory heb geplaatst dan de html-bestanden voor het Nederlands. Ik wil namelijk hetzelfde uiterlijk voor de Engelse en de Nederlandse versie, zodat er een gemeenschappelijk stijlblad kan zijn.
Het is mogelijk een basisstijlblad op te zetten, die voor veel pagina's
geldt. Aanvullende, gespecialiseerde eigenschappen voor kleinere groepen
pagina's kunnen dan in andere stijlbladen staan. Die kunnen het algemene
weer oproepen, als volgt:
@import url("basis.css");