In het vorige deel hebben we er voor gezorgd dat we een HTML-pagina hebben die een todo-lijstje weergeeft. Momenteel ziet het er maar pover uit, dus we gaan de pagina wat aanpassen.

Styling

Om de pagina een andere look te geven gaan we gebruikmaken van Cascading Style Sheets of CSS. Sla eerst je pagina op in een directory listed. Maak hierin een nieuwe directory styles. In deze directory gaan we een nieuwe file aanmaken met de naam screen.css. Dit bestand zal onze CSS code gaan bevatten en zorgen voor de styling van onze pagina.

In het head element van een HTML-pagina kunnen we allerlei data opnemen die het bestand beschrijft. Op dit moment maken we enkel gebruik van een title element. Om ons CSS bestand aan de HTML-pagina te koppelen gaan we iets extra binnen de head tags opnemen.


<head>
	<title>Listed</title>
	<link rel="stylesheet" href="styles/screen.css" type="text/css" media="screen" />
</head>

Met behulp van het link element kunnen we een link leggen naar een ander bestand. Dit is niet hetzelfde als een link waar je op kan klikken. Dat type links komt later aan bod. In dit geval gebruiken we het link element om de relatie aan te geven met ons CSS bestand. Binnen de link tag komen nog allerlei woorden voor: dit zijn attributen en de waarde van ieder attribuut in de vorm attribuut="waarde". Attributen laten toe om meer informatie te geven over het element.

In de link tag in bovenstaand voorbeeld hebben we 4 attributen:

rel: De waarde van dit attribuut duidt de relatie aan tussen het huidige document (onze HTML-pagina) en het gelinkte document (ons CSS bestand). In dit geval is het gelinkte document een stylesheet voor de HTML-pagina.
href: De waarde van dit attribuut geeft de locatie van het gelinkte document aan. De locatie kan zowel absoluut als relatief zijn. Een absoluut pad is bijvoorbeeld C:\Mijn Map\listed\styles\screen.css. Een relatief pad is ten opzichte van het huidige document. Als de HTML-pagina zich in de map C:\Mijn Map\listed\ bevindt, is het relatieve pad naar het CSS bestand styles/screen.css.
type: Het type van het gelinkte document is text/css. Dit geeft aan dat het document een gewoon tekstbestand is met CSS code.
media: Dit attribuut geeft aan voor welke media het gelinkte document geschikt is. In het voorbeeld heb ik gekozen voor screen. Andere mogelijke opties zijn te vinden in de HTML specificatie.

Intermezzo

Een tooltip

Een hoop geleuter over een element dat tot nu toe nog maar weinig heeft gedaan. Maar hoe zit het nu met die links waar je op kan klikken? Zo een link wordt voorgesteld door het a (anchor) element. De a tag heeft verschillende attributen. De belangrijkste zijn het href attribuut, dat op dezelfde manier werkt als bij het link element, en het title attribuut. De waarde van het title attribuut krijgt je te zien in een tooltip als je over de link gaat met je muis.

Om een link te leggen naar mijn site ga je dan het volgende toevoegen aan de body: <a href="http://www.el73.be" title="De site van Kevin">Dit is dan de linktekst. Klik hier!</a>. Zo kan je in het vervolg op de tekst "Dit is dan de linktekst. Klik hier!" klikken en kom je vervolgens op mijn website terecht. De tekst "De site van Kevin" komt tevoorschijn wanneer je je muis lang genoeg boven de linktekst houdt.

Snelle CSS

Tijd om eindelijk wat te gaan doen aan de weergave van de HTML-pagina. In ons CSS bestand gaan we het volgende toevoegen:


body {
	background: #ffffff;
	color: #000000;
	font: 100% "Verdana", sans-serif;
}

Sla dit op en herlaadt je HTML-pagina. De tekst zou nu in het Verdana lettertype moeten worden weergegeven (als je dit lettertype al als default lettertype gebruikte in je browser zul je weinig verschil zien).

Wat gebeurt er eigenlijk? Je HTML-pagina wordt door je browser geladen. Het CSS bestand wordt ook geladen. De browser ziet in screen.css voorgaande code en weet dat deze code moet worden toegepast op de body van de HTML-pagina. Dus geeft de browser de body van de pagina een witte (#ffffff) achtergrondkleur, een zwarte (#000000) tekstkleur en wordt het Verdana lettertype op 100% grootte gebruikt.

Familie is belangrijk

Het sans-serif stukje in bovenstaande code geeft de familienaam aan van het lettertype. Verdana is een lid van de sans-serif familie. Omdat een HTML-pagina door de browser van een gebruiker wordt weergegeven, moet de gebruiker ook over Verdana beschikken om dezelfde weergave te krijgen. Een familienaam opgeven zorgt er voor dat de weergave bij een gebruiker ongeveer hetzelfde blijft: de browser zal bij gebrek aan het Verdana lettertype een ander lettertype uit de sans-serif familie gaan gebruiken.

Het lettertype Times New Roman is een lid van de serif familie. Als je in de code Verdana zou gaan vervangen door Times New Roman, vervang je dus ook best sans-serif door serif.

Kleuren

Kleuren kan je voorstellen met simpele woorden. white is wit, black is zwart. In de code heb ik echter de hexadecimale voorstelling van kleuren gekozen, zoals #000000. Het # karakter duidt erop dat we hexadecimaal werken. Voor wat volgt hebben we echter wat informatie nodig over hoe kleuren worden samengesteld. Zoals uitgelegd in het RGB kleursysteem artikel op Wikipedia kunnen we kleuren samenstellen met behulp van een rode, groene en blauwe component. #000000 komt dan overeen met 00 rood, 00 groen en 00 blauw, of: geen rood, geen groen, geen blauw, dus zwart. FF (of 255) is de hoogste waarde die we kunnen geven aan een component. #FFFFFF (of #ffffff - hoofdletters zijn niet nodig) komt dus overeen met 255 rood, 255 groen, 255 rood, of: zuiver rood, zuiver groen, zuiver blauw, dus wit.

Als we een zuiver groene achtergrond voor de body wilden, zouden we in de CSS dus background: #ffffff; vervangen door background: #00ff00;. Als je dit hebt getest en dit nog kunt lezen, zul je het met me eens zijn dat donkergroen misschien een betere keuze was. Bijvoorbeeld een #006600. Maar de volgende keer zullen we toch maar gewoon wit als achtergrondkleur gebruiken.

Ontleding

De CSS code tot nu toe:


body {
	background: #ffffff;
	color: #000000;
	font: 100% "Verdana", sans-serif;
}

Als we dit gaan ontleden komen we tot…


selector {
	property: waarde
}

De selector specifieert op welk HTML element de CSS code moet worden toegepast. In onze CSS code komt momenteel slechts 1 element voor als selector: body. Een selector wordt gevolgd door accolades ({ en }). Binnen de accolades worden properties en hun waardes opgegeven. Dit valt te vergelijken met attributen en hun waarde in de HTML code. De properties in onze code zijn background, color en font. Als er meerdere properties voorkomen binnen de accolades moet na de waarde een punt-komma worden geplaatst. Enkel na de laatste waarde moet geen punt-komma worden geplaatst. Ik doe het liever altijd.

Meer weten hierover? W3 Schools beschikt over bondige uitleg over CSS. De weergave van de pagina is ondertussen nog maar lichtjes aangepast, dus we hebben nog wat werk voor de boeg.

Dit artikel werd opgenomen in ontwikkeling, webdesign.

Listed - deel 2