De boxeigenschappen (margin, padding & border)

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.

Ik laat je nu zien hoe je de boxeigenschappen kunt opgeven en vormgeven met css.

Ga naar Bestand > Open map en kies voor de map css--.

Met deze bestanden gaan we werken in dit hoofdstuk.

Klik op Open.

Maak een nieuw bestand aan en noem deze opmaak.css.

In de index.html heb ik het stijlblad normalize al gekoppeld.

Deze zorgt voor consistente vormgeving in alle browsers.

Kopieer de link met Commando C, plak hem een met Commando V.

Vervang de naam normalize voor opmaak.

En nu heb je dit stijlblad gekoppeld aan de html-pagina.

Deze moet na de normalize worden ingelezen zodat deze het laatst wordt ingelezen en dus bepalend is voor de vormgeving.

Splits het scherm op in twee delen met verticaal splitsen.

Activeer de tweede kolom. Dubbelklik op opmaak.css om het stijlblad te openen.

Hierin gaan we werken. Start een Live-voorvertoning op met de Live-knop.

Ik maak het bracket-scherm smaller zodat ik alle drie de schermen in beeld heb.

Klik met de rechtermuisknop in het voorvertoningsvenster en kies voor Inspecteren.

Houd vanaf nu vooral goed de eigenschappen van het boxmodel in de gaten.

Chrome geeft hier een duidelijke visualisering voor weer.

Activeer het select-gereedschap en klik eenmaal op de titel 'Het boxmodel'.

Dit is de h.

Onderin het styles-venster vind je de actuele waarden van de margin, de border, de padding en het formaat van het contentgebied terug.

Je weet dat elk html-element boseigenschappen heeft.

HTML kent grofweg block-level elementen en inline elementen.

Allemaal zijn ze in het bezit van een box.

We gaan aan de slag in het stijlblad.

Typ bovenin het stijlblad op de eerste regel @charset "UTF-" en je eindigt met een puntkomma.

Met deze regel zorg je ervoor dat de inhoud van het tekstbestand goed ingelezen kan worden door browsers.

Een trucje om de box van de html-elementen in beeld te brengen is de volgende.

Typ in het css-stijlblad op een nieuwe regel het asterix-teken.

Op de mac gebruik je hiervoor de Shift-toets in combinatie met de acht.

Dit noemen ze de wildcard.

Hiermee geef je op dat de stijl die je gaat schrijven toegepast moet worden op alle html-elementen.

Je typt een accolade openen en een accolade sluiten.

Tussen de accolades begin je met het benoemen van de eigenschap en dat is outline, dubbele punt. Dubbele punt

En dan moet je drie waarden opgeven.

Als eerste de dikte van de lijn, één px voor één pixel.

Dan een spatie en het soort lijn, dat wordt solid.

Opnieuw een spatie en als laatste de kleur van de lijn.

Die wordt grijs met grey, puntkomma om af te sluiten.

Kijk nu krijgen alle elementen op de pagina een rand.

En zo kun je ook heel duidelijk de contouren van de box zien.

Zie je dat ook de inline-elementen gemaakt met het html-element -em- een rechthoekig vlak tonen.

Dat is de box. Je kunt er dus op vertrouwen dat elk html-element een box heeft.

Ik start met de h-een. Deze geef ik een achtergrondkleur met background-color:beige;

Deze kleur vult tot aan de rand van de box.

Ik wil rondom meer afstand tussen de rand en de inhoud.

De content en daarvoor gebruik je padding. Padding...

En ik voer een waarde in van tien pixels.

Deze wordt langs alle zijden toegepast.

Zie dat het boxmodel in Chrome deze waarden keurig toont voor de padding.

Ik wil ook voorbij de rand een afstand opgeven. Dat doe je met de margin.

Ditmaal kies ik voor twintig pixels.

De achtergrondkleur loopt niet door in de margin.

Die is altijd transparant.

Die is altijd transparant.