CSS - Phoenix 1 Wat is CSS? In deze les leer je wat CSS is, waarom het belangrijk is, en hoe je het gebruikt om de opmaak van een webpagina aan te passen. Je gaat zelf aan de slag met eenvoudige kleuren en lettertypes. 🎯 Leerdoelen Je weet wat CSS doet en waarom we het gebruiken Je kunt een eenvoudige opmaakregel toevoegen via de HTML-tag (inline) Je kunt kleuren en lettertypes toepassen met CSS πŸ’‘ Wat is CSS? CSS staat voor Cascading Style Sheets Met CSS bepaal je hoe HTML eruitziet: kleuren, lettertypes, ruimte, achtergrond, enzovoort Zonder CSS is een website saai: zwart-wit, standaardletters, geen stijl πŸ”§ Hoe voeg je CSS toe? Je kunt CSS op drie manieren gebruiken: Inline – direct in het HTML-element (in deze les) In een In dit voorbeeld zijn body, h1 en p de element -selectors en die verwijzen naar de HTML- elementen . πŸ› οΈ Opdracht – Stijl je pagina met het

Over mij

Ik ben een student die leert over HTML en CSS.

Ik vind het leuk om websites te maken.

Voeg in het

Mijn favoriete onderwerp

Dit is een stukje tekst over iets wat ik leuk vind.

Bijvoorbeeld een sport, hobby, film of spel.

Of een vak op College Amstelland dat je heel leuk vind :)

Geef je body een leuke background-color Geef je h1 een opvallende kleur, een ander lettertype en text-align: center Gebruik hiervoor de class metΒ  class-selector .header Geef de p -teksten elk een andere kleur en uitlijning en gebruik hiervoor classes met class-selectors . Geef elke

hiervoor een aparte class. Experimenteer met verschillende kleuren en lettertypes zoals: Arial , Georgia , Courier New , Comic Sans MS πŸ“€ Inleveren Maak een screenshot van jouw kleurrijke poster waarin de CSS code ook duidelijk te lezen is. 4 Box-model: randen, padding en margins In deze les leer je hoe je ruimte kunt maken rondom en binnenin een element met CSS. Je leert ook hoe je randen toevoegt en de afstand tussen blokken regelt. 🎯 Leerdoelen Je begrijpt het verschil tussen margin , padding en border Je kunt ruimte tussen tekstblokken instellen met CSS Je kunt randen toevoegen aan blokken om ze beter zichtbaar te maken πŸ’‘ Wat is het box-model? Elk HTML-element is als een β€˜doos’ opgebouwd uit vier lagen: Content: de tekst of afbeelding binnenin Padding: ruimte tussen de content en de rand Border: de rand om het element heen Margin: de ruimte tussen dit element en andere elementen Voorbeeld: .blok { margin: 15px; border: 2px solid black; padding: 20px; background-color: lightblue; } πŸ› οΈ Opdracht – Drie gekleurde tekstblokken Maak een nieuw HTML-bestand in Phoenix Code, noem het boxmodel.html Plak onderstaande code in je bestand: Box model test

Blok 1

Dit is het eerste tekstblok met padding en marge.

Blok 2

Ook dit blok heeft een rand en achtergrondkleur.

Blok 3

Pas de kleuren en afstanden aan zoals jij het mooi vindt.

