In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!

body {background:url(achtergrond.jpg) bottom right repeat-x;}

Hierin geef je dus aan dat je in de BODY van je HTML code de achtergrond wilt gebruiken.

Daar waar nu 'achtergrond.jpg' staat, zet je de link neer naar de afbeelding die je wilt gebruiken.

BOTTOM RIGHT staat ervoor dat hij rechtsonderin begint. REPEAT-X staat ervoor dat hij zich van rechts naar links herhaalt.

p {color:red}

Erg simpel. Om dit in HTML op te roepen, hoef je alleen maar het P-element te gebruiken. Simpeler kan niet. Moeilijker wel, en ook die manier deel ik even mee omdat het soms van pas kan komen.

Als ik met bovenstaande code werk, gebruikt hij bij alle P-elementen in je code een rode tekstkleur. Soms zal je dit misschien willen opdelen. Onderstaande code is een voorbeeld:

p {color:red;}
p.group {color:blue;}
p#one {color:green;}
p#one {color:yellow;}

BELANGRIJK: Bij bovenstaande code moet je er aan denken: de laatste regel geldt.

Om dit alles op te roepen gebruik je onderstaande HTML code:

<p>Deze houdt enkel rekening met de bovenste regel, en heeft niks te maken met die drie regels daaronder. Deze regel wordt dus rood.</p>
<p class="group">Deze houdt rekening met de bovenste twee regels, en de onderste twee hebben er niks mee te maken. De onderste regel geldt, dus deze tekst wordt blauw.
<p class="group" id="one">Deze houdt rekening met alle regels. De onderste regel geldt, dus deze tekst wordt geel.

Het gaat er dus als volgt om: gebruik je een punt in je CSS, kun je dit in HTML oproepen met CLASS. Indien je in CSS een #-teken gebruikt, roep je dit in HTML op met ID.

img {border: 4px solid red;}

Wederom geen moeilijke code. Met IMG geef je aan dat het om het IMG-element in HTML gaat. In HTML hoef je dus niks speciaals te doen om naar deze regel te verwijzen. Vervolgens zie je in de declaratie het eigenschap BORDER staan, wat aangeeft dat het om een rand gaat. Als waarde zie je 4px solid red staan. Dit geeft dus aan dat je een 4 pixel dikke rode lijn krijg.

Ook kun je besluiten om een stippellijn te maken. Hier heb je de volgende code voor nodig:

img {border: 4px solid red; border-style:dotted;}

Dan zijn we nu klaar met les nummer 17. Je ziet dat CSS erg veel lijkt op HTML, vandaar dat je het snel onder de knie zult hebben. De teksten zijn in de meeste gevallen ongeveer hetzelfde. De tekens zijn alleen anders. Werk er genoeg mee, dan leer je het vanzelf. Volgende week gaan we gewoon vrolijk verder. Hopelijk tot dan!