Editie 173 - HTML-cursus
Deze rubriek is geschreven door Kloep!
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!
Welkom bij les nummer 16. We gaan nu eindelijk echt beginnen met CSS. Hierin zal je nog vele zaken van HTML terugvinden. Mocht je iets niet snappen, kun je altijd Kloep een PB sturen met je vraag. Ook kun je natuurlijk altijd terugkijken in vorige edities van de HTML-cursus.
CSS in contact brengen met HTML
<head> <link href="style.css" rel="stylesheet" type="text/css"> </head>
Onder HREF zet je de link naar je document toe. Dit kan zowel een interne als een externe link zijn. In het voorbeeld gebruikte ik een interne link.
CSS regel
In een CSS document kom je andere dingen tegen als in HTML, maar je zult ook een aantal kunnen herkennen. Wat je in je CSS zet, zie je niet direct terug op je webpagina. Het CSS document bestaat uit verschillende regels. Elke regel bestaat uit onderstaande onderdelen:
-
Selector
-
Declaratie
-
Eigenschap
-
Waarde
- Puntkomma
Een selector is het eerste gedeelte. Dit onderdeel gebruik je later ook in je HTML code.
Een declaratie bestaat uit een eigenschap en een waarde.
Een eigenschap kun je in HTML vergelijken met een attribuut.
Een waarde kun je in HTML vergelijken met een waarde (klinkt logisch).
Een puntkomma gebruik je ook in elke regel, dit om het goed af te sluiten.
Hieronder zie je een voorbeeld van een geldige regel in CSS:
h1 {color: red;}
Hierin is H1 je selector, je eigenschap is COLOR, je waarde is RED, je declaratie is {color:red}.
Je kunt meerdere declaraties in één regel zetten. Dit doe je dan zo:
h1 {color: red; background: blue;}
Denk er dan dus aan dat je het eerste gedeelte in je declaratie wel afsluit met een puntkomma.
Commentaar toevoegen
Ook is het mogelijk om commentaar aan je regels toe te voegen. Deze zet je tussen /*, zodat het door je browser wordt overgeslagen. Hieronder zie je een voorbeeld:
/* Hier wordt alle tekst die je met H1 aangeeft, rood gemaakt en krijgt een blauwe achtergrond /*
h1 {color: red; background: blue;}
Wanneer kun je dit gebruiken? Dit is handig als je de code aan iemand anders geeft. Mocht deze het niet helemaal snappen, kan hij door middel van commentaar toch de code proberen te begrijpen.
En dat was les nummer 16. Volgende keer komt les 17, waarin we verdergaan met CSS. Hopelijk tot de volgende keer!
0 reacties
Recommended Comments
Er zijn geen reacties om weer te geven.