Pas de CSS aan zodat: Ieder blok een andere background-color heeft De margin tussen de blokken groter of kleiner is (proberen met 10px , 30px , enz.) De padding meer of minder ruimte geeft binnen het blok Test verschillende border -instellingen, zoals dashed , double of 4px solid red 🧠 Reflectie Wat is het verschil tussen margin en padding ? Waarom is het handig om borders tijdelijk toe te voegen tijdens het bouwen? Wat gebeurt er als je padding op 0 zet? πŸ“€ Inleveren Geef antwoord op de drie reflectievragen in eigen woorden en lever dat in, in een txt- of PDF bestand. Voeg een schermafdruk van jouw boxen toe aan de PDF. 5 Classes gebruiken in CSS In deze les leer je hoe je een class gebruikt om meerdere elementen dezelfde opmaak te geven. Zo kun je stijlen hergebruiken zonder telkens dezelfde regels te schrijven. 🎯 Leerdoelen Je weet wat een class is en hoe je die toepast in HTML Je kunt CSS-stijlen koppelen aan een class Je kunt verschillende klassen maken en gebruiken op één pagina πŸ’‘ Wat is een class? Een class is een naam die je aan een element geeft zodat je het in CSS kunt opmaken Je zet in HTML:
In CSS gebruik je een punt (.) om een class aan te roepen: .menu { ... } Je kunt dezelfde class meerdere keren gebruiken. Een HTML element kan ook meerdere classes bevatten:
De stylen met de class-selector menu Γ©n speciaal zijn beiden van teopassing op dit element. Voorbeeld:
Pizza Margherita
Spaghetti Bolognese
.menu { background-color: lightyellow; padding: 10px; border: 1px solid gray; margin-bottom: 10px; } .speciaal { color: red; } πŸ› οΈ Opdracht – Bouw een gestyleerde menukaart Maak een nieuw HTML-bestand in Phoenix Code, noem het menukaart.html Plak onderstaande code als startpunt: Menukaart

Restaurant De Codepan

