Front End 2 - CSS
01 - Introductie
Wat is CSS?
CSS is een taal die wordt gebruikt om de stijl van een website te beschrijven. Met CSS kun je bepalen hoe HTML-elementen eruitzien, zoals de kleuren, lettertypen, marges en afstanden.
Dit helpt om je website mooier, aantrekkelijker en gebruiksvriendelijker te maken.
HTML en CSS
HTML wordt gebruikt voor de structuur van een website.
CSS wordt gebruikt voor de opmaak en lay-out.
Consistent
Als je CSS op de juiste manier gebruikt dan hoef je maar één keer een stijl aan te maken. Deze wordt dat netjes op de hele HTML toegepast. Op die manier zien bijvoorbeeld al je headers er hetzelfde uit. Dit heet consistent. Je website heeft een consistente vormgeving als de vormgeving uniform is.
CSS maakt het dus eenvoudig om een consistente stijl te behouden over meerdere pagina's.
Responsive
Als je CSS goed toepast kan je er ook voor zorgen dat je website er op je laptop én op je telefoon goed uit ziet. Dit heet responsive. Met CSS kun je je website dus aanpassen aan verschillende schermformaten, zoals smartphones, tablets en desktopcomputers.
Voorbeeld
Kijk nu naar het voorbeeld (EN) van hoe CSS wordt gebruikt.
Link naar CSS introductievideo: https://youtu.be/0afZj1G0BIE
WAARSCHUWING: Aan het einde van deze module is er een eindopdracht die mondeling besproken wordt. Als blijkt dat je onvoldoende kennis hebt over de onderwerpen van deze module, gaan we ervan uit dat er gefraudeerd is (bijvoorbeeld door het gebruik van ChatGPT of het overnemen van werk van anderen). Zorg ervoor dat dit niet gebeurt!
Opdracht
Maak je eigen webpagina mooi met CSS
1: Maak een nieuw HTML-bestand met visual studio code bestandsnaam: 01-CSS-je_eigen_naam.html en voeg de volgende code toe :
Opdracht 1 - CSS Introductie
Welkom op de website van ......!
Dit is een introductie over mijzelf.
Ik woon in ...... en kom met de ..... naar school
Ik hou van programmeren en het maken van websites.
Herken je de class in de paragraaf ? Nee, kijk dan nog eens naar de video of zoek op wat class precies inhoud!
2: Vul de puntjes in.
3: Zoek uit met welke CSS code de achtergrond van je website een andere kleur krijgt.Geef je website je favoriete kleur door in de CSS van de body een regel toe te voegen onder de regel font-size: normal;4: Open het HTML-bestand in een webbrowser en zie hoe de CSS de stijl van je webpagina verandert.
Experimenteer met verschillende CSS eigenschappen en waarden om de opmaak verder aan te passen.Bekijk en probeer de Try it Yourself >> op: https://www.w3schools.com/css/default.asp
Inleveren:
HTML bestand
Screenshot (van je browser waarin je webpagina hebt geopend, zorg dat de URL van je pagina zichtbaar is.)Voorbeeld:
02 - Basisconcepten van CSS
CSS staat voor Cascading Style Sheet en word gebruikt om een website vorm te geven. Als je met HTML de structuur bouwt dan is CSS de opmaak. We kunnen nu dus ook wat meer creativiteit laten zien.
Selectors
Een CSS-selector is een patroon dat wordt gebruikt om de HTML-elementen te selecteren die je wilt stylen. Hier zijn enkele veelvoorkomende selectors:
Element selector: selecteert alle elementen van een bepaald type.
p {
color: blue;
}
Dit verandert de tekstkleur van alle
-elementen naar blauw.
Class selector: selecteert elementen met een specifieke class.
.intro {
font-size: 20px;
}
Dit stelt de lettergrootte in van alle elementen met de class "intro" op 20 pixels.
ID selector: selecteert het element met een specifiek ID.
#header {
background-color: yellow;
}
Dit verandert de achtergrondkleur van het element met het ID "header" naar geel.
Eigenschappen en waarden
CSS gebruikt eigenschappen en waarden om de stijl te definiëren. Enkele veelvoorkomende eigenschappen zijn:
color: de kleur van de tekst.background-color: de achtergrondkleur van een element.font-size: de grootte van de tekst.margin: de ruimte buiten een element.padding: de ruimte binnen een element.
Bekijk en probeer de Try it Yourself >> op: https://www.w3schools.com/css/css_selectors.asp
Opdracht
Maak een nieuw HTML-bestand met visual studio code en voeg de onderstaande code bij 4. toebestandsnaam: 02-CSS-je_eigen_naam.html
Vul in de puntjes de ontbrekende gegevens.
Bekijk je werk.Open het HTML-bestand in een webbrowser en zie hoe de CSS de stijl van je webpagina verandert. Experimenteer met verschillende CSS-eigenschappen en waarden om de opmaak verder aan te passen naar wat je zelf mooi vind.
Code
Opdracht2 - CSS - ...
Dit is een introductie over mijzelf.
Ik woon in .... en kom met de .... naar school.
Ik hou van .... en .....
In mijn vrije tijd .... en ....
Als sport ....
Ik probeer iedere dag .....
Inleveren:
HTML bestand
Screenshot van je browser waarin je webpagina hebt geopend, zorg dat de URL van je pagina zichtbaar is!
Voorbeeld:
03 - CSS Linken aan bestand
Je merkt al dat je code stuk langer gaat worden. Het is het netste om jouw CSS-code apart in een speciaal ".css" bestand te schrijven. Hierdoor wordt de html overzichtelijker en kan je css voor meerdere HTML bestanden gebruikt worden.
Er zijn ook nadelen waar je rekening mee moet houden. Voor een beginner is het lastig om met meerdere bestanden rekening te houden en de juiste naamgeving te gebruiken. Bij inline of interne CSS zie je direct de stijlen direct de stijlen op de HTML van toepassing zijn.
Als je met grote projecten met meerdere pagina's gaat werken is het overzichtelijker, onderhoudsvriendelijker en efficiënter om CSS code te linken aan een bestand.
Zorg dat je als het href attribuut de naam van jouw css bestand staat, dit is hoofdletter gevoelig!!!
Opdracht
Kopieer het html bestand van de vorige opdracht en geef het de,bestandsnaam: 03-CSS-je_eigen_naam.html
Maak in de zelfde map een nieuw bestand met de naam en extensie "03-CSS-je_eigen_naam-Style.css".
Knip uit je html bestand het gedeelte wat tussen de
Welkom op mijn gekleurde website van .....!
CSS kleuren zijn heel leuk om mee te werken.
Dit is een gekleurde box.
Bedankt voor je bezoek en tot ziens!