CSS kan worden gebruikt om de weergave van webpagina's te beheersen door middel van kleur, lettertype, lay-out, animatie en meer.
align-content:
align-content is een css property die wordt gebruikt om de manier waarop meerdere rijen flex items worden uitgelijnd binnen een flex container te regelen. Het bepaalt de manier waarop flex items worden verdeeld over de flex rijen en de ruimte tussen de flex rijen.Voorbeelden:
Toepassing:
<DIV style="align-content: space-around;"> Voorbeeldtekst </DIV>align-items:
De CSS align-items eigenschap stelt de uitlijning van items langs de kruislings as in een flex container. Dit bepaalt hoe de elementen in een flex container worden uitgelijnd langs de kruislings as. Als een element in een flex container hoogte heeft, zal het middelpunt langs de kruislings as gebruikt worden als uitlijningpunt.Voorbeelden:
Toepassing:
<DIV style="align-items: stretch;"> Voorbeeldtekst </DIV>align-self:
align-self is een CSS property die gebruikt kan worden om de uitlijning van een enkel element te veranderen. Het bepaalt hoe een element zich gedraagt binnen het flex-item waar het in staat, en kan worden gebruikt om een element uit te lijnen met andere elementen, ongeacht welke volgorde ze in de bron-code staan. align-self wordt vaak gebruikt in combinatie met display: flex; en de flex-direction, flex-wrap en justify-content eigenschappen.Voorbeelden:
Toepassing:
<DIV style="align-self: baseline;"> Voorbeeldtekst </DIV>all:
De property all is een shorthand-property waarmee je alle andere eigenschappen van de elementen in de selectie kunt aanpassen. Alle eigenschappen die gereset worden door browsers, zoals margin, border, padding, font-style, font-variant en letter-spacing, worden geregeld door deze property.Voorbeelden:
Toepassing:
<DIV style="all: revert;"> Voorbeeldtekst </DIV>animation:
De CSS property animation maakt het mogelijk om verschillende animaties te maken met CSS. Met deze property kunnen verschillende animatie-instellingen worden opgegeven, zoals de animatieduur, de achtergrondkleur en de afspeelsnelheid. De animatie wordt afgespeeld door de browser, waardoor het mogelijk is om complexe animaties te maken met CSS.Voorbeelden:
Toepassing:
<DIV style="animation: naam 0.5s ease-in-out 0s 2 alternate;"> Voorbeeldtekst </DIV>animation-delay:
De css property animation-delay bepaalt hoe lang het duurt voordat een animatie begint nadat deze is opgeroepen door de pagina. Hierdoor is het mogelijk om animaties op verschillende momenten af te laten spelen, waardoor bijvoorbeeld een bepaalde volgorde in de animaties bewaard blijft.Voorbeelden:
Toepassing:
<DIV style="animation-delay: 1.5s;"> Voorbeeldtekst </DIV>animation-direction:
De animation-direction property geeft aan in welke richting een animatie wordt afgespeeld. De animatie kan worden afgespeeld vanaf de begin- of eindpositie of in een cirkelvormige beweging.Voorbeelden:
Toepassing:
<DIV style="animation-direction: alternate-reverse;"> Voorbeeldtekst </DIV>animation-duration:
De animation-duration property geeft de lengte van de animatie aan. Het is de tijd in seconden of milliseconden die de animatie duurt om van begin naar eind te gaan.Voorbeelden:
Toepassing:
<DIV style="animation-duration: 2ms;"> Voorbeeldtekst </DIV>animation-fill-mode:
De animation-fill-mode property bepaalt hoe de animatie aan het einde van de animatie wordt gevuld. Dit betekent dat de animatie de waarde aanneemt die is gedefinieerd in de laatste keyframe, zodat het object niet terugkeert naar zijn oorspronkelijke staat.Voorbeelden:
Toepassing:
<DIV style="animation-fill-mode: both;"> Voorbeeldtekst </DIV>animation-iteration-count:
De animation-iteration-count property specificeert hoeveel keer een animatie herhaald moet worden. Als er een oneindig aantal herhalingen nodig zijn, kan de waarde 'infinite' worden gebruikt.Voorbeelden:
Toepassing:
<DIV style="animation-iteration-count: infinite;"> Voorbeeldtekst </DIV>animation-name:
De animation-name property specificeert de naam van de animatie die wordt gebruikt. Dit is een verplicht eigenschap als er meerdere animaties zijn gespecificeerd in de animation-name lijst. De naam van de animatie wordt gebruikt om de verschillende animaties te verwijzen naar de keyframes die de animatie definiëren.Voorbeelden:
Toepassing:
<DIV style="animation-name: animation3;"> Voorbeeldtekst </DIV>animation-play-state:
De property animation-play-state regelt of een animatie wordt afgespeeld of niet. Het is mogelijk om een animatie op een bepaalde plek te pauzeren en later weer te starten. Door deze property te gebruiken kun je de animatie beter sturen.Voorbeelden:
Toepassing:
<DIV style="animation-play-state: pause;"> Voorbeeldtekst </DIV>animation-timing-function:
De animation-timing-function property specificieert hoe snel de animatie elke keyframe uitvoert. Het bepaalt de verhouding tussen de tijden van de verschillende keyframes, dus hoe snel de animatie tussen keyframes verloopt.Voorbeelden:
Toepassing:
<DIV style="animation-timing-function: cubic-bezier(n,n,n,n);"> Voorbeeldtekst </DIV>backface-visibility:
De backface-visibility property bepaalt of een element dat schuin is gedraaid, zichtbaar is of niet. Als de waarde visible is, wordt dit element zichtbaar. Als de waarde hidden is, wordt het element niet zichtbaar.Voorbeelden:
Toepassing:
<DIV style="backface-visibility: hidden;"> Voorbeeldtekst </DIV>background:
De background property is verantwoordelijk voor de achtergrond van een element. Hiermee kunnen achtergrondkleuren, achtergrondafbeeldingen, herhaling, positie en scrollen gedefinieerd worden.Voorbeelden:
Toepassing:
<DIV style="background: background-attachment: fixed;"> Voorbeeldtekst </DIV>background-attachment:
De background-attachment property bepaalt of de achtergrondafbeelding, of de achtergrondkleur, samen met de pagina scrollt of niet.Voorbeelden:
Toepassing:
<DIV style="background-attachment: local;"> Voorbeeldtekst </DIV>background-blend-mode:
De CSS property background-blend-mode bepaalt hoe twee of meer achtergrondlagen beïnvloeden elkaar. Deze property kun je gebruiken om het kleur- of lichtniveau, contrast, of andere visuele effecten toe te passen, door twee of meer achtergrondlagen te mengenVoorbeelden:
Toepassing:
<DIV style="background-blend-mode: luminosity;"> Voorbeeldtekst </DIV>background-clip:
De background-clip property bepaalt hoe de achtergrond image (background) tot een element moet worden beperkt. Deze property verwijst naar de plaats waar de achtergrond image gesneden moet worden. De achtergrondimage kan worden beperkt tot het element zelf, het padding gebied, of het content gebied.Voorbeelden:
Toepassing:
<DIV style="background-clip: content-box;"> Voorbeeldtekst </DIV>background-color:
De background-color property definieert de achtergrondkleur van een element. Dit kan een kleur zijn, een afbeelding of een kleurovergang.Voorbeelden:
Toepassing:
<DIV style="background-color: red;"> Voorbeeldtekst </DIV>background-image:
De background-image property geeft de achtergrondafbeelding weer die getoond wordt in een element. De afbeelding kan een URL of een data URI zijn. Als de afbeelding niet gevonden wordt, wordt er geen achtergrondafbeelding getoond;Voorbeelden:
Toepassing:
<DIV style="background-image: none;"> Voorbeeldtekst </DIV>background-origin:
De background-origin property geeft aan waar de achtergrond afbeelding begint. Het bepaalt de afbeelding positie binnen het element.Voorbeelden:
Toepassing:
<DIV style="background-origin: content-box;"> Voorbeeldtekst </DIV>background-position:
De css property 'background-position' wordt gebruikt om de positie van de achtergrondafbeelding te bepalen in de container waarin deze is geplaatst. Er kunnen absolute waarden worden gebruikt (in pixels, rems, percentages, etc.) of relatieve waarden (top, bottom, center, left, right).Voorbeelden:
Toepassing:
<DIV style="background-position: 2rem 2rem;"> Voorbeeldtekst </DIV>background-repeat:
De background-repeat property geeft aan hoe een achtergrondafbeelding herhaald wordt. Deze property bepaalt of een afbeelding herhaald wordt als het element groter is dan de afbeelding, of de afbeelding alleen maar 1 keer wordt afgebeeld.Voorbeelden:
Toepassing:
<DIV style="background-repeat: no-repeat;"> Voorbeeldtekst </DIV>background-size:
De css property background-size bepaalt de afmetingen van de achtergrondafbeelding. Het kan worden ingesteld als een absolute maat zoals pixels, of als relatieve maat zoals percentages.Voorbeelden:
Toepassing:
<DIV style="background-size: 200px 200px;"> Voorbeeldtekst </DIV>border:
Border is een css property die de rand van een element toont. Het kan gebruikt worden om een lijn, een dikte, een kleur en een stijl toe te voegen aan een element.Voorbeelden:
Toepassing:
<DIV style="border: 5px dashed #ccc;"> Voorbeeldtekst </DIV>border-bottom:
De border-bottom property definieert de stijl, dikte en kleur van de onderkant van een element. Dit kan worden gebruikt om een lijn toe te voegen onder een element. Het is ook mogelijk om een afbeelding als achtergrond te gebruiken.Voorbeelden:
Toepassing:
<DIV style="border-bottom: 6px groove #0000FF;"> Voorbeeldtekst </DIV>border-bottom-color:
border-bottom-color is een property die wordt gebruikt om de kleur van de border aan de onderkant van een element te definiëren. Deze property kan worden toegepast op alle elementen waarop een border kan worden toegepast.Voorbeelden:
Toepassing:
<DIV style="border-bottom-color: hsl(0, 100%, 50%);"> Voorbeeldtekst </DIV>border-bottom-left-radius:
De border-bottom-left-radius property maakt het mogelijk een afgerond hoekje aan de linkeronderhoek van een element te geven. Hierbij kunnen afgeronde hoeken worden gemaakt met verschillende radii, afhankelijk van de waarde die aan deze property wordt gegeven.Voorbeelden:
Toepassing:
<DIV style="border-bottom-left-radius: 20px;"> Voorbeeldtekst </DIV>border-bottom-right-radius:
De border-bottom-right-radius property stelt het ronde hoek van de rechter onderhoek van een element in. Hierdoor krijgt het element een afgeronde hoek in de rechter onderhoek.Voorbeelden:
Toepassing:
<DIV style="border-bottom-right-radius: 3vh;"> Voorbeeldtekst </DIV>border-bottom-style:
De border-bottom-style property definieert de stijl van de onderkant van een element. Het kan worden gebruikt om aan te geven of de lijn die de onderkant van het element omgeeft dik, dun, gestippeld, etc. is.Voorbeelden:
Toepassing:
<DIV style="border-bottom-style: outset;"> Voorbeeldtekst </DIV>border-bottom-width:
Border-bottom-width is een css property die de breedte van de onderkant van een border definieert. De breedte kan ingesteld worden tussen 0 en een maximum van de breedte van het element. De property kan een absolute waarde hebben in pixels, relatieve waarden in procenten van het element, of keyword waarden zoals thin, medium en thick.Voorbeelden:
Toepassing:
<DIV style="border-bottom-width: thick;"> Voorbeeldtekst </DIV>border-collapse:
De css property 'border-collapse' stelt de gebruiker in staat om aan te geven of de randen tussen cellen in een tabel samengevoegd of apart moeten worden weergegeven. Wanneer de property 'border-collapse' als 'collapse' ingesteld wordt, worden de randen samengevoegd, waardoor er geen dubbele lijnen tussen de cellen zullen zijn. Wanneer deze property als 'separate' ingesteld wordt, zullen de randen apart worden weergegeven en zullen er dubbele lijnen tussen de cellen zijn.Voorbeelden:
Toepassing:
<DIV style="border-collapse: separate;"> Voorbeeldtekst </DIV>border-color:
De border-color property bepaalt de kleur van de border van een element. Het is mogelijk om verschillende kleuren voor de border te definiëren voor de vier verschillende borders: top, right, bottom en left.Voorbeelden:
Toepassing:
<DIV style="border-color: hsl(0, 0%, 100%);"> Voorbeeldtekst </DIV>border-image:
De border-image property maakt het mogelijk om een afbeelding als border te gebruiken. De afbeelding wordt vervolgens herhaald of gesneden om de gewenste vorm te krijgen. Er worden vier waarden gebruikt om de border-image te specificeren; bron, breedte, stijl en herhaling.Voorbeelden:
Toepassing:
<DIV style="border-image: space;"> Voorbeeldtekst </DIV>border-image-outset:
De border-image-outset property definieert de afstand tussen de rand van het element en de rand van de afbeelding. De afstand wordt gemeten van de rand van de afbeelding naar de rand van het element. Deze afstand kan worden ingesteld in pixels of als een percentage van de breedte van de afbeelding.Voorbeelden:
Toepassing:
<DIV style="border-image-outset: auto;"> Voorbeeldtekst </DIV>border-image-repeat:
De border-image-repeat property bepaalt hoe de border-image moet worden herhaald. Border-image-repeat is een kortere manier om de individuele border-image-repeat-x en border-image-repeat-y eigenschappen te specificeren.Voorbeelden:
Toepassing:
<DIV style="border-image-repeat: space;"> Voorbeeldtekst </DIV>border-image-slice:
De border-image-slice property is een property die gebruikt wordt om te bepalen hoeveel pixels worden gebruikt om een border-image in te delen. Het is een afbeeldingsslice die gebruikt wordt om een afbeelding te knippen die wordt gebruikt als border. De border-image-slice property heeft 6 waarden die allemaal afzonderlijk opgegeven dienen te worden, de waarden geven aan hoeveel pixels van de afbeelding gebruikt mogen worden voor elke zijde van de border.Voorbeelden:
Toepassing:
<DIV style="border-image-slice: 20% 20% 20% 20%;"> Voorbeeldtekst </DIV>border-image-source:
Border-image-source is een CSS property die gebruikt wordt om de bron van een afbeelding te bepalen die gebruikt wordt als border. De afbeelding wordt verdeeld over de border en zal zich aanpassen als de grootte van het element veranderd.Voorbeelden:
Toepassing:
<DIV style="border-image-source: url(border.png);"> Voorbeeldtekst </DIV>border-image-width:
De border-image-width property is een shorthand-property voor een aantal andere properties die betrekking hebben op de breedte van een border-image. Het biedt een manier om meerdere breedte-waarden te specificeren voor elk van de zijden van de border-image.Voorbeelden:
Toepassing:
<DIV style="border-image-width: inherit;"> Voorbeeldtekst </DIV>border-left:
De border-left property definieert de breedte, stijl en kleur van de linkerzijde van een element;. Deze property kan ook gebruikt worden om een afbeelding te definieren als achtergrond van de linkerzijde.Voorbeelden:
Toepassing:
<DIV style="border-left: 10px double #FFFFFF;"> Voorbeeldtekst </DIV>border-left-color:
De border-left-color css property definieert de kleur van de linker rand van een element. Het wordt gebruikt om de linker rand van een element te kleuren.Voorbeelden:
Toepassing:
<DIV style="border-left-color: hsl(0, 100%, 50%);"> Voorbeeldtekst </DIV>border-left-style:
De border-left-style css property definieert de stijl van de linker rand van een element. Het wordt gebruikt om de linker rand van een element een specifieke stijl te geven.Voorbeelden:
Toepassing:
<DIV style="border-left-style: outset;"> Voorbeeldtekst </DIV>border-left-width:
De border-left-width css property definieert de dikte van de linker rand van een element. Het wordt gebruikt om de linker rand van een element een specifieke breedte te geven.Voorbeelden:
Toepassing:
<DIV style="border-left-width: thick;"> Voorbeeldtekst </DIV>border-radius:
border-radius is een eigenschap die het mogelijk maakt om de afgeronde hoeken van een element te definiëren. Het wordt gebruikt om de randen van elementen af te ronden.Voorbeelden:
Toepassing:
<DIV style="border-radius: 5% 10% 15% 20%;"> Voorbeeldtekst </DIV>border-right:
Border-right is een css-eigenschap die gebruikt wordt voor het definiëren van een rechterrand voor een element. Het wordt gebruikt om de breedte, stijl en kleur van de rand aan te passen.Voorbeelden:
Toepassing:
<DIV style="border-right: 5px dashed #FF0000;"> Voorbeeldtekst </DIV>border-right-color:
De border-right-color property specificeert de kleur van de rechter rand van een element.Voorbeelden:
Toepassing:
<DIV style="border-right-color: rgb(255, 0, 0);"> Voorbeeldtekst </DIV>border-right-style:
De border-right-style property bepaalt de stijl van de rechterrand van een element. Het definieert of een element een solide, geen, dubbele, gedashed, gedotted, of gegroefde rechterrand heeft.Voorbeelden:
Toepassing:
<DIV style="border-right-style: outset;"> Voorbeeldtekst </DIV>border-right-width:
De border-right-width property bepaalt de dikte van de rechterrand van een element. De dikte van de rand kan worden gespecificeerd met een absolute dikte (in pixels, pt, cm, etc), een relatieve dikte (in procenten) of met een van de vooraf gedefinieerde termen.Voorbeelden:
Toepassing:
<DIV style="border-right-width: thin;"> Voorbeeldtekst </DIV>border-spacing:
De border-spacing property bepaalt de afstand tussen twee naast elkaar gelegen cellen in een tabel. Deze afstand is alleen van toepassing als de tabel gebruik maakt van het border-collapse property met de waarde separate.Voorbeelden:
Toepassing:
<DIV style="border-spacing: 1em;"> Voorbeeldtekst </DIV>border-style:
De border-style property bepaalt de stijl van de randen van een element. Het definieert of een element een solide, geen, dubbele, gedashed, gedotted, of gegroefde rand heeft.Voorbeelden:
Toepassing:
<DIV style="border-style: outset;"> Voorbeeldtekst </DIV>border-top:
Border-top is een CSS-eigenschap die een bovenrand aan een HTML-element toevoegt. De bovenrand kan gevormd worden met dikte, kleur en stijl. De dikte, kleur en stijl van de bovenrand kunnen aangepast worden aan de vereisten van de gebruiker.Voorbeelden:
Toepassing:
<DIV style="border-top: 1px dashed #808080;"> Voorbeeldtekst </DIV>border-top-color:
De border-top-color CSS-eigenschap stelt de kleur van de bovenrand van een element in. Deze eigenschap is afhankelijk van de waarde van de border-style, of anders gezegd, als border-style niet op een waarde anders dan none is ingesteld, zal border-top-color geen effect hebben.Voorbeelden:
Toepassing:
<DIV style="border-top-color: rgba(255, 0, 0, 0.5);"> Voorbeeldtekst </DIV>border-top-left-radius:
De border-top-left-radius property bepaalt de hoek van de bovenlinker hoek van de elementen. Als je een vierkant element hebt, kun je deze instellen op verschillende hoeken en afgeronde hoeken, die worden gecreëerd door een combinatie van verschillende waarden.Voorbeelden:
Toepassing:
<DIV style="border-top-left-radius: 20px 30px;"> Voorbeeldtekst </DIV>border-top-right-radius:
De border-top-right-radius css-property definieert de afgeronde hoeken aan de rechterbovenhoek van het element. Deze eigenschap kan een waarde accepteren dat een absolute lengte of percentage is dat de radius van deze hoek beschrijft.Voorbeelden:
Toepassing:
<DIV style="border-top-right-radius: 10%;"> Voorbeeldtekst </DIV>border-top-style:
De border-top-style css-property definieert de stijl van de bovenste rand van een element. Een aantal mogelijke waarden zijn: none, hidden, dotted, dashed, solid, double, groove, ridge, inset en outset.Voorbeelden:
Toepassing:
<DIV style="border-top-style: dotted;"> Voorbeeldtekst </DIV>border-top-width:
De border-top-width property bepaalt de dikte van de bovenste rand van een element. De dikte kan ingesteld worden in pixels, procenten, em of andere eenheden. Als er geen waarde is ingesteld, dan is de waarde over het algemeen medium.Voorbeelden:
Toepassing:
<DIV style="border-top-width: 25px;"> Voorbeeldtekst </DIV>border-width:
De border-width property bepaalt de breedte van een element's border. De breedte kan worden gedefinieerd met verschillende eenheden, zoals pixels (px), punten (pt), centimeters (cm) of percentages (%);Voorbeelden:
Toepassing:
<DIV style="border-width: 5cm;"> Voorbeeldtekst </DIV>bottom:
De bottom property bepaalt de positie van een element, relatief aan de onderkant van een ander element. De positie kan worden gedefinieerd met verschillende eenheden, zoals pixels (px), punten (pt), centimeters (cm) of percentages (%);Voorbeelden:
Toepassing:
<DIV style="bottom: 5cm;"> Voorbeeldtekst </DIV>box-shadow:
De box-shadow property voegt een schaduw toe aan een element. De schaduw kan worden gedefinieerd met verschillende eenheden, zoals pixels (px), punten (pt), centimeters (cm) of percentages (%);Voorbeelden:
Toepassing:
<DIV style="box-shadow: 5px 5px 5px #000000;"> Voorbeeldtekst </DIV>box-sizing:
box-sizing stelt ons in staat om de padding, border-width en content-width te definiëren voor het element waar deze property op wordt toegepast. Met deze property kunnen we de afmetingen van het element aanpassen zonder dat er fouten optreden.Voorbeelden:
Toepassing:
<DIV style="box-sizing: padding-box;"> Voorbeeldtekst </DIV>caption-side:
De caption-side property geeft aan waar de tabel caption (onderschrift) in een tabel moet staan. Deze property is alleen van toepassing op elementen met de tag 'table'.Voorbeelden:
Toepassing:
<DIV style="caption-side: bottom;"> Voorbeeldtekst </DIV>clear:
Met de clear property kan je een element laten stoppen met een specifieke richting (top, right, bottom, left), dit is handig als je wilt voorkomen dat elementen zich binnen een pagina overlappen.Voorbeelden:
Toepassing:
<DIV style="clear: both;"> Voorbeeldtekst </DIV>clip:
De clip property definieert hoe een element wordt afgesneden. Het laat je een element afsnijden en de output kun je gebruiken om een element te maken dat een bepaalde vorm heeft, zoals een cirkel of een driehoek.Voorbeelden:
Toepassing:
<DIV style="clip: auto;"> Voorbeeldtekst </DIV>color:
De color property definieert de kleur van de tekst in een element. De kleur wordt opgegeven door middel van een hexadecimale waarde, een RGBA waarde of een naam van een kleur.Voorbeelden:
Toepassing:
<DIV style="color: black;"> Voorbeeldtekst </DIV>column-count:
De column-count property definieert het aantal kolommen in een element. Deze property wordt gebruikt om een element te splitsen in meerdere kolommen.Voorbeelden:
Toepassing:
<DIV style="column-count: auto;"> Voorbeeldtekst </DIV>column-fill:
De column-fill property bepaalt hoe columns worden gevuld met inhoud. Het bepaalt of inhoud wordt verdeeld tussen columns of dat het bij elke kolom begint.Voorbeelden:
Toepassing:
<DIV style="column-fill: inherit;"> Voorbeeldtekst </DIV>column-gap:
De column-gap property definieert de ruimte tussen twee kolommen. Het kan een absolute waarde of een relatieve waarde hebben.Voorbeelden:
Toepassing:
<DIV style="column-gap: inherit;"> Voorbeeldtekst </DIV>column-rule:
De column-rule property definieert de stijl, breedte en kleur van de regel tussen twee kolommen.Voorbeelden:
Toepassing:
<DIV style="column-rule: inherit;"> Voorbeeldtekst </DIV>column-rule-color:
De column-rule-color property definieert de kleur van de regel tussen twee kolommen.Voorbeelden:
Toepassing:
<DIV style="column-rule-color: inherit;"> Voorbeeldtekst </DIV>column-rule-style:
column-rule-style is een CSS-property die de stijl van de regel tussen kolommen bepaalt. De standaardwaarde is nul (geen regel).Voorbeelden:
Toepassing:
<DIV style="column-rule-style: hidden;"> Voorbeeldtekst </DIV>column-rule-width:
column-rule-width is een CSS-property die de breedte van een regel tussen kolommen bepaalt. Standaard is de breedte nul (geen regel).Voorbeelden:
Toepassing:
<DIV style="column-rule-width: thick;"> Voorbeeldtekst </DIV>column-span:
column-span is een CSS-property die bepaalt of een element over meerdere kolommen moet worden uitgestrekt. Standaard strekt het element zich uit over één kolom.Voorbeelden:
Toepassing:
<DIV style="column-span: none;"> Voorbeeldtekst </DIV>column-width:
column-width is een CSS-property die de breedte van kolommen bepaalt. De standaardwaarde is auto, waarmee de kolombreedte wordt bepaald door de inhoud van de kolom.Voorbeelden:
Toepassing:
<DIV style="column-width: 10%;"> Voorbeeldtekst </DIV>columns:
De columns property is een shorthand property dat gebruikt kan worden om de kolom-breedte en kolom-afstanden in een multi-kolom layout te specificeren;Voorbeelden:
Toepassing:
<DIV style="columns: 3 150px;"> Voorbeeldtekst </DIV>content:
De CSS property 'content' wordt gebruikt om de inhoud van een element in te stellen. Het kan gebruikt worden om tekst, afbeeldingen of andere elementen toe te voegen aan een element. De inhoud kan ook dynamisch bepaald worden door de waarde "attr(attribuut)" te gebruiken, waarbij het attribuut de naam van het attribuut is waarvan de inhoud wordt gebruikt.Voorbeelden:
Toepassing:
<DIV style="content: "attr(data-value)";"> Voorbeeldtekst </DIV>counter-increment:
De CSS property 'counter-increment' wordt gebruikt om een teller toe te voegen aan een element. De waarde van de teller wordt verhoogd wanneer een element wordt gevonden. Deze tellers kunnen worden gebruikt om een nummering toe te voegen aan een element, zoals een lijst of een tabel.Voorbeelden:
Toepassing:
<DIV style="counter-increment: counter3 5;"> Voorbeeldtekst </DIV>counter-reset:
De CSS property 'counter-reset' wordt gebruikt om de waarde van een teller te resetten. Deze waarde wordt gebruikt in combinatie met de 'counter-increment' property om te zorgen dat de teller bij een bepaald element begint met een bepaalde waarde.Voorbeelden:
Toepassing:
<DIV style="counter-reset: counter3 10;"> Voorbeeldtekst </DIV>cursor:
De cursor property defineert het type cursor dat getoond wordt wanneer er met de muis over een element wordt gegaan. Deze property kan gebruikt worden om de gebruiker een visueel signaal te geven dat er op een bepaalde manier met het element omgegaan kan worden, zoals een element met een link.Voorbeelden:
Toepassing:
<DIV style="cursor: progress;"> Voorbeeldtekst </DIV>direction:
De direction property bepaalt de tekstrichting van een element. Deze property kan gebruikt worden om een element in een linkse of rechtse tekstrichting te laten staan.Voorbeelden:
Toepassing:
<DIV style="direction: rtl;"> Voorbeeldtekst </DIV>display:
De display property bepaalt of een element getoond wordt, of niet. Deze property kan gebruikt worden om een element te verbergen of te tonen.Voorbeelden:
Toepassing:
<DIV style="display: inline-block;"> Voorbeeldtekst </DIV>empty-cells:
empty-cells bepaalt of een cel die leeg is (inhoud of afmetingen) worden weergegeven als lege cel of niet. De waarde voor empty-cells kan worden ingesteld op show, hide, inherit of initial.Voorbeelden:
Toepassing:
<DIV style="empty-cells: initial;"> Voorbeeldtekst </DIV>filter:
Met de filter CSS-eigenschap kun je verschillende effecten toepassen op een element, zoals kleurveranderingen, verwijdering van kleur, vervaging en meer. De waarde voor filter kan worden ingesteld op blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia of initial.Voorbeelden:
Toepassing:
<DIV style="filter: initial;"> Voorbeeldtekst </DIV>flex:
De flex CSS-eigenschap geeft een element flexibiliteit om te kunnen schalen, met inbegrip van de breedte en de hoogte, om elementen naar één of meer rijen of kolommen te verplaatsen. De waarde voor flex kan worden ingesteld op none, initial, auto, grow, shrink of basis.Voorbeelden:
Toepassing:
<DIV style="flex: basis;"> Voorbeeldtekst </DIV>flex-basis:
Flex-basis definieert de basisgrootte van een flex-item. De flex-basis is het startpunt van de flex-groei en het flex-samentrekken. Als de flex-basis een positief getal is, betekent dit dat de flex-item een vaste waarde heeft, die als basis wordt gebruikt voor het berekenen van de grootte van de flex-item. Als de flex-basis een negatief getal is, betekent dit dat de flex-item een percentage is van de geschatte grootte van de flex-container.Voorbeelden:
Toepassing:
<DIV style="flex-basis: auto;"> Voorbeeldtekst </DIV>flex-direction:
Flex-direction geeft de layoutrichting (horizontaal of verticaal) aan. De flex-items worden geplaatst in de richting die door de flex-direction wordt gespecificeerd. De flex-direction heeft 4 waarden: row, row-reverse, column en column-reverse. De standaardwaarde is row.Voorbeelden:
Toepassing:
<DIV style="flex-direction: column-reverse;"> Voorbeeldtekst </DIV>flex-flow:
Flex-flow is een shorthand voor flex-direction en flex-wrap. Dit betekent dat in plaats van twee regels code, slechts één regel code nodig is om de flex-direction en flex-wrap te specificeren. De syntax voor flex-flow is flex-flow:Voorbeelden:
Toepassing:
<DIV style="flex-flow: column-reverse wrap;"> Voorbeeldtekst </DIV>flex-grow:
Flex-grow is een CSS-eigenschap die wordt gebruikt om flexibele elementen in een flex-container te laten groeien en krimpen in verhouding tot elkaar. Het controleert hoeveel ruimte het flexibele element binnen de flex-container inneemt. Het maakt gebruik van een numerieke waarde die aangeeft hoeveel het element zal groeien ten opzichte van de andere flex-elementen in de flex-container;Voorbeelden:
Toepassing:
<DIV style="flex-grow: column-reverse wrap;"> Voorbeeldtekst </DIV>flex-shrink:
Flex-shrink is een CSS-eigenschap die wordt gebruikt om flexibele elementen in een flex-container te laten krimpen in verhouding tot elkaar. Het controleert hoeveel ruimte het flexibele element binnen de flex-container inneemt. Het maakt gebruik van een numerieke waarde die aangeeft hoeveel het element zal krimpen ten opzichte van de andere flex-elementen in de flex-container;Voorbeelden:
Toepassing:
<DIV style="flex-shrink: column-reverse wrap;"> Voorbeeldtekst </DIV>flex-wrap:
Flex-wrap is een CSS-eigenschap die wordt gebruikt om flex-elementen op meerdere regels te laten staan in plaats van op een enkele regel. Het maakt gebruik van een woordwaarde om te bepalen hoe de flex-elementen worden geplaatst;Voorbeelden:
Toepassing:
<DIV style="flex-wrap: wrap-reverse;"> Voorbeeldtekst </DIV>float:
De float property is een CSS property dat bepaalt of een element aan de linker- of rechterkant van een ander element wordt geplaatst. Het element waarop de float property is toegepast, wordt aan de rand van het element gezet en de rest van de elementen worden om dit element heen gevouwen.Voorbeelden:
Toepassing:
<DIV style="float: none;"> Voorbeeldtekst </DIV>font:
De font property is een CSS property die de stijl, grootte, gewicht en lettertype van de tekst van een element bepaalt. Het wordt meestal gebruikt om de tekst op een webpagina aan te passen.Voorbeelden:
Toepassing:
<DIV style="font: lighter;"> Voorbeeldtekst </DIV>font-family:
De font-family property is een CSS property die het lettertype bepaalt van een element. De font-family property geeft de naam van het lettertype aan dat gebruikt moet worden in de stijl van het element.Voorbeelden:
Toepassing:
<DIV style="font-family: Courier New;"> Voorbeeldtekst </DIV>font-feature-settings:
De font-feature-settings property geeft gebruikers de mogelijkheid om te kiezen welke lettertypesetting-functies ze willen gebruiken voor een bepaalde tekst. Hiermee kan een tekst worden aangepast aan specifieke behoeften. Bijvoorbeeld, het kunnen inschakelen van lettertype-ligatures, kleine hoofdletters, figure-sets, contextuele alternatieven, etc.Voorbeelden:
Toepassing:
<DIV style="font-feature-settings: "dlig", "smcp";"> Voorbeeldtekst </DIV>font-kerning:
De font-kerning property stelt de gebruiker in staat om de ruimte tussen twee karakters te regelen die naast elkaar staan. Op deze manier kunnen kleine aanpassingen worden gedaan aan het lettertype om de leesbaarheid te verbeteren.Voorbeelden:
Toepassing:
<DIV style="font-kerning: auto;"> Voorbeeldtekst </DIV>font-size:
De font-size property stelt de gebruiker in staat om de grootte van de tekst aan te passen. De waarde kan worden vastgelegd in verschillende eenheden, waaronder pixels, pt, em, etc.Voorbeelden:
Toepassing:
<DIV style="font-size: 1.2em;"> Voorbeeldtekst </DIV>font-size-adjust:
De font-size-adjust eigenschap stelt u in staan om de verschillen tussen verschillende lettertypen te verminderen. Met deze eigenschap kun je de afmetingen van de lettertypen aanpassen om een uniforme ervaring te creëren, ongeacht welk lettertype wordt weergegeven.Voorbeelden:
Toepassing:
<DIV style="font-size-adjust: 0.9;"> Voorbeeldtekst </DIV>font-stretch:
De font-stretch eigenschap stelt u in staat om de breedte van de lettertypen te veranderen. Hiermee kunt u de breedte van de lettertypen aanpassen om verschillen tussen verschillende lettertypen te verminderen.Voorbeelden:
Toepassing:
<DIV style="font-stretch: ultra-expanded;"> Voorbeeldtekst </DIV>font-style:
De font-style eigenschap stelt u in staat om de stijl van de lettertypen te veranderen. Met deze eigenschap kunt u de stijl van de lettertypen aanpassen naar normaal, oblique of italic.Voorbeelden:
Toepassing:
<DIV style="font-style: oblique;"> Voorbeeldtekst </DIV>font-variant:
De font-variant property stelt de lettervarianten in van het geselecteerde lettertype.Voorbeelden:
Toepassing:
<DIV style="font-variant: small-caps;"> Voorbeeldtekst </DIV>font-variant-ligatures:
De font-variant-ligatures property stelt de letterverbindingen in die gebruikt worden bij het weergeven van teksten.Voorbeelden:
Toepassing:
<DIV style="font-variant-ligatures: none;"> Voorbeeldtekst </DIV>font-weight:
De font-weight property stelt de dikte (gewicht) in van het geselecteerde lettertype.Voorbeelden:
Toepassing:
<DIV style="font-weight: lighter;"> Voorbeeldtekst </DIV>hanging-punctuation:
Hanging-punctuation is een CSS-eigenschap die bepaalt of interpunctie aan het begin of het einde van een tekstregel hangt. Het geeft de tekst meer consistentie en een professionele look. Deze eigenschap heeft geen invloed op de leesbaarheid van de tekst, maar kan de lezer helpen de stukken tekst beter te begrijpen door het organiseren van de interpunctie in een consistent patroon.Voorbeelden:
Toepassing:
<DIV style="hanging-punctuation: none;"> Voorbeeldtekst </DIV>height:
De CSS-eigenschap 'height' geeft aan hoe hoog een HTML-element is. De waarde wordt gemeten in pixels. Als de waarde 'auto' is ingesteld, zal de browser de hoogte van het element automatisch aanpassen aan de inhoud ervan.Voorbeelden:
Toepassing:
<DIV style="height: minmax();"> Voorbeeldtekst </DIV>justify-content:
Justify-content is een CSS-eigenschap die bepaalt hoe flex-items geregeld worden op de hoofdas van een flex-container. Deze eigenschap bepaalt ook hoe de flex-items verdeeld worden over de resterende ruimte.Voorbeelden:
Toepassing:
<DIV style="justify-content: right;"> Voorbeeldtekst </DIV>left:
De left property is een eigenschap die gebruikt wordt om een element te positioneren relatief ten opzichte van de linkermarge van een element. Als de waarde 0 is, zal het element aan de linkerkant van de pagina worden geplaatst; als de waarde -10px is, zal het element 10 pixels naar links worden verplaatstVoorbeelden:
Toepassing:
<DIV style="left: -10px;"> Voorbeeldtekst </DIV>letter-spacing:
De letter-spacing property is een eigenschap die gebruikt wordt om de letterruimte tussen tekens te bepalen. De letterruimte wordt gespecificeerd in pixels of ems. Als de waarde 0 is, zal er geen extra ruimte tussen de tekens worden toegevoegd; als de waarde 5px is, zal er 5 pixels extra ruimte tussen de tekens worden toegevoegd.Voorbeelden:
Toepassing:
<DIV style="letter-spacing: -10px;"> Voorbeeldtekst </DIV>line-height:
De line-height property is een eigenschap die gebruikt wordt om de verticale ruimte tussen regels te bepalen. De line-height wordt gespecificeerd in pixels of eenheden. Als de waarde 1.2 is, zal de verticale ruimte tussen regels 20% groter zijn dan de standaard fontgrootte; Als de waarde 2 is, zal de verticale ruimte tussen regels twee keer zo groot zijn als de standaard fontgrootte.Voorbeelden:
Toepassing:
<DIV style="line-height: -10px;"> Voorbeeldtekst </DIV>list-style:
list-style definieert de verschillende stijlen die gebruikt kunnen worden voor een lijst, zoals een bullet of nummerieke stijlVoorbeelden:
Toepassing:
<DIV style="list-style: decimal;"> Voorbeeldtekst </DIV>list-style-image:
list-style-image definieert een afbeelding die gebruikt kan worden als bullet voor een lijstVoorbeelden:
Toepassing:
<DIV style="list-style-image: url("img_bullet.gif");"> Voorbeeldtekst </DIV>list-style-position:
list-style-position definieert of de bullets buiten of binnen de lijst staanVoorbeelden:
Toepassing:
<DIV style="list-style-position: outside;"> Voorbeeldtekst </DIV>list-style-type:
list-style-type is een css property die wordt gebruikt om aan te geven hoe een lijst wordt weergegeven. Het kan zowel een afbeelding als een tekstsymbool zijn. Het bepaalt de manier waarop lijsten worden weergegeven;Voorbeelden:
Toepassing:
<DIV style="list-style-type: none;"> Voorbeeldtekst </DIV>margin:
margin is een css property die wordt gebruikt om de afstand tussen elementen in te stellen. Het is een waarde die wordt toegekend aan alle vier de randen van een element. Deze waarde bepaalt de afstand tussen de randen van het element en andere elementen;Voorbeelden:
Toepassing:
<DIV style="margin: auto;"> Voorbeeldtekst </DIV>margin-bottom:
margin-bottom is een css property die wordt gebruikt om de afstand tussen het element en de onderrand van het element in te stellen. Het is een waarde die wordt toegekend aan de onderrand van het element. Deze waarde bepaalt de afstand tussen de onderrand van het element en andere elementen;Voorbeelden:
Toepassing:
<DIV style="margin-bottom: auto;"> Voorbeeldtekst </DIV>margin-left:
Margin-left geeft de linker-marge van een element aan. Het bepaalt hoe ver het element vanaf de linker kant verschoven wordt. Het is een manier om de afstand tussen twee elementen te bepalen.Voorbeelden:
Toepassing:
<DIV style="margin-left: auto;"> Voorbeeldtekst </DIV>margin-right:
Margin-right geeft de rechter-marge van een element aan. Het bepaalt hoe ver het element vanaf de rechter kant verschoven wordt. Het is een manier om de afstand tussen twee elementen te bepalen.Voorbeelden:
Toepassing:
<DIV style="margin-right: auto;"> Voorbeeldtekst </DIV>margin-top:
Margin-top geeft de boven-marge van een element aan. Het bepaalt hoe ver het element vanaf de boven kant verschoven wordt. Het is een manier om de afstand tussen twee elementen te bepalen.Voorbeelden:
Toepassing:
<DIV style="margin-top: auto;"> Voorbeeldtekst </DIV>max-height:
max-height definieert de maximale hoogte van een element. Indien de inhoud groter is dan de max-height, zal deze op de max-height worden beperkt;Voorbeelden:
Toepassing:
<DIV style="max-height: auto;"> Voorbeeldtekst </DIV>max-width:
max-width definieert de maximale breedte van een element. Indien de inhoud breder is dan de max-width, zal deze op de max-width worden beperkt;Voorbeelden:
Toepassing:
<DIV style="max-width: auto;"> Voorbeeldtekst </DIV>min-height:
min-height definieert de minimale hoogte van een element. Indien de inhoud kleiner is dan de min-height, zal deze op de min-height worden beperkt;Voorbeelden:
Toepassing:
<DIV style="min-height: auto;"> Voorbeeldtekst </DIV>min-width:
De min-width property is bedoeld om de minimale breedte van een element te bepalen, waardoor het element niet kleiner kan worden dan de opgegeven waarde. Dit betekent dat de breedte van het element zal worden beperkt door de min-width waarde, ook als de inhoud groter is dan de waarde.Voorbeelden:
Toepassing:
<DIV style="min-width: 2in;"> Voorbeeldtekst </DIV>nav-down:
De nav-down property is bedoeld om de navigatiebalk naar beneden te verschuiven, waardoor de gebruiker de navigatiebalk kan blijven zien nadat hij de pagina scrollt. Deze property wordt vaak gebruikt om de navigatiebalk zichtbaar te houden voor de gebruiker.Voorbeelden:
Toepassing:
<DIV style="nav-down: 2in;"> Voorbeeldtekst </DIV>nav-index:
De nav-index property is bedoeld om de volgorde van de elementen in de navigatiebalk te bepalen. Deze property bepaalt welke elementen als eerste zullen worden weergegeven, welke als tweede en zo verder. Deze property is vooral handig als er meerdere elementen in de navigatiebalk zijn en elk element een andere volgorde moet hebben.Voorbeelden:
Toepassing:
<DIV style="nav-index: 2in;"> Voorbeeldtekst </DIV>nav-left:
De nav-left property stelt de positie van een element in dat links van de pagina wordt weergegeven. Het wordt meestal gebruikt voor navigatie-elementen zoals links naar andere pagina's. Deze property wordt gebruikt om een element te plaatsen op een specifieke plaats op het scherm.Voorbeelden:
Toepassing:
<DIV style="nav-left: 20px;"> Voorbeeldtekst </DIV>nav-right:
De nav-right property stelt de positie in van een element dat rechts van de pagina wordt weergegeven. Het wordt meestal gebruikt voor navigatie-elementen zoals links naar andere pagina's. Deze property wordt gebruikt om een element te plaatsen op een specifieke plaats op het scherm.Voorbeelden:
Toepassing:
<DIV style="nav-right: 20px;"> Voorbeeldtekst </DIV>nav-up:
De nav-up property stelt de positie in van een element dat bovenaan de pagina wordt weergegeven. Het wordt meestal gebruikt voor navigatie-elementen zoals links naar andere pagina's. Deze property wordt gebruikt om een element te plaatsen op een specifieke plaats op het scherm.Voorbeelden:
Toepassing:
<DIV style="nav-up: 20px;"> Voorbeeldtekst </DIV>opacity:
De opacity property bepaalt de mate waarin een element zichtbaar is. Het bepaalt hoeveel van de achtergrond door het element wordt bedekt en als het element al dan niet door andere lagen wordt bedekt. De waarde van opacity is een numerieke waarde tussen 0.0 en 1.0., waarbij 0.0 helemaal transparant is en 1.0 helemaal niet transparant is.Voorbeelden:
Toepassing:
<DIV style="opacity: 0.9;"> Voorbeeldtekst </DIV>order:
Order property is een flex-box layout property. De order property bepaalt de volgorde waarin elementen binnen een flex-box worden geplaatst. De waarden van order zijn positieve integers, waarbij hogere waarden zich verder naar rechts of onderaan bevinden.Voorbeelden:
Toepassing:
<DIV style="order: 0.9;"> Voorbeeldtekst </DIV>outline:
Outline is een CSS property die een element omlijnt. Het geeft een lijn aan de buitenkant van het element die als afbakening wordt gebruikt. Outline wordt meestal gebruikt om elementen te markeren. Er zijn verschillende waarden waarmee de lijn kan worden aangepast, zoals de kleur, dikte en stijl.Voorbeelden:
Toepassing:
<DIV style="outline: 2px double #999;"> Voorbeeldtekst </DIV>outline-color:
De outline-color property is een eigenschap die de kleur van de omlijning van een element bepaalt. De omlijning wordt meestal gebruikt om het gebied van een element te markeren. De outline-color property krijgt dezelfde waarde als de color property als deze niet is ingesteld.Voorbeelden:
Toepassing:
<DIV style="outline-color: #0000FF;"> Voorbeeldtekst </DIV>outline-offset:
De outline-offset property is een eigenschap die de afstand bepaalt tussen het element en de omlijning. De omlijning wordt meestal gebruikt om het gebied van het element te markeren. De waarde van de outline-offset property kan een negatief getal zijn.Voorbeelden:
Toepassing:
<DIV style="outline-offset: -5px;"> Voorbeeldtekst </DIV>outline-style:
De outline-style property is een eigenschap die de stijl van de omlijning van een element bepaalt. De outline-style property wordt meestal gebruikt om het gebied van een element te markeren. Als de outline-style property niet is ingesteld, heeft het element geen omlijning.Voorbeelden:
Toepassing:
<DIV style="outline-style: double;"> Voorbeeldtekst </DIV>outline-width:
Outline-width definieert de breedte van het outline element. Het outline element is een lijn die wordt weergegeven rondom een geselecteerd element. De breedte van de lijn wordt bepaald door de outline-width waarde.Voorbeelden:
Toepassing:
<DIV style="outline-width: 3px;"> Voorbeeldtekst </DIV>overflow:
De overflow property definieert wat er moet gebeuren als het content element groter is dan de omvang van het element waar het in staat. Overflow kan ingesteld worden om content te verbergen, te scrollen of om een scrollbalk te tonen.Voorbeelden:
Toepassing:
<DIV style="overflow: auto;"> Voorbeeldtekst </DIV>overflow-x:
De overflow-x property definieert wat er moet gebeuren als het content element groter is dan de omvang van het element waar het in staat in de horizontale richting. Overflow-x kan ingesteld worden om content te verbergen, te scrollen of om een scrollbalk te tonen.Voorbeelden:
Toepassing:
<DIV style="overflow-x: auto;"> Voorbeeldtekst </DIV>overflow-y:
Overflow-y is een CSS eigenschap die wordt gebruikt om aan te geven hoe de content wordt vertoond als deze buiten het element valt waar de eigenschap aan is toegekend. Als de inhoud van het element groter is dan de hoogte van het element, wordt de inhoud buiten de rand van het element geschreven. Het biedt ook de mogelijkheid om de inhoud te verbergen of scrollbalken toe te voegen aan een element om de inhoud te bekijken.Voorbeelden:
Toepassing:
<DIV style="overflow-y: auto;"> Voorbeeldtekst </DIV>padding:
Padding is een CSS eigenschap die wordt gebruikt om de binnenruimte van een element te definiëren. De waarde van deze eigenschap is de afstand van de content tot de rand van het element. Padding kan worden gebruikt om het uiterlijk van een webpagina te beïnvloeden en om de leesbaarheid van de inhoud te verbeteren.Voorbeelden:
Toepassing:
<DIV style="padding: 10px;"> Voorbeeldtekst </DIV>padding-bottom:
Padding-bottom is een CSS eigenschap die wordt gebruikt om de onderkant van een element te definiëren. De waarde van deze eigenschap is de afstand van de content tot de onderkant van het element. Padding-bottom kan worden gebruikt om het uiterlijk van een webpagina te beïnvloeden en om de leesbaarheid van de inhoud te verbeteren.Voorbeelden:
Toepassing:
<DIV style="padding-bottom: 15em;"> Voorbeeldtekst </DIV>padding-left:
De padding-left property definieert de linker-padding van een element. De linker-padding is de ruimte tussen het linkerrand van het element en de inhoud van het element;Voorbeelden:
Toepassing:
<DIV style="padding-left: 25%;"> Voorbeeldtekst </DIV>padding-right:
De padding-right property definieert de rechter-padding van een element. De rechter-padding is de ruimte tussen het rechterrand van het element en de inhoud van het element;Voorbeelden:
Toepassing:
<DIV style="padding-right: 25%;"> Voorbeeldtekst </DIV>padding-top:
De padding-top property definieert de boven-padding van een element. De boven-padding is de ruimte tussen het bovenrand van het element en de inhoud van het element;Voorbeelden:
Toepassing:
<DIV style="padding-top: 25%;"> Voorbeeldtekst </DIV>page-break-after:
De page-break-after property bepaalt hoe een element wordt weergegeven na een pagina-einde. Met deze property kun je een pagina-einde forceren na het element, waarbij het element op de volgende pagina wordt gestart.Voorbeelden:
Toepassing:
<DIV style="page-break-after: right;"> Voorbeeldtekst </DIV>page-break-before:
De page-break-before property bepaalt hoe een element wordt weergegeven voor een pagina-einde. Met deze property kun je een pagina-einde forceren voor het element, waarbij het element op de volgende pagina wordt gestart.Voorbeelden:
Toepassing:
<DIV style="page-break-before: right;"> Voorbeeldtekst </DIV>page-break-inside:
De page-break-inside property bepaalt of een element gebroken mag worden bij een pagina-einde. Met deze property kun je voorkomen dat een element gesplitst wordt over twee pagina's.Voorbeelden:
Toepassing:
<DIV style="page-break-inside: avoid;"> Voorbeeldtekst </DIV>perspective:
De css property perspective definieert het perspectief dat van toepassing is op een element en alle elementen daaronder. Het perspectief definieert hoe ver een element lijkt te verwijderen van het scherm wanneer je erin kijkt. Als je een waarde instelt voor perspective, worden alle transformaties die je maakt vanaf dat punt gerelateerd aan die perspectief.Voorbeelden:
Toepassing:
<DIV style="perspective: 1000px;"> Voorbeeldtekst </DIV>perspective-origin:
De css property perspective-origin definieert waar het perspectief zich bevindt. De waarde van deze eigenschap bepaalt waar het perspectief begint, waardoor de bezienswaardigheden gerelateerd aan dat punt verschuiven naarmate het perspectief verandert.Voorbeelden:
Toepassing:
<DIV style="perspective-origin: bottom right;"> Voorbeeldtekst </DIV>position:
De css property position definieert de positie van een element binnen een container. De waarde van deze eigenschap bepaalt hoe het element wordt geplaatst en waar het element wordt weergegeven. Deze eigenschap is een van de meest gebruikte eigenschappen in css.Voorbeelden:
Toepassing:
<DIV style="position: fixed;"> Voorbeeldtekst </DIV>quotes:
De quotes property definieert welke karakters worden gebruikt als aanhalingstekens in een geciteerde tekst.Voorbeelden:
Toepassing:
<DIV style="quotes: "single quotes";"> Voorbeeldtekst </DIV>resize:
De resize property definieert of een element resizable is en hoe het kan worden vergroot of verkleind.Voorbeelden:
Toepassing:
<DIV style="resize: vertical;"> Voorbeeldtekst </DIV>right:
De right property definieert de positie van een element aan de rechterkant.Voorbeelden:
Toepassing:
<DIV style="right: 20%;"> Voorbeeldtekst </DIV>tab-size:
De tab-size property is gebruikt om de afmeting van een tab in een tekstdocument te definiëren. De waarde wordt gespecificeerd in termen van aantal kolommen. De tab-size property wordt meestal gebruikt voor het schrijven van code;Voorbeelden:
Toepassing:
<DIV style="tab-size: 20%;"> Voorbeeldtekst </DIV>table-layout:
De table-layout property definieert de volgorde waarin de cellen in een tabel worden geladen. Deze property bepaalt ook hoe breed de cel is. Het is belangrijk om te weten dat deze property alleen werkt op tabellen met een vaste breedte;Voorbeelden:
Toepassing:
<DIV style="table-layout: fixed;"> Voorbeeldtekst </DIV>text-align:
De text-align property is gebruikt om de horizontale uitlijning van tekst binnen een element te definiëren. Tekst kan worden uitgelijnd naar links, rechts, het midden of naar beide kanten;Voorbeelden:
Toepassing:
<DIV style="text-align: justify;"> Voorbeeldtekst </DIV>text-align-last:
text-align-last bepaalt hoe de zin wordt uitgelijnd in de laatste lijn van een paragraaf. Het kan worden ingezet om de laatste lijn te laten beginnen op een bepaalde positieVoorbeelden:
Toepassing:
<DIV style="text-align-last: justify;"> Voorbeeldtekst </DIV>text-decoration:
text-decoration definieert de decoratie van een tekst. Deze decoratie kan de kleur, lijnstijl en de positie van de lijn bevatten;Voorbeelden:
Toepassing:
<DIV style="text-decoration: blink;"> Voorbeeldtekst </DIV>text-decoration-color:
text-decoration-color bepaalt de kleur van de tekstdecoratie;Voorbeelden:
Toepassing:
<DIV style="text-decoration-color: hsla(0,0%,0%,0.5);"> Voorbeeldtekst </DIV>text-decoration-line:
text-decoration-line geeft de afbeelding van de lijn die wordt toegevoegd aan de tekst, zoals onderstrepen, doorgaande lijnen, bovenstreep. Het kan ook geen lijn toevoegen of meerdere lijnen tegelijkertijd.Voorbeelden:
Toepassing:
<DIV style="text-decoration-line: line-through;"> Voorbeeldtekst </DIV>text-decoration-style:
text-decoration-style bepaalt de stijl van de lijn die wordt toegevoegd aan de tekst. Het kan korte lijnen, kleine stipjes, golvende lijnen, etc. zijn, afhankelijk van de gekozen stijl.Voorbeelden:
Toepassing:
<DIV style="text-decoration-style: dashed;"> Voorbeeldtekst </DIV>text-indent:
text-indent specificeert de eerste regel van een paragraaf. Het kan een waarde in eenheid van pixels, procenten, of een andere meeteenheid hebben. Hiermee kun je de eerste regel van een paragraaf inspringen.Voorbeelden:
Toepassing:
<DIV style="text-indent: 2em;"> Voorbeeldtekst </DIV>text-justify:
text-justify is een css-eigenschap die de tekst uitlijnt binnen een element. Het bepaalt hoe de tekst wordt uitgelijnd met de breedte van het element. Er zijn vier mogelijke opties: left, right, center en justify.Voorbeelden:
Toepassing:
<DIV style="text-justify: justify;"> Voorbeeldtekst </DIV>text-overflow:
text-overflow is een css-eigenschap die wordt gebruikt om aan te geven wat er moet gebeuren als de content die in een element staat te groot is voor de aangegeven dimensies van het element. Er zijn twee mogelijke opties: clip en ellipsis.Voorbeelden:
Toepassing:
<DIV style="text-overflow: ellipsis;"> Voorbeeldtekst </DIV>text-shadow:
text-shadow is een css-eigenschap die wordt gebruikt om een schaduw toe te voegen aan tekst. Er zijn verschillende waarden die kunnen worden gebruikt om de schaduw aan te passen.Voorbeelden:
Toepassing:
<DIV style="text-shadow: 1px 1px 1px black:;"> Voorbeeldtekst </DIV>text-transform:
text-transform is een eigenschap van CSS die het lettertype van een tekst wijzigt. Deze eigenschap kan worden gebruikt om de tekst te veranderen in hoofdletters, kleine letters of een kapitalisatie-stijl zoals in een titel;Voorbeelden:
Toepassing:
<DIV style="text-transform: capitalize;"> Voorbeeldtekst </DIV>top:
top is een CSS-eigenschap die wordt gebruikt om de bovenrand van een element te positioneren. De waarde is een afstand in pixels of een percentage;Voorbeelden:
Toepassing:
<DIV style="top: 50%;"> Voorbeeldtekst </DIV>transform:
transform is een CSS-eigenschap die wordt gebruikt om elementen op een pagina te transformeren of te veranderen. Deze eigenschap kan een element draaien, schalen, verplaatsen, spiegelen en in 3D-ruimte draaien;Voorbeelden:
Toepassing:
<DIV style="transform: skewX(20deg);"> Voorbeeldtekst </DIV>transform-origin:
De transform-origin property bepaalt de originele positie waaruit een transformatie wordt uitgevoerd. Het kan worden gebruikt om een element te draaien, te schalen, af te platten of te verdraaien en is afhankelijk van de positie van de elementen op de pagina.Voorbeelden:
Toepassing:
<DIV style="transform-origin: bottom right;"> Voorbeeldtekst </DIV>transform-style:
De transform-style property bepaalt hoe 3D-elementen worden weergegeven. Het kan worden ingesteld als "flat" of "preserve-3d", waarbij de laatste optie de 3D-elementen als een echte 3D-laag laat zien.Voorbeelden:
Toepassing:
<DIV style="transform-style: preserve-3d;"> Voorbeeldtekst </DIV>transition:
De transition property maakt het mogelijk om overgangseffecten toe te voegen bij het veranderen van CSS-eigenschappen. De property geeft aan welke eigenschap moet worden gewijzigd en hoe lang het effect duurt.Voorbeelden:
Toepassing:
<DIV style="transition: width 5s linear;"> Voorbeeldtekst </DIV>transition-delay:
De transition-delay property geeft de vertraging aan in seconden of milliseconden voordat de transitie zal starten. Het is een afzonderlijke property die kan worden gebruikt om verschillende vertragingen voor verschillende eigenschappen te definiëren.Voorbeelden:
Toepassing:
<DIV style="transition-delay: 1500ms;"> Voorbeeldtekst </DIV>transition-duration:
De transition-duration property definieert de duur van de transitie. Het geeft de duur aan in seconden of milliseconden. De transitie duurt altijd even lang, ongeacht hoeveel eigenschappen er worden aangepast.Voorbeelden:
Toepassing:
<DIV style="transition-duration: 1500ms;"> Voorbeeldtekst </DIV>transition-property:
De transition-property property definieert welke eigenschap de transitie zal toepassen. Dit kan de naam zijn van de eigenschap, of "all" om alle eigenschappen te selecteren.Voorbeelden:
Toepassing:
<DIV style="transition-property: all;"> Voorbeeldtekst </DIV>transition-timing-function:
De transition-timing-functie is een CSS-propertie die de tijdsduur bepaalt waarbinnen een animatie verloopt. Deze propertie gebruikt een kenmerk-waarde paar dat wordt gebruikt om de tijd te bepalen die het duurt om een animatie te voltooien;Voorbeelden:
Toepassing:
<DIV style="transition-timing-function: step-end;"> Voorbeeldtekst </DIV>unicode-bidi:
De unicode-bidi propertie is een CSS-propertie die gebruikt wordt om te bepalen of tekst links-naar-rechts (LTR) of rechts-naar-links (RTL) wordt weergegeven. Deze propertie wordt gebruikt voor tekst in talen zoals het Hebreeuws, Arabisch en Farsi, die van rechts naar links worden gelezen;Voorbeelden:
Toepassing:
<DIV style="unicode-bidi: bidi-override;"> Voorbeeldtekst </DIV>vertical-align:
De vertical-align propertie is een CSS-propertie die gebruikt wordt om elementen te plaatsen binnen een lijn met andere elementen. Dit betekent dat als je een afbeelding plaatst binnen een lijn met tekst, je de afbeelding kunt positioneren zodat hij zich op dezelfde verticale lijn met de tekst bevindt;Voorbeelden:
Toepassing:
<DIV style="vertical-align: text-bottom;"> Voorbeeldtekst </DIV>visibility:
De visibility CSS-eigenschap bepaalt of een element wordt weergegeven of verborgen. De elementen die verborgen zijn, worden uit het document stroom verwijderd, maar ze blijven wel in het document bestaan.Voorbeelden:
Toepassing:
<DIV style="visibility: collapse;"> Voorbeeldtekst </DIV>white-space:
De white-space CSS-eigenschap bepaalt hoe overlooptekst wordt behandeld. Met deze eigenschap kun je bepalen of tekst mag worden overgelopen op een andere regel of niet.Voorbeelden:
Toepassing:
<DIV style="white-space: pre-line;"> Voorbeeldtekst </DIV>width:
De width CSS-eigenschap stelt de breedte van een element in. Het kan worden ingesteld op een absolute waarde (zoals 600px), een relatieve waarde (zoals 100%) of automatisch (let op: dit is niet hetzelfde als het instellen van de breedte op auto).Voorbeelden:
Toepassing:
<DIV style="width: min-content;"> Voorbeeldtekst </DIV>word-break:
De word-break property bepaalt hoe een woord mag worden gebroken als het niet binnen de breedte van een container past. Bijvoorbeeld, als iemand een lang woord typt dat niet past in de breedte van een container, dan kan deze property het woord op meerdere regels splitsen, waardoor het woord in de container past.Voorbeelden:
Toepassing:
<DIV style="word-break: break-word;"> Voorbeeldtekst </DIV>word-spacing:
Word-spacing is een property die de ruimte tussen woorden bepaalt. Deze ruimte is vooral te zien na de laatste letter van een woord en voor de eerste letter van de volgende woord. De waarde van deze property kan worden aangegeven in px, em of %.Voorbeelden:
Toepassing:
<DIV style="word-spacing: 20%;"> Voorbeeldtekst </DIV>word-wrap:
word-wrap is een CSS property die bepalend is voor de manier waarop de woorden in een paragraaf worden gevormd. Als word-wrap aan staat, zal de browser ervoor zorgen dat lange woorden die niet op een regel passen op de volgende regel worden gezet.Voorbeelden:
Toepassing:
<DIV style="word-wrap: break-word;"> Voorbeeldtekst </DIV>z-index:
z-index is een property in CSS waarmee je een element boven andere elementen kunt plaatsen. De waarde van de z-index bepaald hoe hoog een element op de pagina komt te staan, waardoor het boven andere elementen zal uitsteken.Voorbeelden:
Toepassing:
<DIV style="z-index: auto;"> Voorbeeldtekst </DIV>
preview
Responsive
https
Veilig
rocket
Snel