The Essential CSS3 Properties Cheat Sheet

Background PropertiesbackgroundDefines a variety of background properties within one declaration.background-attachmentSpecifies whether the background image is fixed or scrolls with the webpage.background-colorDefines the background color of an element on the webpage.background-imageDefines an element’s background image.background-clipSpecifies how far the background images or color extends for an element.background-originSpecifies the positioning area of the background images.background-positionDefines the origin of a background image.background-repeatSpecifies how the background image is tiled.background-sizeSpecifies the size of the background images.Border PropertiesborderSets the border width, style, and color for all four sides of an element.border-bottomSets the width, style, and color for the bottom border of an element.border-bottom-colorSets the color of the bottom border of an element.border-bottom-left-radiusDefines the shape of the bottom-left border corner of an element.border-bottom-right-radiusDefines the shape of the bottom-right border corner of an element.border-bottom-styleSets the style of the bottom border of an element.border-bottom-widthSets the width of the bottom border of an element.border-colorSets the color of the border on all the four sides of an element.border-imageSpecifies how an image is to be used in place of the border styles.border-image-outsetSpecifies the amount by which the border image area extends beyond the border box.border-image-repeatSpecifies how the border image is tiled.border-image-sliceSpecifies the inward offsets of the image-border.border-image-sourceSpecifies the location of the image to be used as a border.border-image-widthSpecifies the width of the image-border.border-leftSets the width, style, and color of the left border of an element.border-left-colorSets the color of the left border of an element.border-left-styleSets the style of the left border of an element.border-left-widthSets the width of the left border of an element.border-radiusDefines the shape of the border corners of an element.border-rightSets the width, style, and color of the right border of an element.border-right-colorSets the color of the right border of an element.border-right-styleSets the style of the right border of an element.border-right-widthSets the width of the right border of an element.border-styleSets the style of the border on all the four sides of an element.border-topSets the width, style, and color of the top border of an element.border-top-colorSets the color of the top border of an element.border-top-left-radiusDefines the shape of the top-left border corner of an element.border-top-right-radiusDefines the shape of the top-right border corner of an element.border-top-styleSets the style of the top border of an element.border-top-widthSets the width of the top border of an element.border-widthSets the width of the border on all the four sides of an element.Color PropertiescolorDefines and sets the color for text.opacityDefines the transparency of an element.Dimension PropertiesheightDefines the height of an element.max-heightDefines the maximum height of an element.max-widthDefines the maximum width of an element.min-heightDefines the minimum height of an element.min-widthDefines the minimum width of an element.widthSpecify the width of an element.Generated Content PropertiescontentInserts generated content.quotesSpecifies quotation marks for embedded quotations.counter-resetCreates or resets one or more counters.counter-incrementIncrements one or more counter values.Flexible Box Layoutalign-contentSpecifies the alignment of flexible container’s items.align-itemsSpecifies the default alignment for items.align-selfSpecifies the alignment for selected items.flexSpecifies the components of a flexible length.flex-basisSpecifies the initial main size of the flex item.flex-directionSpecifies the direction of the flexible items.flex-flowA shorthand property for the flex-direction and the flex-wrap properties.flex-growSpecifies how the flex item will grow relative to the other items inside the flex container.flex-shrinkSpecifies how the flex item will shrink relative to the other items inside the flex container.flex-wrapSpecifies whether the flexible items should wrap or not.justify-contentSpecifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.orderSpecifies the order in which a flex items are displayed and laid out within a flex container.Font PropertiesfontDefines a variety of font properties within one declaration like the font-style, font-variant, font-weight, font-size/line-height, and the font-family.font-familyDefines a list of fonts for element.font-sizeDefines the font size for the text.font-size-adjustPreserves the readability of text when font fallback occurs.font-stretchSelects a normal, condensed, or expanded face from a font.font-styleDefines the font style for the text.font-variantSpecifies the font variant.font-weightSpecifies the font weight of the text.List Properties list-styleDefines the display style for a list and list elements.list-style-imageSpecifies the image to be used as a list-item marker.list-style-positionSpecifies the position of the list-item marker.list-style-typeSpecifies the marker style for a list-item.Margin PropertiesmarginSets the margin on all four sides of the element.margin-bottomSets the bottom margin of the element.margin-leftSets the left margin of the element.margin-rightSets the right margin of the element.margin-topSets the top margin of the element.Multi-Column Layout Propertiescolumn-countSpecifies the number of columns in a multi-column element.column-fillSpecifies how columns will be filled.column-gapSpecifies the gap between the columns in a multi-column element.column-ruleSpecifies a straight line, or “rule”, to be drawn between each column in a multi-column element.column-rule-colorSpecifies the color of the rules drawn between columns in a multi-column layout.column-rule-styleSpecifies the style of the rule drawn between the columns in a multi-column layout.column-rule-widthSpecifies the width of the rule drawn between the columns in a multi-column layout.column-spanSpecifies how many columns an element spans across in a multi-column layout.column-widthSpecifies the optimal width of the columns in a multi-column element.columnsA shorthand property for setting column-width and column-count properties.column-countSpecifies the number of columns in a multi-column element.Outline PropertiesoutlineSets the width, style, and color for all four sides of an element’s outline.outline-colorSets the color of the outline.outline-offsetSet the space between an outline and the border edge of an element.outline-styleSets a style for an outline.outline-widthSets the width of the outline.Padding PropertiespaddingSets the padding on all four sides of the element.padding-bottomSets the padding to the bottom side of an element.padding-leftSets the padding to the left side of an element.padding-rightSets the padding to the right side of an element.padding-topSets the padding to the top side of an element.Print Propertiespage-break-afterInserts a page break after an element.page-break-beforeInserts a page break before an element.page-break-insideInserts a page break inside an element.Table Propertiesborder-collapseSpecifies whether table cell borders are connected or separated.border-spacingSets the spacing between the borders of adjacent table cells.caption-sideSpecifies the position of table’s caption.empty-cellsShows or hides borders and backgrounds of empty table cells.table-layoutSpecifies a table layout algorithm.border-collapseSpecifies whether table cell borders are connected or separated.Text PropertiesdirectionDefines the text direction/writing direction.tab-sizeSpecifies the length of the tab character.text-alignSets the horizontal alignment of inline content.text-align-lastSpecifies how the last line of a block or a line right before a forced line break is aligned when text-align is justify.text-decorationSpecifies the decoration added to text.text-decoration-colorSpecifies the color of the text-decoration-line.text-decoration-lineSpecifies what kind of line decorations are added to the element.text-decoration-styleSpecifies the style of the lines specified by the text-decoration-line propertytext-indentIndents the first line of text.text-justifySpecifies the justification method to use when the text-align property is set to justify.text-overflowSpecifies how the text content will be displayed, when it overflows the block containers.text-shadowApplies one or more shadows to the text content of an element.text-transformTransforms the case of the text.line-heightSets the height between lines of text.vertical-alignSets the vertical positioning of an element relative to the current text baseline.letter-spacingSets the extra spacing between letters.word-spacingSets the spacing between words.white-spaceSpecifies how white space inside the element is handled.word-breakSpecifies how to break lines within words.word-wrapSpecifies whether to break words when the content overflows the boundaries of its container.Transform Propertiesbackface-visibilitySpecifies whether or not the “back” side of a transformed element is visible when facing the user.perspectiveDefines the perspective from which all child elements of the object are viewed.perspective-originDefines the origin (the vanishing point for the 3D space) for the perspective property.transformApplies a 2D or 3D transformation to an element.transform-originDefines the origin of transformation for an element.transform-styleSpecifies how nested elements are rendered in 3D space.Transition PropertiestransitionDefines the transition between two states of an element.transition-delaySpecifies when the transition effect will start.transition-durationSpecifies the number of seconds or milliseconds a transition effect should take to complete.transition-propertySpecifies the names of the CSS properties to which a transition effect should be applied.transition-timing-functionSpecifies the speed curve of the transition effect.Visual Formatting PropertiesdisplaySpecifies how an element is displayed onscreen.positionSpecifies how an element is positioned.topSpecifies the location of the top edge of the positioned element.rightSpecifies the location of the right edge of the positioned element.bottomSpecifies the location of the bottom edge of the positioned element.leftSpecifies the location of the left edge of the positioned element.floatSpecifies whether or not a box should float.clearSpecifies the placement of an element in relation to floating elements.z-indexSpecifies a layering or stacking order for positioned elements.overflowSpecifies the treatment of content that overflows the element’s box.overflow-xSpecifies how to manage the content when it overflows the width of the element’s content area.overflow-ySpecifies how to manage the content when it overflows the height of the element’s content area.resizeSpecifies whether or not an element is resizable by the user.clipDefines the clipping region.visibilitySpecifies whether or not an element is visible.cursorSpecifies the type of cursor.box-shadowApplies one or more drop-shadows to the element’s box.box-sizingAlters the default CSS box model.Animation PropertiesanimationSpecifies the behavior of all animations.animation-delaySpecifies when the animation will start with a delay.animation-directionSpecifies whether the animation should play forward, backward, or in alternate cycles.animation-durationSpecifies the number of seconds or milliseconds an animation should take to complete one cycle.animation-fill-modeSpecifies how a CSS animation should apply styles to its target before and after it is executing.animation-iteration-countSpecifies the number of times an animation cycle should be played before stopping.animation-nameSpecifies the name of @keyframes defined animations that should be applied to the selected element.animation-play-stateSpecifies whether the animation is running or paused.animation-timing-functionSpecifies how a CSS animation should progress over the duration of each cycle.