Property Reference

Next ❯Function Reference

PropertiesUsed
@font-faceTo create custom fonts
@keyframesTo create an animation frames
@mediaTo create a different style rules for different media types/devices
@importTo import external style sheet into another style sheet
align-content (in flex)To set the alignment of rows inside flex-container along y-axis
align-content (in grid)To set the alignment of rows inside grid-container along y-axis
align-items (in flex)To set the alignment of all flex-items inside flex-container along y-axis
align-items (in grid)To set the alignment of all the grid-items in their cell along y-axis
align-self (in flex)To set the alignment of selected flex-item along y-axis
align-self (in grid)To set the alignment of selected grid-item in their cell along y-axis
allTo reset all properties declared before 'all' property to their initial or inherited value except direction and unicode-bidi
animation-delayTo set the animation delay
animation-directionTo set the animation playing direction order
animation-durationTo set the time duration for an animation
animation-fill-modeTo set the style for the element when the animation is not playing
animation-iteration-countTo set the number of times an animation is going to play
animation-nameTo set the name of an @keyframes animation to play
animation-play-stateTo set the animation state to running or paused
animation-rangeTo set the start and end of an css animation's attachment range along its timeline
animation-timelineTo control the progress of a CSS animation
animation-timing-functionTo set the speed curve of an animation
animationTo set some animation related properties in one
aspect-ratioTo set an elament aspect ratio
backface-visibilityTo set the visibility of an element when facing opposite direction
backdrop-filterTo chenge the background visual effect of an element's back
background-attachmentTo set whether a background image is fixed or scrolls with the rest of the page
background-blend-modeTo set the blending mode for background layers
background-clipTo set the background clipping area
background-colorTo set the background color
background-imageTo set image or gradient as the background
background-originTo set the origin position of the background image
background-position-xTo set the position of the background image along x-axis
background-position-yTo set the position of the background image along y-axis
background-positionTo set the position of the background image along xy-axis
background-repeatTo set how to repeat the background image
background-sizeTo set the size of the background image
backgroundTo set the background related properties in one
border-bottom-colorTo set the bottom border color
border-bottom-left-radiusTo set the bottom-left radius
border-bottom-right-radiusTo set the bottom-right radius
border-bottom-styleTo set the bottom border style
border-bottom-widthTo set the bottom border width
border-bottomTo set all the bottom border related properties in one
border-collapseTo set whether to collapse table borders or not
border-colorTo set all the border color related properties in one
border-image-outsetTo set the border image space area length
border-image-repeatTo set how to repeat the border image
border-image-sliceTo set how to slice the border image
border-image-sourceTo set the image file path of a border image
border-image-widthTo set the width of the border image
border-imageTo set the border image related properties in one
border-left-colorTo set the left border color
border-left-styleTo set the left border style
border-left-widthTo set the left border width
border-leftTo set all the left border related properties in one
border-radiusTo set all the border radius related properties in one
border-right-colorTo set the right border color
border-right-styleTo set the right border style
border-right-widthTo set the right border width
border-rightTo set all the right border related properties in one
border-styleTo set all the border style related properties in one
border-spacing (in table)To set the space(Xspace Yspace) between the borders of adjacent table cells, only works when 'border-collapse : separate'
border-top-colorTo set the top border color
border-top-left-radiusTo set the top-left radius
border-top-right-radiusTo set the top-right radius
border-top-styleTo set the top border style
border-top-widthTo set the top border width
border-topTo set all the top border related properties in one
border-widthTo set all the bottom width related properties in one
borderTo set all the border related properties in one
bottomTo set the bottom position of a positioned element
box-shadowTo set the shadow to an element
box-sizingTo set how elements width and height are calculated
caption-sideTo set the position of table caption
caret-colorTo set the color of an input cursor
clearTo clear the float property effect
clip-pathTo show only clipping area of an element
colorTo set the text color
contentTo insert extra content while using : :before or : :after
counter-incrementTo increment the counter value
counter-resetTo create or reset a counter
cursorTo set the type of cursor to be displayed when pointing on an element
directionTo set the text direction
displayTo set the display type for an element
empty-cellsTo set whether to show or hide background and borders of the empty cells
filterTo change the visual effect of an element
flex-basisTo set the width of selected flex-item if available
flex-directionTo set the direction of flex-item
flex-flowTo set the flex-direction and flex-wrap properties in one
flex-growTo grow the selected flex-item relative to the other flex-items
flex-shrinkTo shrink the selected flex-item relative to the other flex-items
flex-wrapTo set whether the flex-items should wrap or not
flexTo set the flex-grow, flex-shrink, flex-basis properties in one
floatTo set the floating direction
font-familyTo set the text font family
font-sizeTo set the text font size
font-styleTo set the text font style
font-variantTo set the text font variant
font-weightTo set the text font weight
fontTo set the font related properties in one
grid-areaTo set area structure for grid-items
grid-auto-columnsTo set the extra grid-items width when number of grid-items exceeds the grid length
grid-auto-flowTo set the grid-items arranging order row-wise(default) or column-wise
grid-auto-rowsTo set the extra grid-items height when number of grid-items exceeds the grid length
grid-column-endTo set the selected grid-item ending column-line
grid-column-gapNow as column-gap, To set the gap between the columns
grid-column-startTo set the selected grid-item starting column-line
grid-columnTo set grid-column-start & grid-column-end properties in one
grid-gapNow as gap, To set grid-column-gap & grid-row-gap properties in one
grid-row-endTo set the selected grid-item ending row-line
grid-row-gapNow as row-gap, To set the gap between the rows
grid-row-startTo set the selected grid-item starting row-line
grid-rowTo set grid-row-start & grid-row-end properties in one
grid-template-areasTo set area structure for grid-items
grid-template-columnsTo set the number of columns of a grid and specify the width of it
grid-template-rowsTo set the number of rows of a grid and specify the height of it
grid-templateTo set grid-template related properties in one
gridTo set grid-template, grid-template-rows, grid-template-columns, grid-auto-flow, grid-auto-columns and grid-auto-rows properties in one
heightTo set the height of an element
insetTo set 'top right left bottom' all at once of an element
justify-content (in flex)To set the alignment of columns inside flex-container along x-axis
justify-content (in grid)To set the alignment of columns inside grid-container along x-axis
justify-itemsTo set the alignment of all the grid-items in their cell along x-axis
justify-selfTo set the alignment of selected grid-item according to its value inside their cell along x-axis
leftTo set the left position of a positioned element
letter-spacingTo set the length of space between letters
line-heightTo set the line height
list-style-imageTo set the list style image
list-style-positionTo set the list style position
list-style-typeTo set the list style type
list-styleTo set the list style related properties in one
margin-bottomTo set the bottom margin
margin-leftTo set the left margin
margin-rightTo set the right margin
margin-topTo set the top margin
marginTo set the margin related properties in one
maskTo mask an element
mask-clipTo set the area that is affected by the mask image
mask-compositeTo setthe compositing operation used on the current masked layer
mask-imageTo set the mask image source
mask-modeTo set the masking mode of the mask image
mask-originTo set the origin of a mask
mask-positionTo set the position of the mask image
mask-repeatTo set any repetition of the mask image along XY axis
mask-sizeTo set the size of mask image
max-heightTo set the maximum height for an element
max-widthTo set the maximum width for an element
min-heightTo set the minimum height for an element
min-widthTo set the minimum width for an element
mix-blend-modeTo blend the current element's content with its parent background
object-fitTo set the appearance of an image or a video inside a specific size
object-positionTo set the position of an image or a video inside a specific size
opacityTo set the opacity of an element
orderTo sort the flex-items in the specified order
outline-colorTo set the outline color
outline-offsetTo set the outline space area length between outline & border
outline-styleTo set the outline style
outline-widthTo set the outline width
outlineTo set outline related properties in one
overflow-xTo set overflow along x-axis
overflow-yTo set overflow along y-axis
overflowTo set overflow related properties in one
overscroll-behaviorTo stop default behavior like forward/backward/pull-to-refresh at xy-axis
overscroll-behavior-xTo stop default behavior like forward/backward/ along x-axis
overscroll-behavior-yTo stop default behavior pull-to-refresh aling y-axis
padding-bottomTo set the bottom padding
padding-leftTo set the left padding
padding-rightTo set the right padding
padding-topTo set the top padding
paddingTo set the padding related properties in one
perspective-originTo change the perspective position of 3D transformed element's child element
perspectiveTo set the perspective view for a 3D transformed element's child element
place-contentTo set the align-content & justify-content in one
place-itemsTo set the align-items & justify-items in one
place-selfTo set the align-self & justify-self in one
pointer-eventsTo control whether the pointer based events will trigger or not, if any
positionTo set the position type of an element
resizeTo set whether an element is resizable or not by the user
rightTo set the right position of a positioned element
scroll-behaviorTo set the behavior for a scrolling
scroll-snap-type
scroll-snap-align
scroll-snap-stop
srcTo set the custom font family file path in @font-face
table-layoutTo set the table layout
text-align-lastTo set the alignment of text last line
text-alignTo set the alignment of text along x-axis
text-decoration-colorTo set the text decoration color
text-decoration-lineTo set the text decoration line
text-decoration-styleTo set the text decoration style
text-decorationTo set the text decoration related properties in one
text-indentTo set the text first line position from its actual position
text-overflowTo set how to show the overflowed text
text-shadowTo set the text shadow
text-transformTo set the text case
topTo set the top position of a positioned element
touch-actionTo restrict touch related controls
transform (for 2D)To transform an element in 2D
transform (for 3D)To transform an element in 3D
transform-originTo change the position of 2D or 3D transformed elements
transform-styleTo set how 3D transformed element's child elements are look like in 3D space
transition-delayTo set the transition delay
transition-durationTo set the time duration for the transition
transition-propertyTo set the property name for which transition will occur
transition-timing-functionTo set the speed curve of a transition
transitionTo set the transition related properties in one
user-selectTo control the user selection
vertical-alignTo align an element vertically
visibilityTo set the visibility of an element
white-spaceTo set how white-space inside an element is handled
widthTo set the width of an element
word-breakTo set how words will break
word-spacingTo set the length of white space between words
word-wrapTo set how long words will break
writing-modeTo set the text writing mode
z-indexTo set the position of a positioned element along z-axis

-webkit-text-strokeTo set text stroke width and color
-webkit-text-stroke-widthTo set text stroke width
-webkit-text-stroke-colorTo set text stroke color

Extra PropertyUsed
will-changeTo hint browsers, which css-property is expected to change in an element (Properties are separated by comma) 
will-change:auto|contents|scroll-position|css-properties;

  • Function Reference
❮ Prev Units
Next ❯Function Reference
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