# 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: 1. **Inline** – direct in het HTML-element (in deze les) 2. **In een <style>-blok** – in de `` (volgende les) 3. **In een extern .css-bestand** – voor grote projecten (komt later) #### Voorbeeld: CSS inline gebruiken ```html

Deze tekst is rood

Welkom

``` De `style="..."` zit in het HTML-element en verandert de stijl van dat element. ### πŸ› οΈ Opdracht – Pas kleur en stijl toe **Let op:** gebruik Phoenix Code om deze opdracht te maken. 1. Maak een nieuw HTML-bestand aan, noem het `css-les1.html` 2. Plak onderstaande code in het bestand: ```html Mijn eerste CSS

Welkom op mijn pagina

Ik ben een beginnende webdeveloper.

Ik leer nu hoe ik CSS kan gebruiken.

``` 3. Pas de HTML aan zodat: - De `

` een blauwe kleur krijgt en een ander lettertype (bijv. Arial) - De eerste `

` rood wordt en gecentreerd staat - De tweede `

` een andere kleur krijgt die jij mooi vindt 4. Bekijk je werk in Phoenix Code via **Run** ### πŸ“€ Inleveren 1. Maak een screenshot van jouw pagina met de aangepaste kleuren en lettertypes ## 2 CSS in het <style>-blok *In deze les leer je hoe je CSS los van HTML schrijft in het <style>-blok boven in het document. Je gebruikt selectoren zoals `body`, `h1` en `p` om elementen op te maken.* ### 🎯 Leerdoelen - Je begrijpt waarom het slim is om CSS apart te schrijven - Je kunt stijlen toevoegen in het <style>-blok - Je kunt opmaak toepassen op meerdere elementen tegelijk met selectors ### πŸ’‘ Wat is het <style>-blok? - Het ` ```

In dit voorbeeld zijn body, h1 en p de **element**-selectors en die verwijzen naar de HTML-**elementen**.

### πŸ› οΈ Opdracht – Stijl je pagina met het <style>-blok 1. Maak een nieuw HTML-bestand in Phoenix Code, noem het `css-les2.html` 2. Plak deze basistekst in het bestand: ```html Stijl oefenen

Over mij

Ik ben een student die leert over HTML en CSS.

Ik vind het leuk om websites te maken.

``` 3. 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 :)

``` 3. Geef je `body` een leuke `background-color` 4. Geef je `h1` een opvallende kleur, een ander lettertype en `text-align: center` 5. Geef de `p`-teksten elk een andere kleur en uitlijning en gebruik hiervoor **classes** met **class-selectors**. Geef elke <p> hiervoor een aparte class. 6. Experimenteer met verschillende kleuren en lettertypes zoals: `Arial`, `Georgia`, `Courier New`, `Comic Sans MS` ### πŸ“€ Inleveren 1. Maak een screenshot van jouw kleurrijke poster ## 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: ```css .blok { border: 2px solid black; padding: 20px; margin: 15px; background-color: lightblue; } ``` ### πŸ› οΈ Opdracht – Drie gekleurde tekstblokken 1. Maak een nieuw HTML-bestand in Phoenix Code, noem het `boxmodel.html` 2. Plak onderstaande code in je bestand: ```html 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.

``` 3. 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 4. 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 1. Geef antwoord op de drie reflecteivragen in eigen woorden en lever dat in, in een txt- of PDF bestand. ## 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 men Γ©n speciaal zijn beiden van teopassing op dit element. #### Voorbeeld: ```html
Pizza Margherita
Spaghetti Bolognese
``` ```css .gerecht { background-color: lightyellow; padding: 10px; border: 1px solid gray; margin-bottom: 10px; } ``` ### πŸ› οΈ Opdracht – Bouw een gestyleerde menukaart 1. Maak een nieuw HTML-bestand in Phoenix Code, noem het `menukaart.html` 2. Plak onderstaande code als startpunt: ```html Menukaart

Restaurant De Codepan

Pizza Margherita
Truffelpasta met parmezaan
Ravioli met spinazie en ricotta
Chef’s surprise
``` 3. Vul de CSS aan coor de class `special` 4. Pas zelf de kleuren, marges of lettertypes aan zoals jij het mooier vindt 5. Voeg minstens twee eigen gerechten toe aan de lijst 6. Gebruik bij minstens twee items de extra class `special` voor extra opmaak ### 🧠 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 1. 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: ```css .blok { width: 80%; margin: 20px auto; padding: 20px; background-color: #f0f0f0; text-align: center; } ``` ### πŸ› οΈ Opdracht – Bouw een eenvoudige homepage-layout 1. Maak een nieuw HTML-bestand in Phoenix Code, noem het `layout.html` 2. Plak onderstaande basiscode in het bestand: ```html Mijn layout

Welkom op mijn site

Hier komt de inhoud van je website.

Gemaakt door [jouw naam] - 2025

``` 3. Pas de kleuren aan zodat het bij jouw stijl past 4. Voeg een afbeelding toe in de main-blok 5. 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 1. Maak een screenshot van jouw homepage met drie duidelijk gestylede blokken ## 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.
SelectorVoorbeeldToepassing
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 1. Maak een nieuw HTML-bestand in Phoenix Code, noem het `selectors.html` 2. Plak deze code als basis: ```html CSS Selectors

Welkom op mijn pagina

Dit is een normale paragraaf.

Dit is een speciale paragraaf.

Nog een gewone paragraaf.

``` 3. 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 4. 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 1. 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 ene respnisve 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: ```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/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

### πŸ› οΈ Opdracht – Maak een blokkenrij met Flexbox 1. Maak een nieuw bestand in Phoenix Code: `flex.html` 2. Gebruik deze HTML als basis: ```html Flexbox oefening

Mijn Flexbox layout

Blok 1
Blok 2
Blok 3
``` 3. Experimenteer met andere waarden voor `justify-content` zoals `center`, `space-around` of `flex-end` 4. Voeg eventueel nog een vierde blok toe 5. 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.: ![image.png](https://www.roc.ovh/uploads/images/gallery/2025-06/scaled-1680-/stwimage.png) De drie blokken staan op het midden van de webpagina. ### πŸ“€ Inleveren 1. Maak een screenshot van je resultaat. 2. 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.

\--