Pizza Margherita
Truffelpasta met parmezaan
Ravioli met spinazie en ricotta
Chef’s surprise
Pas zelf de kleuren, marges of lettertypes aan zoals jij het mooier vindt Voeg minstens twee eigen gerechten toe aan de lijst Geef twee menu-items de class speciaal en zorg ervoor dat deze speciale gerechten duidelijk opvallen door hun stijl aan te passen. 🧠 Reflectie Waarom is het handig om stijlen te herhalen met een class? Wat gebeurt er als je meerdere klassen aan één element geeft? Kun je bedenken wanneer je liever een class gebruikt dan een tag-selector (zoals p )? πŸ“€ Inleveren Maak een screenshot van jouw gestyleerde menukaart in de browser. 6 Layout en positionering In deze les leer je hoe je met behulp van blokken en eenvoudige CSS een duidelijke indeling (layout) maakt. Denk aan een header bovenaan, een middenstuk (main) en een footer onderaan. 🎯 Leerdoelen Je weet hoe je de layout van een pagina opbouwt met blokken (divs) Je kunt tekst en blokken centreren met text-align en margin Je kunt blokken op een vaste breedte zetten πŸ’‘ Wat is een layout? Een layout is de structuur van je pagina – hoe dingen verdeeld zijn over het scherm Voor layout gebruiken we vaak het HTML-element
Een div is een onopvallend blok dat je zelf kunt opmaken met CSS Belangrijke CSS-eigenschappen: text-align: center; – centreren van tekst margin: auto; – centreren van blokken width: – bepaalt hoe breed een blok is (bijv. 80% of 600px ) Voorbeeld: .blok { width: 80%; margin: 20px auto; padding: 20px; background-color: #f0f0f0; text-align: center; } πŸ› οΈ Opdracht – Bouw een eenvoudige homepage-layout Maak een nieuw HTML-bestand in Phoenix Code, noem het layout.html Plak onderstaande basiscode in het bestand: Mijn layout

Welkom op mijn site

Hier komt de inhoud van je website.

Gemaakt door [jouw naam] - 2025

Pas de kleuren aan zodat het bij jouw stijl past Voeg een afbeelding toe in de main-blok en plaats jouw naam onderaan in de footer. Geef de blokken afgeronde hoeken ( border-radius ) van bijvoorbeeld 15px 🧠 Reflectie Wat gebeurt er als je de width verandert naar 60% of 400px ? Hoe werkt margin: auto precies? Wat zou je toevoegen als je een echte website maakt? πŸ“€ Inleveren Maak een screenshot van jouw homepage met drie blokken die door jouw zijn vormgegeven. 7 CSS-selectors: element, class en id In deze les leer je wat een id -selector is en wanneer je die gebruikt. Je herhaalt ook wat een element -selector en een class -selector doet. Daarna pas je deze drie selectors toe in één pagina. 🎯 Leerdoelen Je herkent het verschil tussen element-, class- en id-selectors Je weet wanneer je een id gebruikt in plaats van een class Je kunt deze drie selectors toepassen in één pagina πŸ’‘ Wat zijn selectors in CSS? Een selector in CSS bepaalt op welk HTML-element de stijlregel toegepast wordt. Selector Voorbeeld Toepassing Element p { color: blue; } Geldt voor alle paragrafen Class .belangrijk { color: red; } Geldt voor meerdere elementen met class="belangrijk" ID #titel { font-size: 30px; } Geldt voor één uniek element met id="titel" Belangrijk verschil: class gebruik je voor meerdere elementen id gebruik je maar één keer op een pagina – het is uniek πŸ› οΈ Opdracht – Gebruik drie soorten selectors Maak een nieuw HTML-bestand in Phoenix Code, noem het selectors.html Plak deze code als basis: CSS Selectors

Welkom op mijn pagina

Dit is een normale paragraaf.

Dit is een speciale paragraaf.

Nog een gewone paragraaf.

Pas de stijlen aan zoals jij het mooi vindt: Geef de #titel een andere kleur en een ander lettertype Geef de class .special een rand of andere achtergrond Voeg zelf nog een extra class toe voor een andere stijl (bijv. .opvallend ) 🧠 Reflectie Wanneer gebruik je een class en wanneer een id ? Wanneer gebuik je een element-selector, bijvoorbeeld body of h1 ? Wat gebeurt er als je per ongeluk twee keer hetzelfde id gebruikt? πŸ“€ Inleveren De refectievragen en jouw eigen antwoorden (eigen woorden) in een txt- of PDF bestand. 8 Flexbox: moderne layouttechniek In deze les leer je werken met flexbox . Dit is een moderne techniek waarmee je blokken makkelijk naast of onder elkaar zet, zonder ingewikkelde marges of floats. 🎯 Leerdoelen Je weet wat display: flex doet Je kunt blokken naast elkaar zetten Je weet wat resonsive design is. Je kunt blokken centreren en de ruimte verdelen met justify-content en align-items πŸ’‘ Wat is flexbox? Met flexbox kun je elementen binnen een container netjes ordenen, zowel horizontaal als verticaal. display: flex zet de container om in een flex-container justify-content bepaalt de horizontale uitlijning (zoals center , space-between ) align-items bepaalt de verticale uitlijning (zoals center , flex-start ) Met felxboxes maak je een responsive design : dit betekent dat je web pagina op verschillende aparaten goed wordt getoond en dat de boxes worden aangepast als de breedte van het scherm wordt aangepast. Voorbeeld CSS: .container { display: flex; justify-content: space-between; align-items: center; } .blok { width: 150px; height: 150px; background-color: lightblue; text-align: center; padding: 20px; border-radius: 10px; } Een complete uitleg over alle mogelijkheden vind je hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ πŸ› οΈ Opdracht – Maak een blokkenrij met Flexbox Maak een nieuw bestand in Phoenix Code: flex.html Gebruik deze HTML als basis: Flexbox oefening

Mijn Flexbox layout

Blok 1
Blok 2
Blok 3
Experimenteer met andere waarden voor justify-content zoals center , space-around of flex-end Voeg eventueel nog een vierde blok toe Pas de kleuren en tekst aan zodat het jouw stijl heeft Opdracht Maak het volgende ontwerp zo goed mogelijk na en gebruik daarbij Flexboxen zoals je dat net hebt geleerd.: De drie blokken staan op het midden van de webpagina en je design is responisve . πŸ“€ Inleveren Maak een screenshot van je resultaat. Indien je AI hebt gebruikt, stuur dan de AI-Chat log mee en zorg ervoor dat je alleen zaken gebruikt die we hebben behandeld en die je kan uitleggen. Je kan worden gevraagd om jouw ontwerp te komen toe lichten / uitleggen. --