Hoe maak je een CSS Stylesheet?
Cascading Style Sheets (CSS) zorgen voor een uniforme opmaak van je webpagina’s. Hierbij kan je denken aan de achtergrondkleur, het lettertype of de lettergrootte. Ook wel de lay-out van je website genoemd die heel consistent is. Bezoekers van je website vinden dat fijn! Omdat je op een centrale plek alle opmaak elementen bijhoudt hoef je het ook maar op een punt te wijzigen. Dat levert een tijdsbesparing op en minder kans op fouten. Maar hoe maak je een CSS Stylesheet? Volg dan onderstaande stappen als eerste oefening.
Stappenplan
Nr. | Stappen | Omschrijving actie |
1. | Maak een nieuw CSS-bestand | Maak een nieuw tekstbestand met de extensie “.css” (bijvoorbeeld “styles.css”) in een teksteditor of een CSS-code-editor. |
2. | Verbind het CSS-bestand met je HTML-pagina: | Plaats een link-element in de head-sectie van je HTML-bestand om het CSS-bestand te koppelen.
Zorg ervoor dat je het juiste pad naar je CSS-bestand opgeeft in het href-attribuut. Het link-element moet er als volgt uitzien. |
<link rel=”stylesheet” type=”text/css” href=”pad/naar/styles.css”> | ||
3. | Selecteer HTML-elementen | Gebruik CSS-selectoren om de HTML-elementen te targeten die je wilt stylen. Dit kunnen klassen, id’s of element selectoren zijn. |
.titel {
/* CSS-regels voor elementen met de class ’titel’ */ } #hoofdmenu { /* CSS-regels voor het element met het id ‘hoofdmenu’ */ } h1 { /* CSS-regels voor alle h1-elementen */ } |
||
4. | Pas stijlregels en eigenschappen toe | Binnen de geselecteerde CSS-regels, voeg je de gewenste stijlregels en eigenschappen toe om de opmaak te definiëren. Bijvoorbeeld. |
.titel {
color: #333; font-size: 24px; text-align: center; } #hoofdmenu { background-color: #f2f2f2; padding: 10px; } h1 { font-size: 36px; margin-bottom: 20px; } |
||
5. | Sla het CSS-bestand op | Bewaar het CSS-bestand nadat je de gewenste stijlen hebt toegevoegd. |
6. | Bekijk het resultaat | Open je HTML-pagina in een webbrowser en controleer of de opmaak wordt toegepast zoals verwacht. |
Herhaal stappen 3 tot 6 om meer stijlen aan je CSS-bestand toe te voegen en pas indien nodig je HTML-markup aan om de juiste elementen te targeten.
Training
Hoe maak je een CSS Stylesheet is de titel van deze blog. Is het jou duidelijk geworden? Heb je interesse om meer te leren over CSS? Je zou er dan voor kunnen kiezen om de CSS Training bij IPro Training NL te gaan volgen. Je kan mailen naar Marcel G. Buijs op mgbuijs@iprotraining.nl of bellen naar 070 – 22 109 20 om af te stemmen. We werken in kleine groepjes van maximaal 4 deelnemers.