Tutorial: Hoe gebruik je CSS styles in html
(geschreven door Elvin Heksenkaas)
Als je je eigen website gaat maken, dan is html erg belangrijk. En als je html gaat gebruiken, dan is CSS erg belangrijk. Maar wat is CSS, wat doet het en hoe werkt het. In deze tutorial leg ik uit wat het is, wat het doet, en hoe je het toevoegt aan html. Er zullen voorbeelden bij staan zodat je ook echt weet hoe het eruit ziet en zelf kan proberen.
CSS is natuurlijk een afkorting, het staat voor Cascading Style Sheet, ook wel gewoon style genoemd. CSS is hoe je elementen verandert in een html bestand. Je kan er ongeveer alles mee veranderen, van de achtergrond tot zowel de randen van je tekst. Maar hoe dat werkt is voor een andere tutorial.
Wanneer je een element verandert, dan veranderen ook de elementen die daarin (worden ook wel child-elements genoemd) zitten.
Weten wat CSS kan en doet is wel nuttig, als je ook echt weet hoe je CSS moet toevoegen. Er zijn drie manieren om CSS toe te voegen, ieder die je voor andere momenten gebruikt.
Als eerste is er inline CSS. Deze gebruik je voor als je 1 element wilt veranderen, maar hetzelfde. Om dit te doen zet je style=”” in het startgedeelte van het element en de veranderingen die je wilt toepassen.
Naast inline is ook internal CSS. Deze gebruik je als je een hele pagina wilt aanpassen. Deze is iets ingewikkelder maar nog steeds relatief simpel.
Als eerste zet je !DOCTYPE html bovenaan je html bestanden.
In je head element maakt je een style gedeelte aan door style /style te typen.
In je style gedeelte voeg je de naamelement toe van de elementen die je wilt veranderen en zet je de veranderingen daarbij in {}, zo worden de veranderingen toegepast aan elk element met dezelfde naam./P>
Als laatste is er ook external CSS, deze wordt gebruikt wanneer je elementen wilt veranderen over al je html paginas in je website. Deze is wel het meest ingewikkeldste om toe te voegen.
Als eerste zet je !DOCTYPE html bovenaan je html bestanden.
Optioneel, maar is wel overzichtelijker: Daarna maak je een .css bestand aan en zet je die in dezelfde folder als de rest van je html bestanden.
Je zet de veranderingen die je wilt hebben op ongeveer dezelfde manier als dat je bij internal CSS zou doen.
Als laatste moet je de .css bestand in je html bestand linken, er zijn meerdere manieren om dit te doen, maar je moet altijd een link aanmaken in je head.
Je kan de volledige URL gebruiken om het te linken:
Je kan deze gebruiken als de .css in dezelfde html folder zit (deze gebruik ik het vaakst):
Je kan dit gebruiken als de .css in dezelfde folder zit:
En nu weet je dus hoe je .css kan toepassen aan html.