Stylin’ with CSS

The Blog and Books of Charles Wyke-Smith

CSS3 Selectors Reference List

Animation
Property Description Values
@keyframes Allows you to create animations using CSS namekeyframe selectorkeyframe declaration
animation A shorthand property for setting multiple animation properties in one declaration namedurationtiming_functiondelayiteration_countdirection
animation-delay Allows you to specify how long the animation should wait until it starts playing time
animation-direction Allows you to specify which direction an animation will be played in normalreversealternatealternate-reverse
animation-duration Allows you to specify how long your animation will take to complete one cycle time
animation-fill-mode Allows you to define what values are applied by the animation outside the time it is executing noneforwardsbackwardsboth
animation-iteration-count Allows you to specify how many iterations - or cycles - the animation will play infinitenumber
animation-name Allows you to specify a name for your animation name
animation-play-state Allows you to specify whether an animation is running or paused runningpaused
animation-timing-function Allows you to specify how an animation will progress over one cycle of its duration easelinearease-inease-outease-in-outcubic-bezierstep-startstep-endsteps
Back to Top  
Background
Property Description Values
background-clip Sets the clipping behavior for the background of an element border-boxpadding-boxcontent-box
background-origin Sets the background positioning area of an element border-boxpadding-boxcontent-box
background-size Sets the dimensions of a background image containcoverlengthpercentageauto
Back to Top  
Border Images
Property Description Values
border-image A shorthand property for setting multiple border-image related properties in one declaration background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
border-image-outset Used for defining how much a border image area extends beyond the border box scrollfixed
border-image-repeat Used for defining how the images for the middle part and sides of the border are scaled and tiled stretchrepeatroundspace
border-image-source Used for specifying an image location to be used as a border noneimage
border-image-slice Used for specifying inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle numberpercentagefill
border-image-width Used for specifying offsets that are used to divide the border image area into nine parts (i.e. four corners, four edges and a middle) numberpercentagefill
Back to Top  
Border Radius
Property Description Values
border-radius A shorthand property for setting multiple border-radius related properties in one declaration lengthpercentage
border-top-left-radius Sets the border radius on the top-left corner lengthpercentage
border-top-right-radius Sets the border radius on the top-right corner lengthpercentage
border-bottom-left-radius Sets the border radius on the bottom-left corner lengthpercentage
border-bottom-right-radius Sets the border radius on the bottom-right corner lengthpercentage
Back to Top  
Marquee
Property Description Values
marquee-direction Used for specifying the direction of a marquee forwardreverse
marquee-play-count Used for specifying the number of iterations - or loops - that a marquee performs before it stops playing non-negative integer'infinite
marquee-speed Used for specifying the speed of a marquee slownormalfast
marquee-style Used for specifying the style - or behavior - of a marquee scrollslidealternate
Back to Top  
Miscellaneous
Property Description Values
box-decoration-break Allows developers to specify what happens to an element when it is broken due to a page break or column break, or for inline elements, a line break sliceclone
box-shadow Used for attaching one or more drop shadows to an HTML element nonehorizontal_offsetvertical_offsetblurspread_distancecolorinset
opacity Allows you to specify a level of opacity against an object so that it becomes semi-transparent, or even fully transparent inheritalphavalue
Back to Top  
Multi-Column
Property Description Values
break-after Allows you to force a break after an element autoalwaysavoidleftrightpagecolumnavoid-pageavoid-column
break-before Allows you to force a break before an element autoalwaysavoidleftrightpagecolumnavoid-pageavoid-column
break-inside Allows you to prevent an unwanted break within a multi-column layout autoavoidavoid-pageavoid-column
columns A shorthand property for setting multiple column related properties in one declaration column-widthcolumn-count
column-count Allows you to specify the number of columns in your multi-column layout numberauto
column-fill Allows you to balance content equally between columns on a multi-column layout autobalance
column-gap Allows you to specify the size of the gap between columns in your multi-column layout lengthnormal
column-rule A shorthand property for setting multiple column rule related properties in one declaration column-rule-widthcolumn-rule-stylecolumn-rule-color
column-rule-color Allows you to set the color of the column rule between columns on a multi-column layout color
column-rule-style Allows you to set the style of the column rule between columns on a multi-column layout nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
column-rule-width Allows you to set the width of the column rule between columns on a multi-column layout thinmediumthickexplicit width
column-width Allows content to span across multiple columns on a multi-column layout noneall
column-span Allows you to specify the width of the columns in multi-column layouts autofixed length
Back to Top  
Overflow
Property Description Values
Overflow A shorthand property for setting the overflow-x and overflow-y properties in one declaration visiblehiddenscrollautono-displayno-content
overflow-x Sets the clipping behavior for the right and left edges of an element visiblehiddenscrollautono-displayno-content
overflow-y Sets the clipping behavior for the top and bottom edges of an element visiblehiddenscrollautono-displayno-content
overflow-style Used for specifying the scrolling method/s for elements that overflow automarquee-linemarquee-block
Back to Top  
Transform
Property Description Values
backface-visibility Sets whether the back of the element is visible when it has been rotated and its back is facing the user visiblehidden
perspective Used to adjust the position of a 3D element in relation to the user in order to provide a 3D perspective nonelength
perspective-origin Used to determine the vanishing point for a 3D effect For x-positionpercentagelengthleftrightcenterFor y-positionpercentagelengthtopbottomcenter
transform Used to transform an element in two-dimensional or three-dimensional space matrix (number number number number number number)translate (translation-value translation-value)translateX (translation-value)translateY (translation-value)scale (number number)scaleX (number)scaleY (number)rotate (angle)skewX (angle)skewY (angle)
transform-origin Allows you to define the origin for the transformation of an element For x-axispercentagelengthleftrightcenterFor y-axispercentagelengthtopbottomFor z-axislength
transform-style Used to determine whether child elements (of a 3D element) should be 3D or flat. preserve-3dflat
Back to Top  
Transition
Property Description Values
transition A shorthand property for setting the four transition properties in one declaration transition-propertytransition-durationtransition-timing-functiontransition-delay
transition-delay Allows you to specify how long the transition should wait until it starts time
transition-duration Allows you to specify how long your transition will take to complete time
transition-timing-function Allows you to specify how a transition will change speed throughout its duration easelinearease-inease-outease-in-outcubic-bezier
transition-property Allows you to specify which properties will have the transition applied to them noneallIDENT
Back to Top