Inleiding tot CSS
Inleiding tot CSS
Inleiding tot CSS is een gratis HTML for Kids-les op CoddyKit. Dit is les 1 van 1. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML for Kids. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML for Kids bevat in totaal 1 lessen.
Inleiding 1
Hoi,
In het vorige hoofdstuk hebben we geleerd wat CSS is en waarom we het moeten gebruiken. Nu wil ik een korte inleiding geven aan de hand van een eenvoudig voorbeeld.
Laten we een eenvoudige HTML-pagina definiëren.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Inline stijl
Stel dat we nu de kleur van onze koptekst Hello CSS rood willen maken. Hiervoor gebruiken we het style-attribuut, dat aan bijna elke HTML-tag kan worden toegevoegd.
Met dit attribuut kunnen we voor elk element inline een stijl definiëren.
In het voorbeeldgedeelte zien we dat de kleur van de koptekst rood wordt.
color: red;
We hebben de letterkleur van het element met een stijl-definitie aangepast.
<h1 style="color:red;">Hello CSS</h1>Inline stijl 2
Je herinnert je misschien dat we hebben gezegd dat we attributen gebruiken om gedrag en eigenschappen aan tags toe te wijzen in HTML.
Een van de belangrijkste toepassingen van het style-attribuut is dat we dit attribuut gebruiken om een stijl voor tags te definiëren.
Inline stijl 3
Laten we nu een nieuwe stijl toevoegen. Met font-size kunnen we de tekst groter maken.
Bij het definiëren van meerdere stijlen moeten we de stijlen met puntkomma's scheiden.
In het onderstaande voorbeeld worden de stijlen voor kleur en lettergrootte met puntkomma's gescheiden.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Stijl definiëren
De syntaxis is belangrijk bij het toevoegen van een stijl.
styleName: styleValue;
Laten we nogmaals onthouden dat we de stijl moeten toewijzen zoals hierboven.
Voorbeeld
Laten we ons voorbeeld nu wat verder uitbreiden.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Voorbeeld 2
In dit voorbeeld willen we de kleur van alle tekst rood maken. Voor elke tag kunnen we de stijl als volgt definiëren.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>CSS-selector
Maar zo ziet het er toch niet erg goed uit?
We hebben nu drie elementen op de pagina en hebben de tekstkleur van elk element rood gemaakt. Als we bedenken dat dit aantal is toegenomen tot 3000, heeft het weinig zin om voor elk element een stijl te definiëren.
In plaats daarvan moeten we CSS-selectors gebruiken in plaats van elk element inline te definiëren.
Inleiding 12
Laten we nu het concept selector leren.
CSS-selectors zijn verantwoordelijk voor het selecteren van het relevante HTML-element in het document waarop we stijlen willen toepassen.
Zoals we aan de naam kunnen zien, kiezen ze HTML-elementen. 😂
CSS-selectors moeten worden gedefinieerd tussen <style>-tags in het HTML-document of in een extern CSS-bestand.
In onze voorbeelden gebruiken we wat meestal tussen style-tags staat. Het is echter nauwkeuriger om de stijl in een extern CSS-bestand te definiëren.
Intro 13
De puntoperator en de klassenaam worden gebruikt om een klasse tussen stijltags te definiëren. Stijldefinities worden tussen accolades geplaatst.
.class-name {
font-size:22px;
color:red;
}
In het onderstaande voorbeeld hebben we tussen de stijltags een klasse met de naam my-component gedefinieerd. Aan de bijbehorende klasse is de stijl font-size toegewezen.
<style>
.my-component{
font-size:22px;
}
</style>
Laten we nu twee alinea-elementen definiëren
Laten we nu twee alinea-elementen definiëren met de klasse my-component.
Omdat beide alinea's na deze definitie dezelfde klassenaam hebben, worden ze door de CSS-selector geselecteerd en wordt hun font-size bijgewerkt naar 22px.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Inleiding 6
We kunnen meer dan één stijl aan een selector toewijzen.
In het onderstaande voorbeeld zijn zowel de stijl voor lettergrootte als die voor kleur in dezelfde selector gedefinieerd.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>CSS-selectors nesten
Laten we de onderstaande HTML-code analyseren.
Er is een element voor een alinea gedefinieerd en aan dit element is een span-element met de inhoud 'Hello CSS Selectors' toegevoegd.
In dit geval kunnen we zeggen dat het alinea-element de ouder van de span is.
De span is op haar beurt het kind van het p-element.
Net als bij levende wezens gebruiken we HTML-elementen in ouder-kindrelaties, afhankelijk van hun plaats in het codeblok.
<p>
<span>Hello CSS Selectors</span>
</p>CSS-selector nesten 2
Laten we ons voorbeeld verder uitbreiden en de hiërarchie tussen de elementen opnieuw analyseren.
- Volgens het onderstaande voorbeeld
- Het element <span> is een broer- of zusterelement van <a>.
- De elementen <span> en <a> zijn afstammelingen van het div-element.
- <span> en <a> zijn kinderen van het element <p>.
- Het element <p> is een kind van het element <div>.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>Analyse van het boommodel
Laten we de bovenstaande afbeelding nader bekijken.
Het volgende voorbeeld van HTML-code is omgezet in een boommodel.
Houd er rekening mee dat het boommodel eigenlijk een weerspiegeling is van de ouder-kindhiërarchie.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Wanneer gebruiken we deze hiërarchische relatie
Wanneer gebruiken we deze hiërarchische relatie?
Laten we eerst een voorbeeld bekijken en een probleem formuleren. Daarna bekijken we hoe we met deze hiërarchie oplossingen kunnen bieden.
Laten we naar het onderstaande codevoorbeeld kijken.
Stel dat we alle tekst rood willen maken. Tot nu toe hebben we hiervoor twee verschillende mogelijkheden geleerd.
- Als eerste en slechtste mogelijkheid definiëren we het style-attribuut (style = "color: red") inline voor elk element.
- Als tweede mogelijkheid definiëren we een klasse met de naam red-txt en wijzen we die als attribuut toe aan elk element (class = "red-txt").
Maar er is een eenvoudigere manier om dit te doen. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Wanneer gebruiken we deze hiërarchische relatie? 2
Laten we de bovenstaande code nog eens bekijken.
Als we letten op het div-element met de klasse root, zien we dat dit in feite de voorouder is van alle elementen in ons voorbeeld.
Genetische eigenschappen bij mensen worden van voorouders doorgegeven aan afstammelingen. De stijl die in CSS aan een voorouder is toegewezen, wordt ook op de afstammelingen toegepast.
In dit geval kunnen we verwachten dat al zijn afstammelingen door deze toewijzing worden beïnvloed wanneer we een stijldefinitie maken die het betreffende div-element selecteert.
Laten we dit doen.
Wanneer gebruiken we deze hiërarchische relatie? 3
Laten we met behulp van een puntoperator een klasse met de naam root definiëren en daarin een stijldefinitie maken (met color: red).
Alle elementen met de klasse root worden geselecteerd. De tekstkleur van deze elementen en hun afstammelingen wordt rood.
In het gedeelte Voorbeeld zien we dat alle teksten rood worden.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Overerving
In CSS noemen we dit concept Inheritance. We hebben geleerd hoe we met deze functie kortere code kunnen schrijven.
Net als in het vorige voorbeeld hebben we, in plaats van dezelfde eigenschap voor elk element afzonderlijk te definiëren, deze eigenschap aan het voorouderelement toegewezen en herhaling van code voorkomen.
Plaatsing van het head-element
In de vorige voorbeelden voegden we het style-element direct naast het HTML-element dat we hadden geschreven toe.
De juiste plaats waar de style-tag moet worden ingevoegd, is echter tussen de head-tags.
Het gebruik ziet er dan als volgt uit.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>onze code zo kort en herbruikbaar mogelijk schrijven
Tijdens het programmeren moeten we onze code zo kort mogelijk en herbruikbaar schrijven.
Gefeliciteerd
Gefeliciteerd 🎉
In dit gedeelte hebben we samen de concepten Selector en Inheritance geleerd.
In het volgende gedeelte leren we de typen stijldefinities in CSS.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 16
- Lessen
- 35
Veelgestelde vragen
Is de les “Inleiding tot CSS” gratis?
Ja — de volledige tekst van “Inleiding tot CSS” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus HTML for Kids wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus HTML for Kids bevat in totaal 1 lessen.
Wat leer ik in “Inleiding tot CSS”?
Inleiding tot CSS Je oefent met HTML for Kids door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML for Kids te beginnen?
Ervaring vooraf is niet nodig. HTML for Kids op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 1.
Hoe lang duurt de les “Inleiding tot CSS”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML for Kids?
Ja. Elke les over HTML for Kids bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.