Introductie tot CSS voor het Stylen van Webpagina's
CSS (Cascading Style Sheets) bepaalt het visuele uiterlijk van webpagina's. Waar HTML de structuur verzorgt, regelt CSS kleuren, lettertypen, afstand en lay-out—vergelijkbaar met hoe inrichting en interieurontwerp het uiterlijk van een huis bepalen.
CSS toevoegen om HTML te stijlen
CSS kan op drie hoofdmanieren worden toegepast.
Inline stijlen
Gebruik het attribuut style om snel een enkel element te stijlen.
index.html
Interne stijlen
Voeg een <style>-blok toe binnen de <head> om elementen op dezelfde pagina te stijlen.
index.html
Externe stylesheets
Voor grotere projecten bewaar je je CSS in een apart bestand en koppel je dit aan je HTML.
Bekijk de bestanden index.html en index.css in het voorbeeld.
index.html
index.css
CSS-selectors
Selectors bepalen welke elementen specifieke stijlen ontvangen.
Elementselector
Richt zich op alle elementen van een specifiek type.
p {
/* styles */
}
Klasseselector
Richt zich op elementen met een specifiek class-attribuut.
.highlight {
/* styles */
}
ID-selector
Richt zich op een specifiek element met een unieke ID-attribuut.
#header {
/* styles */
}
CSS-eigenschappen
CSS-eigenschappen bepalen hoe de geselecteerde elementen worden opgemaakt. Hier zijn enkele veelvoorkomende CSS-eigenschappen:
colorstelt de tekstkleur in;background-colorstelt de achtergrondkleur van een element in;font-sizestelt de tekstgrootte in;marginvoegt ruimte toe rondom een element.
We kunnen het uiterlijk van de webpagina aanpassen door CSS-stijlen toe te passen op de HTML-elementen om visueel aantrekkelijke en gebruiksvriendelijke ervaringen te creëren.
Voorbeeld:
index.html
index.css
Videotutorial
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Geweldig!
Completion tarief verbeterd naar 5Introductie tot CSS voor het Stylen van Webpagina's
Veeg om het menu te tonen
CSS (Cascading Style Sheets) bepaalt het visuele uiterlijk van webpagina's. Waar HTML de structuur verzorgt, regelt CSS kleuren, lettertypen, afstand en lay-out—vergelijkbaar met hoe inrichting en interieurontwerp het uiterlijk van een huis bepalen.
CSS toevoegen om HTML te stijlen
CSS kan op drie hoofdmanieren worden toegepast.
Inline stijlen
Gebruik het attribuut style om snel een enkel element te stijlen.
index.html
Interne stijlen
Voeg een <style>-blok toe binnen de <head> om elementen op dezelfde pagina te stijlen.
index.html
Externe stylesheets
Voor grotere projecten bewaar je je CSS in een apart bestand en koppel je dit aan je HTML.
Bekijk de bestanden index.html en index.css in het voorbeeld.
index.html
index.css
CSS-selectors
Selectors bepalen welke elementen specifieke stijlen ontvangen.
Elementselector
Richt zich op alle elementen van een specifiek type.
p {
/* styles */
}
Klasseselector
Richt zich op elementen met een specifiek class-attribuut.
.highlight {
/* styles */
}
ID-selector
Richt zich op een specifiek element met een unieke ID-attribuut.
#header {
/* styles */
}
CSS-eigenschappen
CSS-eigenschappen bepalen hoe de geselecteerde elementen worden opgemaakt. Hier zijn enkele veelvoorkomende CSS-eigenschappen:
colorstelt de tekstkleur in;background-colorstelt de achtergrondkleur van een element in;font-sizestelt de tekstgrootte in;marginvoegt ruimte toe rondom een element.
We kunnen het uiterlijk van de webpagina aanpassen door CSS-stijlen toe te passen op de HTML-elementen om visueel aantrekkelijke en gebruiksvriendelijke ervaringen te creëren.
Voorbeeld:
index.html
index.css
Videotutorial
Bedankt voor je feedback!
