CSS kan worden gebruikt om de weergave van webpagina's te beheersen door middel van kleur, lettertype, lay-out, animatie en meer.
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>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>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>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>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>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>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>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>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>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>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>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