Het boxmodel (block-level & inline elementen)

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Heel belangrijk voor het lay outen van html-elementen is het zogeheten boxmodel.

Ieder html element wordt gezien als een box, een rechthoekig vlak.

Je kunt deze vlakken positioneren door ze naast of onder elkaar te zetten.

Je kunt ze ook bij elkaar inzetten. Dat noemen we het 'nesten van elementen.

Grofweg kun je de html elementen verdelen in block-level elementen of inline-elementen.

Het karakteristieke kenmerk van een inline-element is dat er meerdere naast elkaar op dezelfde regel kunnen staan.

Zoals je bijvoorbeeld meerdere delen in een tekstblok kunt benadrukken met het html element 'em'.

Het karakteristieke van een block-level-element is dat deze standaard geen andere elementen naast zich verdraagt.

Ze nemen altijd de hele regel in beslag.

En dit is bijvoorbeeld het geval als je teksten gaat structureren met de 'h-één' tot en met 'h-zes'.

Maar ook bijvoorbeeld een paragraaf. Dat zijn typische block-level elementen.

Maar wat zowel een inline- als een block-level element met elkaar gemeen hebben is dat ze allemaal vallen onder het boxmodel.

Elke box kun je voorzien van de volgende css-eigenschappen.

Margin, border, padding en content.

Met content bedoelen we de inhoud van de box.

Dus bijvoorbeeld de tekst van een kop of een paragraaf of de afbeelding in een img-element.

Als je afstand wilt creëren tussen de begrenzing van de box en de inhoud, dan gebruik je daarvoor 'padding'.

Deze kan langs alle zijden worden toegepast met 'padding-top, padding-right, padding-bottom en padding-left'.

De begrenzing van de box kun je voorzien met een 'border'.

En ook deze kun je langs alle zijden apart definiëren.

Vervolgens kun je nog extra afstand opgeven vanaf de begrenzing van de box naar het naast gelegen element.

Dat doe je dan met 'margin'

Een verschil tussen de 'margin' en de 'padding' is dat als je een box een vulkleur geeft.

Deze vulkleur wel zichtbaar is in de 'padding' maar nooit in de 'margin'.

Want de vulkleur loopt tot aan de begrenzing van de box.

Voorbij de border volgt alleen nog maar transparante ruimte waarmee je afstand kunt creëren.