Hoofdstuk 10 - Introducing CSS
Het CSS file wordt vaak external gebruikt. Om dit te doen gebruik je het <link> element in het
HTML document. Dit is een empty element en bevind zich in het <head> element. Naast deze link
komt ook het href attribuut, die specificeert waar de CSS file zich bevind. Ook is er een type
attribuut, die specificeert naar wat voor type bestand wordt gelinkt, de value is hier text/css. Als
laatste komt er het rel attribuut, dit specificeert de relatie van de HTML pagina met het
bestandsfile waarnaar gelikt wordt, dit moet stylesheet zijn. Dit wordt dan dus <link
href=“css/styles.css” type=“text/css” rel=“stylesheet” />. Ook kan een HTML document meerdere
CSS bestanden hebben. Er zijn dan meerdere link elementen. Deze manier is handig omdat de
site sneller laad omdat de code voor meerdere pagina's geld. Als je de H1 wilt veranderen hoef je
maar 1x de code te veranderen.
Je kan ook CSS in je HTML bestand gebruiken, door ze in een <style> element te zetten die
meestal in de head staat. Ook wordt hier het type attribuut gebruikt om aan te geven dat het op
CSS gaat, de value is ook hier text/css.
Als je site meerdere pagina’s heeft wordt er wel vaak een external CSS gebruikt, dit zorgt dat al je
pagina’s dezelfde regels volgen, houd de inhoud en vormgeving apart en je kan door 1 ding te
veranderen al je pagina’s veranderen.
Universal selector, geldt voor alle elementen in het document = * en { }
Type selector, match met de element namen = h1, h2, h3 { }
Class selector, match met een element wie zijn class attribute een value heeft die match met de
naam achter de punt = .note { } selecteer alles wat als value note heeft.
ID selector, match met een element wie zijn id attributen dezelfde value heeft als achter de
haastig = #introduction { } selecteert alles wat de id attributen introduction heeft.
Child selector, match met een element dat een directe child is = li>a { } targets alle <a>
elementen die kind zijn van een <li> element maar geen gewone <a> elementen.
Descendant selector, match met een element dat afstamt van een ander gespecificeerd element
= p a { } targets alle <a> elementen die in een <p> element zitten lokaal zitten er andere elementen
tussen.
Adjacent sibling selector, match een element dat een sibling is = h1+p { } targets de eerste p
element na alle h1 elementen maar geen andere p elementen.
General sibling selector, match een element die een sibling is ondanks dat het geen direct
element is = h1~p { } als je twee <p> elementen hebt dat siblings van het h1 element zijn, geld het
voor beide.
Als er twee of meer regels over het zelfde element gaan is het belangrijk over welk dan gelden. Als
er twee selectors identiek zijn zal de laatste voorgaan. Bijv bij 1 { color: green; } en daarna 1
{color: red; } wordt hij dus rood. Ook als er 1 selecteer specifieker is dan de andere zal de meest
specifieke voorgaan. H1 is specifieker dan *, en p#intro ook meer dan p. Je kan achter een
value !important zetten om aan te geven dat deze regel belangrijker is. p {color: blue !important;}
Als je de font-family in het body element specificeert zullen de child element dit overnemen, deze
word ge inherited. Background-color wordt bijvoorbeeld weer niet overgenomen door de child
elements. Je kan er ook voor zorgen dat dit geforceerd wordt door de inherit value te gebruiken.
Bijv. body { font-family: Arial; padding: 10px;} .page { border: 1px solid; padding: inherit; }
Hoofdstuk 11 - Kleur
De kleur property zorgt ervoor dat je kleur in tekst kan veranderen (foreground color). Dit kan je
op drie manieren doen. RGB values, bijvoorbeeld (100,100,90). Hex codes, bijv #ee3e80. En
color names bijvoorbeeld DarkCyan. h2 { color: DarkCyan; }
Het CSS file wordt vaak external gebruikt. Om dit te doen gebruik je het <link> element in het
HTML document. Dit is een empty element en bevind zich in het <head> element. Naast deze link
komt ook het href attribuut, die specificeert waar de CSS file zich bevind. Ook is er een type
attribuut, die specificeert naar wat voor type bestand wordt gelinkt, de value is hier text/css. Als
laatste komt er het rel attribuut, dit specificeert de relatie van de HTML pagina met het
bestandsfile waarnaar gelikt wordt, dit moet stylesheet zijn. Dit wordt dan dus <link
href=“css/styles.css” type=“text/css” rel=“stylesheet” />. Ook kan een HTML document meerdere
CSS bestanden hebben. Er zijn dan meerdere link elementen. Deze manier is handig omdat de
site sneller laad omdat de code voor meerdere pagina's geld. Als je de H1 wilt veranderen hoef je
maar 1x de code te veranderen.
Je kan ook CSS in je HTML bestand gebruiken, door ze in een <style> element te zetten die
meestal in de head staat. Ook wordt hier het type attribuut gebruikt om aan te geven dat het op
CSS gaat, de value is ook hier text/css.
Als je site meerdere pagina’s heeft wordt er wel vaak een external CSS gebruikt, dit zorgt dat al je
pagina’s dezelfde regels volgen, houd de inhoud en vormgeving apart en je kan door 1 ding te
veranderen al je pagina’s veranderen.
Universal selector, geldt voor alle elementen in het document = * en { }
Type selector, match met de element namen = h1, h2, h3 { }
Class selector, match met een element wie zijn class attribute een value heeft die match met de
naam achter de punt = .note { } selecteer alles wat als value note heeft.
ID selector, match met een element wie zijn id attributen dezelfde value heeft als achter de
haastig = #introduction { } selecteert alles wat de id attributen introduction heeft.
Child selector, match met een element dat een directe child is = li>a { } targets alle <a>
elementen die kind zijn van een <li> element maar geen gewone <a> elementen.
Descendant selector, match met een element dat afstamt van een ander gespecificeerd element
= p a { } targets alle <a> elementen die in een <p> element zitten lokaal zitten er andere elementen
tussen.
Adjacent sibling selector, match een element dat een sibling is = h1+p { } targets de eerste p
element na alle h1 elementen maar geen andere p elementen.
General sibling selector, match een element die een sibling is ondanks dat het geen direct
element is = h1~p { } als je twee <p> elementen hebt dat siblings van het h1 element zijn, geld het
voor beide.
Als er twee of meer regels over het zelfde element gaan is het belangrijk over welk dan gelden. Als
er twee selectors identiek zijn zal de laatste voorgaan. Bijv bij 1 { color: green; } en daarna 1
{color: red; } wordt hij dus rood. Ook als er 1 selecteer specifieker is dan de andere zal de meest
specifieke voorgaan. H1 is specifieker dan *, en p#intro ook meer dan p. Je kan achter een
value !important zetten om aan te geven dat deze regel belangrijker is. p {color: blue !important;}
Als je de font-family in het body element specificeert zullen de child element dit overnemen, deze
word ge inherited. Background-color wordt bijvoorbeeld weer niet overgenomen door de child
elements. Je kan er ook voor zorgen dat dit geforceerd wordt door de inherit value te gebruiken.
Bijv. body { font-family: Arial; padding: 10px;} .page { border: 1px solid; padding: inherit; }
Hoofdstuk 11 - Kleur
De kleur property zorgt ervoor dat je kleur in tekst kan veranderen (foreground color). Dit kan je
op drie manieren doen. RGB values, bijvoorbeeld (100,100,90). Hex codes, bijv #ee3e80. En
color names bijvoorbeeld DarkCyan. h2 { color: DarkCyan; }
