К содержанию

HTML en CSS Tutorial voor Beginners

Eenvoudige tutorial over webontwerp met HTML en CSS voor beginners met gedetailleerde theorie en een reeks oefeningen.

Selectors

Verwantschapsrelaties van tags in HTML

Overerving van CSS-eigenschappen

Groeperen van selectors in CSS

Algemene eigenschappen bij het groeperen van selectors in CSS

Descendant Selector in CSS

De kindselector in CSS

Elementklassen in CSS

De span-tag voor tekstfragmenten in HTML

De div-tag voor het groeperen van tags in HTML

Groeperen van CSS-klassen

Tag met opgegeven klasse in CSS

Descendant selector en klassen in CSS

Complexe combinaties van descendant selectors en classes in CSS

Beginnersfout in descendant selector

Element met meerdere CSS-klassen

Element selecteren op unieke id in CSS

Selector op id en CSS-classes

Het gebruik van id in CSS

Element selecteren op meerdere klassen in CSS

Meerdere selectoren aaneengeschreven in CSS

Fout bij het gebruik van meerdere CSS-selectors

Groeperen van complexe selectors in CSS

Fout bij het groeperen van complexe CSS-selectors

Praktijk op combinaties van CSS-selectors

CSS selectorprioriteit

Opmerking over CSS-eigenschapconflict

Specificiteitsregels in CSS

Specificiteit van descendant selectors in CSS

De aangrenzende selector in CSS

De General Sibling Selector in CSS

Universele selector in CSS

Attribuutselectors in CSS

Linkstatussen in CSS

Nuances van de volgorde van linkstatussen in CSS

Link en visited linkstatussen in CSS

Algemeen gebruik van linkstatussen in CSS

Complexe selectors met linkstatussen in CSS

Link met klasse in CSS

Selectie van uiteindelijke elementen in CSS

Selectie op elementpositie in CSS

Selectie van enig kind in CSS

Selectie van lege elementen in CSS

Selectie op positie en type elementen in CSS

De ontkenning selector in CSS

Opmaak

Achtergrondkleur instellen in CSS

Basis van het werken met randen in CSS

Doorlopende rand in CSS

Gestippelde rand in CSS

Gestreepte rand in CSS

Convexe rand in CSS

Dubbele rand in CSS

CSS border-eigenschap shorthand

Rand voor individuele kanten in CSS

Afronding van blokranden in CSS

Afgeronde achtergrondranden in CSS

Een cirkel maken in CSS

Verschillende afrondingen voor verschillende hoeken in CSS

Vier waarden voor afronding voor verschillende hoeken CSS

Twee waarden voor afronding voor verschillende hoeken CSS

Drie waarden voor afronding voor verschillende hoeken in CSS

Afgeronde hoeken in percentages in CSS

Een cirkel maken met afronding in percentages in CSS

Achtergrondafbeelding in CSS

Herhaling van achtergrondafbeelding in CSS

Andere eigenschappen voor de achtergrond in CSS

Werken met ul-lijstmarkeringen in CSS

Vierkante lijstmarkeringen voor ul in CSS

UL-lijstmarkeringen als cirkels in CSS

Werken met ul-lijstmarkeringen in CSS

Het verwijderen van ul lijstmarkeringen in CSS

Werken met markeringen van ol-lijsten in CSS

Inline Romeinse cijfers voor ol-lijsten in CSS

Hoofdletter Romeinse cijfers voor ol-lijsten in CSS

Kleine Latijnse letters voor ol-lijsten in CSS

Hoofdletter Latijnse letters voor ol-lijsten in CSS

Inline Griekse letters voor ol-lijsten in CSS

Getallen met voorloopnullen voor ol-lijsten in CSS

Blokmodel

Werken met margin-inspringen in CSS

Margin-uitlijningen voor verschillende kanten in CSS

Meerdere waarden in de margin eigenschap in CSS

Vier waarden in de margin eigenschap in CSS

Twee waarden in de margin eigenschap in CSS

Drie waarden in de margin eigenschap in CSS

Werken met padding in CSS

Padding voor verschillende kanten in CSS

Meerdere waarden in de padding-eigenschap in CSS

Werken met padding in CSS

De invloed van rand op het uitbreiden van elementen in CSS

Invloed van padding en rand op het uitbreiden van elementen in CSS

Het ongedaan maken van elementuitbreiding in CSS

Kenmerken van blokelementen in CSS

Breedte en hoogte van een blokelement in CSS

Breedte van een blokelement in CSS

Hoogte van een blokelement in CSS

Hoogte van een blokelement zonder inhoud in CSS

Meerdere blokelementen naast elkaar in CSS

Kenmerken van inline-elementen in CSS

Breedte en hoogte van een inline-element in CSS

Meerdere inline elementen naast elkaar in CSS

Inspringen tussen inline elementen in CSS

Bepaling van het blokmodel van HTML-tags

Werken met de display eigenschap in CSS

