Search within TutorialsPark

CSS3 Properties Reference


A complete list of CSS properties and Reference.


Table: CSS3 Animation Properties.

Property Description Version
@keyframes To specify one or more keyframe for an animation
animation A shorthand to set the animation.
animation-delay To set a delay before the animation begins.
animation-direction To specify whether the animations should be played backwards on alternate cycles
animation-duration To set the time span over which the animation will be performed.
animation-fill-mode Transition is applied using a custom cubic bezier curve
animation-iteration-count To specify the number of times the animation will be performed
animation-name To specify the name of the animation
animation-timing-function To set the pace of the transition to next keyframe
animation-play-state To define whether an animation is running or paused.

CSS Border Properties.

Property Description Version
border A shorthand to set all the border properties in a single declaration
border-bottom To set the color, style and width of the bottom border
border-bottom-color To set the color for the bottom border.
border-bottom-style To set the style of the bottom border.
border-bottom-width To set the width of the top border.
border-color To set the color of each border
border-left To set the color, style and width of the left border
border-left-color To set the color of the left border
border-left-style To set the style of the left border
border-left-width To set the width of the left border
border-right Sets the color, style, and width of the right border
border-right-color Sets the color of the right border
border-right Sets the color, style, and width of the right border.
border-right-color Sets the color of the right border
border-right-style To set the style of the right border
border-right-width To set the width of the right border
border-style To set style of all the border in a single declaration
border-top To set the color, style and width of the top border
border-top-color To set the color of the top border.
border-top-style To set the style of the top border
border-top-width To set the width of the top border.
border-width To set the width of each border
outline Shorthand Property to set all three values in a single declaration
outline-color To set the color of the outline
outline-style To set the style of the outline
outline-width To set the width of the outline
outline-offset To set the offset distance between the outer border edge and inner outline edge.
border-bottom-left-radius To Set the radius for the bottom-left corner.
border-bottom-right-radius To set the radius for the bottom-right corner
border-image Shorthand to set all the value in a single declaration.
border-image-outset To specify how far the border image should extend beyond the border box.
border-image-repeat To specify how the slices are scaled and tiled along the horizontal and vertical edges.
border-image-slice Sets the offsets for slicing the image
border-image-source To specify the image to be used as borders
border-image-width To set the amount of space allocated to the border image on each side
border-radius A shorthand to set the curved edges for a border
border-top-left-radius To set the radius of the top left corner
border-top-right-radius To set the border of the top-right corner

CSS Background Properties.

Property Description Version
background A shorthand to set the background of an element
background-attachment To set the attachment style for background images
background-color To set the background color for an element.
background-image To set the background image of an element
background-position To position the background image.
background-clip To specify the clipping style for background images
background-origin To set the position from which the background-position is measured.
background-size To control the size of background images
background-repeat To control how background image is repeated if smaller than the element

CSS Text Properties.

Property Description Version
color The rate of transition remains constant from start to end
direction The transition begins quickly and then gradually slows down
letter-spacing To adjust the horizontal space in between characters.
line-height To specify the height of a line of text
text-align Controls whether the text is aligned to the left or right, centered, or justified.
text-decoration To draw a line under, over or through text
text-indent To Indent the first line of the text
text-transform To convert text to initial capitals, all uppercase, or all lowercase.
vertical-align To control the vertical alignment of inline elements.
white-space Controls how spaces and word wrapping are handled
word-spacing To adjust the width of the space character.
hanging-punctuation The transition begins quickly and stays quick longer than ease, and then slows down and ends abruptly
text-overflow Clips text that's too long to fit, optionally replacing with ellipsis.
text-shadow To specify a drop shadow for a block of text
word-break To specify how the word should break
word-wrap Allows long text, such as URL, to be broken if it would otherwise overflow

CSS Transform Properties.

Property Description Version
transform To specify the transform to be applied to an element
transform-origin To specify the anchor point of the transform
transform-style To define whether an element transformed in simulated 3D space, should have its children flat styled or use 3D effects.
perspective To create a view point from where the user can view 3D objects
perspective-origin To set the origin point of the element from where the perspective is to viewed.
backface-visibility To specify the backface visibility of the element

