In het vorige hoofdstuk hebben we gekeken naar de verschillende selectors en lengte eenheden die gebruikt kunnen worden. In dit hoofdstuk gaan we kijken naar een aantal eigenschappen en hoe we de verschillende eenheden die we hebben geleerd kunnen toepassen op deze eigenschappen. Deze eigenschappen kunnen we gebruiken om:

• Het lettertype te veranderen;
• De tekst kleur te veranderen;
• Ook wordt uitgelegd hoe:
  • kleuren in het algemeen werken;
  • Hoe je een achtergrond aan een element toevoegt;
  • En hoe je een rand aan een element toevoegt.

Lettertypen

Nu kunnen we eens echt beginnen met het opmaken van je website! We starten simpel: met tekst.

Stel, we hebben deze alinea in onze HTML code:

<p>Zoals <cite>Johan Cruijff</cite> ooit zei:
<q>Om te winnen moet je 1 goal meer scoren dan je tegenstander.</q></p>

Het zou misschien leuk zijn om deze alinea een ander lettertype te geven. Laten we Verdana doen. En als we toch bezig zijn, laten we het ook gelijk een andere grootte geven. Dat allemaal kunnen we regelen met deze CSS code:

p {
	font-family:Verdana,sans-serif;
	font-size:1.5em;

	font:1.5em Verdana,sans-serif;
}

Het eerste CSS eigenschap die we zien is het font-family eigenschap. Hiermee geef je de lettertype(n) aan. Zoals je ziet hebben we in dit voorbeeld voor Verdana gekozen omdat die wel op de meeste computers is geïnstalleerd. Is die niet geïnstalleerd, dan kijkt de browser achter de komma en ziet die sans-serif (Frans voor zonder scheef) staan. Dat betekend dat de browser zelf een lettertype zonder scheef moet uitzoeken. Sans-serif is één van de vijf "standaard families". Eén daarvan moet altijd aan het einde van de waarde van de font-family eigenschap staan, want als alle lettertype(n) die daarvoor staan niet zijn geïnstalleerd bij de gebruiker, dan kan de browser van de bezoeker zelf een lettertype uitzoeken. Alle vijf standaard families zijn:

1. Serif (Lettertype met scheef);
2. Sans-serif (Zonder scheef);
3. Cursive;
4. Fantasy;
5. Monospace.

Het tweede eigenschap dat we in het voorbeeld zien is het font-size eigenschap. Met deze eigenschap bepaal je de grootte van de tekst. Zoals je ziet gebruiken we voor deze waarde de em eenheid zoals we die in het vorige hoofdstuk zagen.

Het derde eigenschap, font, is hetzelfde als de twee eigenschappen die daarboven staan. Deze voegt de bovenste twee eigenschappen dus samen. Handig als je ruimte wilt besparen en wanneer wil je dat niet?. Het is dus aangeraden om font te gebruiken. Dit eigenschap is namelijk een combinatie van meerdere eigenschappen waardoor het de grootte van jouw CSS bestand aanzienlijk kleiner maakt.

Tekst kleur

Nu we de lettertype en de grootte daarvan kunnen veranderen, gaan we aan de slag met de kleuren. Hiervoor gebruiken we het color eigenschap. Laten we color toevoegen aan het voorbeeld uit de vorige paragraaf:

p {
	font:1.5em Verdana,sans-serif;
	color:#FF0000;
}

We zien in het voorbeeld hierboven op de derde regel het color eigenschap staan die de waarde #FF0000 heeft. Dat is de kleur rood aangegeven als "hexadecimaal". We gaan hier niet op in. Het is namelijk een stuk makkelijker om een grafisch programma, zoals colr.org of Adobe Kuler te gebruiken om een kleur te selecteren en dan de hexadecimaal van die kleur te kopiëren. Bekende grafische applicaties zoals Adobe Photoshop, of het gratis programma GIMP hebben ook altijd zo'n soort functie. Hiervan hebben we een screenshot gemaakt.

Kleuren

Mensen kunnen normaalgesproken met hun ogen kleuren waarnemen en vinden dat in het algemeen ook mooi. Daarom zal goed gebruik van kleuren een positief effect hebben op jouw layout. Met goed gebruik wordt natuurlijk niet een kleurenschema van fel rode tekst op een zwarte achtergrond bedoeld. Dat is niet mooi en leest zeer vervelend.

We zagen kleuren al in de vorige paragraaf voorbij komen. Daarin gaven we een kleur aan d.m.v. een hexadecimaal. Maar CSS kent ook andere manieren om kleuren aan te geven. Dit kan worden gedaan d.m.v. sleutelwoorden. Zo kan bijvoorbeeld het sleutelwoord red worden gebruikt om aan te geven dat je de kleur rood wilt gebruiken. Deze kwamen we al in het vorige hoofdstuk tegen. orange geeft op zijn beurt de kleur oranje aan. En zo zijn er nog 15 andere sleutelwoorden die elk een andere kleur aangeven:

Bron afbeelding: CSS 2.1 Specificatie.