Kenmerken van inline-blokelementen in CSS

Breedte en hoogte van een inline-blokelement in CSS

Breedte van een inline-block element in CSS

Hoogte van een inline-block element in CSS

Meerdere inline-block elementen naast elkaar in CSS

Uitlijning van blokelementen in CSS

Uitlijning van een blokelement met linker marge in CSS

Uitlijning van een blokelement met een rechtermarge in CSS

Uitlijning van inline-elementen in CSS

Inline-elementen centreren in CSS

Centreren van meerdere inline elementen

Inline-elementen rechts uitlijnen in CSS

Uitlijning van inline-blokelementen in CSS

Centreren van inline-block elementen in CSS

Uitlijnen van inline-block elementen naar rechts in CSS

Flex elementen in CSS

Hoogte van de ouder van flex elementen in CSS

Breedte van de ouder van flex elementen in CSS

Inline-blok ouder van flex elementen in CSS

Inspringen padding van de ouder van flex elementen in CSS

Margin inspring voor descendants in CSS

Uitlijning van flex elementen in CSS

Flex-elementen centreren in CSS

Uitlijning van flex elementen langs de ouder in CSS

Uitlijning van flex elementen langs de ouder met marges

Uitlijning van flex elementen langs de ouder met gelijke tussenruimtes

Positionering

Absolute positionering van elementen in CSS

Relatieve positionering van elementen in CSS

Positionering ten opzichte van de ouder in CSS

Positionering ten opzichte van een absolute ouder in CSS

Absolute positionering zonder coördinaten in CSS

Centreren via absoluut in CSS

Negatieve waarden bij positioneren in CSS

Vaste positionering in CSS

Blok over de volledige breedte van het scherm in CSS

Elementen stapelen langs de Z-as in CSS

Regulering van de z-overlapping van elementen in CSS

Nuances van het gebruik van negatieve z-index waarden in CSS

Floats

Inleiding tot de float eigenschap in CSS

Doordringen van zwevende elementen door tags in CSS

Combinatie van float en margin in CSS

Combinatie van float en padding in CSS

Zwevende elementen onder tags in CSS

Het effect van floats op de ouder in CSS

Hoogte van de ouder van floats in CSS

Tekst in de ouder van floats in CSS

Floaten in CSS

Opheffen van floaten met de clear eigenschap in CSS

Aparte div met clearfix in CSS

Clearfix en ouderhoogte in CSS

De float-eigenschap voor blokken in CSS

De eigenschap float en meerdere blokken in CSS

De eigenschap float en een ouder zonder tekst in CSS

Flexbox

Flex-elementen in een rij of kolom plaatsen in CSS

Positionering van flex elementen in een omgekeerde rij in CSS

Flex-elementen in een kolom plaatsen in CSS

Het omkeren van een kolom met flex elementen in CSS

Hoofdas en kruisas in flexblokken in CSS

Uitlijning van flex elementen langs de hoofdas in CSS

Uitlijning van flexblokken langs de dwarsas in CSS

De waarde center van de eigenschap align-items in CSS

Centreren zonder blokhoogte in CSS

Centreren met blokken van verschillende hoogte in CSS

Betekenis van de stretch waarde voor align-items in CSS

Praktijk voor uitlijning langs de assen in CSS

Uitlijning van een individueel element in het flexmodel in CSS

Volgorde van flex blokken in CSS

Grids

Introductie tot CSS Grid

Sporen en lijnen in CSS-raster

Weergave van grids in de browserdebugger

Aantal en breedte van kolommen in CSS-grids

De fr-eenheid in CSS Grids

Fractionele eenheden fr in CSS-grids

Pixels en fr-eenheden in CSS grids

Percentages en fr eenheden in CSS grids

De repeat-functie in CSS-grids

De waarde auto in CSS grids

De waarde van auto-fill in CSS grids

De minmax-functie in CSS-grids

De betekenis van auto-fit in CSS-grids

Aantal en breedte van rijen in CSS-grids

Afkorting voor rijen en kolommen in CSS-grids

Rijen samenvoegen in CSS-grids

Kolommen samenvoegen in CSS-grids

Combinaties van rij- en kolomoverspanningen in CSS-grids

Overlappende kolommen in CSS-grids

Afstand tussen kolommen in CSS-rasters

Afstand tussen rijen in CSS-rasters

Afstand tussen kolommen en rijen in CSS grids

Tegelraster in CSS

Lay-outs

Menu maken in CSS

Eenvoudige enkelkoloms lay-outs voor websites in CSS

Lay-outschema met meerdere wrappers in CSS

Structurele blokken van een website in HTML

Schema voor een tweekoloms lay-out van een website in CSS

Schema van een driedelige lay-out voor websites in CSS

Speciale tags voor lay-outelementen van een website in HTML

Belangrijke lay-out tags in HTML

Tag voor secties in HTML

Praktijk op lay-outs met HTML en CSS