Dit is een samenvatting van de hoofdstukken 10 tot en met 16 over het CSS gedeelte van het boek HTML & CSS van Jon Duckett. Ik heb hier zelf een 9,4 mee gehaald.
TEST BANK for HTML and CSS: Design and Build Websites by Duckett Jon. All 17 Chapters
All for this textbook (3)
Written for
Haagse Hogeschool (HHS)
Communicatie Multimedia Design
Web Technologies
All documents for this subject (3)
5
reviews
By: jordyletteboer • 3 year ago
By: timendion3 • 6 year ago
By: nlibiee • 7 year ago
By: demivens • 7 year ago
By: kimberleyrol • 7 year ago
Seller
Follow
gingerbaegen
Reviews received
Content preview
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; }
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller gingerbaegen. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $5.98. You're not tied to anything after your purchase.
