Cascading Style Sheets (CSS3)

Lesmethode :

Persoonlijk begeleid

Algemeen :

In deze CSS cursus bij Vijfhart leer je hoe je HTML-pagina’s opmaakt met CSS3, zodat ze er professioneel en aantrekkelijk uitzien. Je ontdekt hoe je met stijlen en layouts de gebruikerservaring sterk verbetert. Waar HTML de structuur biedt, zorgt Cascading Style Sheets (CSS) voor de vormgeving en uitstraling, onmisbaar voor modern webdesign.



Tijdens de cursus leer je hoe een stylesheet is opgebouwd en hoe je stijlen toepast in HTML. Je begint met de basis van de taal: de verschillende selectors, properties en values. Je gaat daarmee vervolgens aan de slag om lettertypen en tekstopmaak, kleurgebruik en achtergrondafbeeldingen aan te passen. Daarnaast werk je met het box-model, margins, padding en borders om de ruimtelijke opbouw van je pagina te regelen. Ook moderne technieken komen aan bod, zoals flexbox en grid voor lay-out, responsive design met media queries en breakpoints, en het gebruik van transitions en animaties om je webpagina dynamischer en gebruiksvriendelijker te maken.



Je past de theorie meteen toe door eigen stijlen te schrijven en bestaande pagina’s te verbeteren. Zo ervaar je hoe jouw keuzes in CSS het uiterlijk, de werking en de onderhoudbaarheid van een website bepalen en leer je hoe één stylesheet de opmaak van een complete site kan beheren.

Doel :

Na afloop kun je zelfstandig webpagina’s vormgeven met CSS3, waarbij je gebruikmaakt van moderne technieken voor professioneel webdesign en responsive layouts.

Doelgroep :

Deze cursus is voor iedereen die al bekend is met HTML en nu wil leren hoe je websites aantrekkelijk kunt opmaken met CSS3.

Voorkennis :

De volgende voorkennis is vereist: Bouwen van webpagina’s met HTML5.

Onderwerpen :

- Inleiding
- Opbouw van een CSS document
   - Selectors
   - Opname van stijlen in HTML met CSS
   - Voorrangsregels
   - Commentaar in stylesheet
   - Elementsoorten
   - Overerving van parent naar child
- Lettertypen en tekstopmaak
   - Lettertypen
- Tekst eigenschappen
- Kleurgebruik, afbeeldingen en animaties
   - Display eigenschap
   - Kleurgebruik in CSS
   - Achtergrondplaatjes
   - List items en CSS
   - Schaduw-, transparantie- en gradienteffecten
   - Transformaties en animaties in 2D en 3D
- Padding, Margin en borders
   - Ruimtelijke opbouw van elementen
   - Borders
   - Margin en padding
   - Box model
   - Width en height
- Positionering
   - Float
   - Clearing
   - Flexbox
   - Aandachtspunten bij positionering
   - Grid
- Responsive design
   - Viewport, pixel density en relatieve afmetingen
   - Touch events
   - Break points
   - Media queries
   - Responsive tables
   - Responsive fonts
   - Responsive images
- Frameworks (optioneel)
   - Framework overwegingen
   - Framework keuze