Zoals je ziet is het bij sommige kleuren makkelijker om deze sleutelwoorden te gebruiken i.p.v. het hexadecimaal. Zo heeft red maar 3 karakters terwijl #FF0000 er 7 heeft. Maar hexadecimalen kunnen ook korter. Zo kan #FF0000 worden herschreven naar #F00. Dit maakt het hexadecimaal 3 karakters korter.

Je kan hexadecimalen inkorten als ze het volgende patroon volgen: #xxyyzz Hiermee wordt bedoeld dat xx een paar van 2 dezelfde getallen of letters is. Dit kan dus 00 of EE zijn. Hetzelfde geldt voor yy en zz. Het is echter niet noodzakelijk dat xx, yy en zz drie paar verschillende getallen zijn. Zo kan namelijk het hexadecimaal #FFFFFF ook worden herschreven naar #FFF.

Achtergronden

Van kleuren komen we aan bij achtergronden. Achtergronden zijn leuk, mooi, maar soms ook uiterst handig om een bepaald deel van je pagina op te laten vallen. Je kan de achtergrond van een HTML element instellen d.m.v. het background eigenschap. Eigenlijk is deze eigenschap hetzelfde als font, namelijk een samenvoeging van meerdere eigenschappen, maar het is overzichtelijker, sneller en makkelijker om het gewoon allemaal in één eigenschap te doen.

In CSS kan je twee verschillende soorten achtergrond gebruiken:

1. een kleur;
2. en/of een afbeelding.

Je kan ze allebei tegelijk gebruiken, of alleen een kleur, of alleen een afbeelding. We beginnen eerst met een kleur. Dus stel, je wilt een witte achtergrond voor alle P elementen in je HTML, dan gebruiken we deze code:

p {
	background:#FFF;
}

Zoals je ziet, gebruiken we hier ook een hexadecimaal om de kleur wit aan te geven. Als we een afbeelding willen wordt het iets ingewikkelder. Dan ziet het er namelijk als volgt uit:

p {
	background:url(plaatje.png);
}

Je ziet dus dat je in de waarde van het background eigenschap de IRI (beter bekend als URL) tussen url( en de ) doet. Het plaatje wordt nu herhaald over de hele pagina. Dat kan er dus zo uitzien. Wil je dat de achtergrond zich alleen horizontaal verspreidt, dan plakken we er "repeat-x" achter. Als je wiskunde hebt (gehad), begrijp je dat de letter "x" in repeat-x voor de x-as staat. Dat betekend dat je de achtergrond ook alleen over de y-as (verticaal) kan laten verspreiden. Daarvoor gebruiken we dus repeat-y. Indien je de achtergrond helemaal niet wilt laten verspreiden, zet dat achter de IRI "no-repeat". Als we dit allemaal samenvoegen met het laatste voorbeeld krijgen we dit:

p {
	background:url(plaatje.png);           /* Achtergrond verspreidt zich over het hele element */
	background:url(plaatje.png) repeat-x;  /* Achtergrond verspreidt zich alleen over de x-as */
	background:url(plaatje.png) repeat-y;  /* Achtergrond verspreidt zich alleen over de y-as */
	background:url(plaatje.png) no-repeat; /* Achtergrond verspreidt zich niet */
}

Zoals al eerder staat vermeld, kan je ook én een achtergrond afbeelding én een achtergrond kleur tegelijk gebruiken over een HTML element. Dat doe je door de hexadecimaal van de achtergrond kleur voor de IRI van de afbeelding te zetten, zoals hieronder:

p {
	background:#FFF url(plaatje.png);
}

Randen

Soms is het mooi of handig een rand om een HTML element te doen. In CSS hebben we acht verschillende soorten randen:

1. dotted;
2. dashed;
3. solid;
4. double;
5. groove;
6. ridge;
7. inset;
8. outset.

Deze randen zien er volgens Firefox als volgt uit in het zwart (het uiterlijk van de verschillende randen kan in elke browser anders zijn):

Wil je een dikke, rode, doorgetrokken rand om een P element, gebruik dan deze CSS code:

p {
	border:0.3em solid #F00;
}

Voorbeeld alinea.

De bovenstaande code zorgt ervoor dat elke P element een rode rand zoals hierboven krijgt. In de bovenstaande code zien we het border eigenschap. In de waarde van dit eigenschap zien we als eerste de lengte eenheid em uit het vorige hoofdstuk terugkomen. Het is in dit voorbeeld nu goed te zien dat de rand groter wordt naarmate je de grootte van de tekst verandert. Dit kan je zelf testen door Ctrl ingedrukt te houden en met je scroll-knop op je muis naar beneden te scrollen. Indien je de beschikking hebt over zo'n muis (en een Ctrl knop natuurlijk) is goed te zien dat de rand inderdaad groter wordt.

Vervolgens zien we het sleutelwoord solid wat aangeeft welke soort rand het moet worden. Dan zien we wederom de kleur rood, maar dit maal als ingekort hexadecimaal. Deze geeft dus, vanzelfsprekend, aan dat rand een rode kleur moet hebben, zoals dat in het voorbeeld te zien is.

Nu we HTML en CSS voor het grootste gedeelte onder de knie hebben gaan we kijken wat we ermee kunnen doen door je eerste website te maken.