CSS Positioning Properties.

Property Description Version
position To control how an element is positioned
visbility Set the visibility of an element
z-index Sets the stacking order of positioned elements.
Display To set the display properties of an element.
float To shift an element to the left or right edge of its containing box.
clear Clears one or both edges of a floating element.
cursor Transition is applied using a custom cubic bezier curve
top To specify the top offset of the positioned element
bottom To specify the bottom offset of the positioned element
left To specify the left offset of the positioned element
right To specify the right offset of the positioned element
clip To Define the area of an absolutely positioned element that remains visible

CSS Table Properties

Property Description Version
border-collapse To specify how borders on adjacent cells are handled
border-spacing To specify the spacing between adjacent cell borders
caption-side To specify the location of the caption element
empty-cells To specify how borders are drawn on empty cells
table-layout To specify the layout style of the table.

CSS3 column Properties

Property Description Version
padding A shorthand to set the padding for all four edges
padding-bottom To set the padding for the bottom edge
padding-left To set the padding for the left edge.
padding-right To set the padding for the right edge
padding-top To set the padding for the top edge.

CSS Overflow Properties

Property Description Version
column-count To set the number of columns in a multicolumn layout
column-fill To specify how content should be distributed between the columns in a multicolumn layout
column-gap To specify the distance between columns in a multicolumn layout
column-rule-color To specify the color of the rule in a multicolumn layout
column-rule-style To specify the style of the rule in a multicolumn layout
column-rule-width To specify the width of the rule in a multicolumn layout.
column-span To specify how many columns an element should span in a multicolumn layout.
column-width To set the width of columns in a multicolumn layout.
columns A shorthand to set multiple column properties in a single declaration .

CSS Overflow Properties

Property Description Version
overflow Its used to control the horizontal and vertical overflow of a block or inline block
overflow-x Its used to control the horizontal overflow of a block or inline block
overflow-y Its used to control the vertical overflow of a block or inline block

CSS Transition Property

Property Description Version
transition To set the height of an element's box
transition-property To set the maximum height for the element
transition-duration To set the maximum width for the element
transition-timing-function To set the minimum height for the element
transition-delay To set the minimum width for the element

CSS font Properties

Property Description Version
font A shorthand to set fonts in a single declaration
font-family To specify the font family for a block of text
font-size To specify the size of the font for a block of text
font-style To specify the style for a font
font-variant To specify whether or not the text should be displayed in a small-caps font
font-weight To specify the weight(ot thickness) for a font
@font-face To specify a custom web font
font-size-adjust To set the minimum width for the element
font-stretch To set the width of an element

CSS Flex Properties

Property Description Version
align-content Aligns the flex container's row or columns within the flex container if there exists extra space on the cross axis.
align-items To set the default alignment for flex items on the cross axis.
align-self To override align-items for individual flex items
flex A shorthand property to set flex-grow, flex-shrink, and flex-basis in a single declaration
flex-basis To sets the initial main size of the flex item
flex-direction To set the direction of the main axis.
flex-flow Shorthand property for flex-direction and flex-wrap
flex-grow It determines how much the item will grow relative to other flex items when free space is distributed
flex-wrap To specify whether child elements can be forced into single lines or multiple lines
flex-shrink It determines how much the item will shrink relative to other flex items when there isn't sufficient space to fit them at their normal size.
order To specify the order of items within the flex-box.

CSS Size Properties

Property Description Version
height To set the height of an element's box
max-height To set the maximum height for the element
max-width To set the maximum width for the element
min-height To set the minimum height for the element
min-width To set the minimum width for the element
width To set the width of an element

CSS Generated Content Properties

Property Description Version
content Defines the content to be inserted by a pseudo element
counter-increment Increments the specified counter for a numbered sequence
counter-reset Resets the counter or creates it if it doesn't already exist
quotes To define the styles of quotation marks at any number of nested levels

CSS List Properties

Property Description Version
list-style A shorthand to set all list characteristic
list-style-image To specify an image to be used as list marker
list-style-position To specify the position of the list marker realtive to the list item box
list-style-type To specify the type of marker to be used in the list

Related Examples.