Zoals in de introductie duidelijk staat vermeldt, leer je in deze tutorial ook CSS om je webpagina's op te maken en ze er mooi uit te laten zien. Maar op het feit na dat HTML en CSS voor twee verschillende doeleinden worden gebruikt, zien ze er ook totaal verschillend uit. HTML gebruikt, zoals je nu weet, elementen en attributen, maar in CSS worden dingen gebruikt die daar totaal niet op lijken. Een voorbeeld van CSS:

html {
	color:red; /* Rood */
}

Wat deze CSS code zegt is heel eenvoudig. Alle tekst in het HTML element moet de kleur rood krijgen. Laten we eens de code ontleden. In deze code zien we vier dingen:

1. html, de selector, die zegt over welk element we het hebben;
2. color, een eigenschap, die iets over het element zegt;
3. red, de waarde van color;
4. en /* Rood */, commentaar.

In dit hoofdstuk bespreken we dus de CSS-syntax. In het volgende hoofdstuk wordt precies uitgelegd hoe je jouw CSS code kan gebruiken op jouw website. Dit aspect laten we dus in dit hoofdstuk even achterwege.

Selectors

In de CSS is de tekst html de "selector". Met de selector geef je aan op welke HTML elementen de eigenschappen (zoals color) betrekking hebben. Met de selector geef je dus aan welke elementen je wilt opmaken.

CSS kent 4 soorten selectors:

1. structuur gestuurde selectors;
2. attribuut selectors;
3. pseudo-klassen;
4. en pseudo-elementen.

Structuur gestuurde selectors

Als we terugkijken naar het voorbeeld aan het begin van dit hoofdstuk, dan zie je dat de selector in die code alleen het HTML element bevat. Vaak is het echter niet genoeg om één element als selector te nemen. Soms wil je namelijk meerdere elementen hetzelfde opmaken. Als je bijvoorbeeld alle ABBR én ACRONYM elementen rode tekstkleur wilt geven, dan kan je simpelweg allebei de elementen in de selector toevoegen met een komma ertussen, zoals hier:

abbr, acronym {
	color:red;
}

De komma is van wezenlijk belang. Indien je die vergeet krijg je namelijk een heel ander effect. Dan zoekt de browser namelijk naar alle ACRONYMs in ABBR elementen. Dat kan echter ook handig zijn. Stel je wilt dat alle ABBRs de tekstkleur rood krijg, maar alleen als ze in een P element zitten. Dan krijgen we de volgende CSS code:

p abbr {
	color:red;
}

Nu krijgen alle ABBR elementen in een P, door de spatie tussen de twee element in de selector, een rode tekstkleur. Dit krijgt een ABBR ook als die eigenlijk in een ander element zit. Zo kan een ABBR namelijk ook in een A element zit, maar als dit A element in een P zit, dan krijg de ABBR alsnog een rode tekstkleur. Wil je echter dat alleen ABBRs die rechtstreeks in een P zit een rode kleur krijgt, dan voegen we een > toe tussen de twee elementen in de selector zoals hier:

p > abbr { /* eigenschappen */ }

Bij de selector uit het bovenstaande voorbeeld zit echter één addertje onder het gras: Internet Explorer ondersteunt de selector die gebruikt maakt van het > karakter niet. Dit kan misschien voor wat verbazing zorgen aangezien deze selector is ontworpen in 1999, maar het zij zo. Het is natuurlijk wel jammer aangezien dit element in sommige gevallen erg van pas zou komen. Een ander voorbeeld van een selector die ook erg handig is, maar ook niet wordt ondersteund door Internet Explorer is de selector waarmee je een element kan selecteren die direct na een ander element komt. Dus als je bijvoorbeeld alle Ps wilt selecteren die na een H2 element komen, dan plaatsen we een karakter tussen de twee elementen in de selector zoals in het volgende voorbeeld:

p   abbr { /* eigenschappen */ }

Attribuut selectors

Soms zijn de structuur gestuurde selectors die hierboven zijn genoemd niet goed genoeg om de elementen te selecteren die je apart wilt opmaken. Zo zou je bijv. alle elementen met het title attribuut een andere tekstkleur willen geven. Maar zo zou het kunnen zijn dat er Q (citaat) elementen zijn met een title attribuut, maar ook P elementen Als al die elementen ook nog verspreid zijn over de hele pagina en dus niet netjes bij elkaar staan, dan heb je niks aan de selectors die we hierboven hebben besproken. Wat ze wel allebei overeenkomen is dat ze een title attribuut hebben, dus gebruiken we de attribuut selector:

[title] { /* eigenschappen */ }

We zien dus dat we elementen kunnen selecteren op hun attributen door de naam van het attribuut tussen [ en ] te plaatsen. Maar als je alleen elementen met title="Hoi" wilt selecteren terwijl er ook elementen zijn die title="Doei", dan schieten we met het bovenstaande voorbeeld ook niks op. We kunnen de selector echter wel veranderen dat het alleen de elementen opmaakt waarvan de waarde van het title attribuut "Hoi" is, zoals hier:

[title="Hoi"] { /* eigenschappen */ }

Pseudo-klassen

Hoe handig de attribuut selectors ook lijken, zo vervelend is het ook dat Internet Explorer wederom niet overweg kan met deze selectors. Waar Internet Explorer gelukkig wel mee overweg kan, zijn de "pseudo-klassen". Pseudo-klassen selecteren elementen afhankelijk van een status. Zo zou je een element waar de gebruiker met zijn muis overheen gaat anders willen opmaken dan dat het element normaal is. Dit zie je vaak met links en wordt bereikt d.m.v. de :hover pseudo-klasse en ziet er als volgt uit:

a:hover { /* eigenschappen */ }

Hier volgt een lijst met alle pseudo-klassen en hun omschrijving:

:first-child

Met de :first-child pseudo-klasse wordt het eerste element van een bepaald element geselecteert. Dus als je het eerste element van het BODY element wilt selecteren, dan ziet de selector er als volgt uit:

body :first-child { /* eigenschappen */ }

:link

:visited

Deze twee pseudo-klassen zijn bedoeld om een bepaalde status van een link (A element) op te maken. Met :link kan de normale link worden opgemaakt terwijl met :visited alle links waar de gebruiker al een keer is geweest opgemaakt kan worden.

:hover

:active

:focus

Dit zijn de dynamische pseudo-klassen en worden gebruikt als de bezoeker een bepaalde actie op het element uitvoert. :hover zagen we bij de introductie van pseudo-klassen al en wordt dus gebruikt als de gebruiker met zijn/haar muis over een element gaat. :active wordt gebruikt als de gebruiker het element activeert door bijvoorbeeld erop te klikken. Als de gebruiker dan zijn/haar muis loslaat houdt de :active actie op en krijgt het element (zoals een link) "focus". Als een link focus heeft, dan heeft de link in de meeste browsers een gestippeld grijs randje zoals op deze afbeelding: . Hoe een element met focus eruit ziet kan worden aangegeven d.m.v. de :focus pseudo-klasse. In Internet Explorer kunnen deze pseudo-klassen echter alleen op links gebruikt worden.

:lang(taalcode)

Als laatste hebben we nog de :lang() psuedo-klasse. Hiermee selecteer je elementen met een bepaalde taal. Dus als je alle elementen waarvan de taal Engels is wilt selecteren in een pagina waarvan de hoofdtaal Nederlands is, dan kan hiervoor :lang(en) als selector worden gebruikt.

Pseudo-elementen

Als laatste hebben we dan nog de psuedo-elementen. Met pseudo-elementen "maak" je als het ware nieuwe elementen die je kan opmaken. In deze lijst staan de drie verschillende pseudo-elementen met hun omschrijving:

:first-line

Met dit psuedo-element kan je de eerste regel van een tekst apart opmaken. We hebben het dus niet over de eerste zin, maar over de eerste regel, zoals op deze afbeelding te zien is:

:first-letter

Ongeveer hetzelfde als :first-line, maar met :first-letter kan de eerste letter van een bepaald element anders worden opgemaakt dan de rest van het element.

:before

:after

Met deze twee psuedo-elementen kunnen, samen met het content eigenschap, kan extra extra tekst of afbeeldingen toegevoegd worden aan het begin (:before) of einde (:after) van het element.

Eigenschappen

Op de regel onder de selector zien we code color:red;. color is een CSS eigenschap. Alle eigenschappen horen tussen { en }. Het color eigenschap zegt dus iets over de kleur van de tekst in alle HTML elementen. red geeft dus aan dat de tekstkleur rood moet zijn. red is dus de waarde van het color eigenschap. Achter de waarde staat altijd het teken ;. Die geeft het einde van de waarde aan.

In de handleiding geven we vanaf nu alle eigenschappen de kleur roze, net zoals dat de elementen met een paarse kleur worden aangegeven en de attributen met een groene kleur.

Waarden

Zoals in de vorige paragraaf staat wordt elk eigenschap altijd vergezeld door een waarde. Zo'n waarde kan worden gecategoriseerd in één van de 7 categoriën:

1. getallen;
2. lengtes;
3. percentages;
4. URIs (URLs);
5. tellers;
6. kleuren;
7. en tekst.

Commentaar

Dan zien we achter het color eigenschap nog de code /* Rood */. Dit is hoe commentaar in CSS eruit hoort te zien.

Na dit hoofdstuk te hebben doorgewerkt is het de bedoeling dat je nu de syntax CSS begrijpt. CSS zal op dit moment nog een beetje erg simpel overkomen, maar in de volgende twee hoofdstukken gaan we kijken wat we zoal met CSS kunnen doen. We beginnen dus door te kijken naar de Basis van CSS »