Essential CSS3 Properties Cheat Sheet

content Inserts generated content. Specifies the number of columns Applies a 2D or 3D transformation
column-count transform
Background Properties Specifies quotation marks for in a multi-column element. to an element.
quotes
background Defines a variety of background embedded quotations. transform-origin Defines the origin of
properties within one declaration. Creates or resets one or more Outline Properties transformation for an element.
Specifies whether the background counter-reset Sets the width, style, and color for Specifies how nested elements
background- counters.
image is fixed or scrolls with the counter- Increments one or more counter outline all four sides of an element's transform-style are rendered in 3D space.
attachment
webpage. increment values. outline.
background- Defines the background color of outline-color Sets the color of the outline. Transition Properties
color an element on the webpage. Flexible Box Layout Set the space between an outline transition Defines the transition between
background- Defines an element’s background Specifies the alignment of flexible outline-offset and the border edge of an two states of an element.
image image. align-content element. Specifies when the transition
container's items. transition-delay
Specifies how far the background Specifies the default alignment for outline-style Sets a style for an outline. effect will start.
background-clip images or color extends for an align-items Specifies the number of seconds
items. outline-width Sets the width of the outline. transition-
element. Specifies the alignment for or milliseconds a transition effect
align-self duration
background- Specifies the positioning area of selected items. should take to complete.
origin the background images. Padding Properties Specifies the names of the CSS
Specifies the components of a Sets the padding on all four sides transition-
background- Defines the origin of a flex padding properties to which a transition
flexible length. of the element. property
position background image. Specifies the initial main size of effect should be applied.
background- Specifies how the background flex-basis Sets the padding to the bottom
the flex item. padding-bottom transition- Specifies the speed curve of the
repeat image is tiled. side of an element.
Specifies the direction of the Sets the padding to the left side timing-function transition effect.
flex-direction
background-size Specifies the size of the flexible items. padding-left
of an element.
background images. A shorthand property for the flex-
flex-flow direction and the flex-wrap padding-right Sets the padding to the right side Visual formatting Properties
Border Properties of an element. Specifies how an element is
properties. display
Sets the border width, style, and Sets the padding to the top side displayed onscreen.
Specifies how the flex item will padding-top
border color for all four sides of an of an element. Specifies how an element is
flex-grow grow relative to the other items position
element. inside the flex container. positioned.
Sets the width, style, and color for Specifies how the flex item will
Print Properties Specify the location of the top
border-bottom top
the bottom border of an element. flex-shrink shrink relative to the other items page-break-after Insert a page breaks after an edge of the positioned element.
border-bottom- Sets the color of the bottom inside the flex container. element. Specify the location of the right
page-break- Insert a page breaks before an right
color border of an element. Specifies whether the flexible edge of the positioned element.
flex-wrap before element. Specify the location of the bottom
border-bottom- Defines the shape of the bottom- items should wrap or not. bottom
Specifies how flex items are page-break- Insert a page breaks inside an edge of the positioned element.
left-radius left border corner of an element. inside element.
aligned along the main axis of the Specify the location of the left
left
justify-content flex container after any flexible edge of the positioned element.
border-bottom- Defines the shape of the bottom- Table Properties
right-radius right border corner of an element. lengths and auto margins have Specifies whether or not a box
been resolved. float
Specifies whether table cell should float.
border-bottom- Sets the style of the bottom Specifies the order in which a flex border-collapse borders are connected or Specifies the placement of an
style border of an element. order items are displayed and laid out separated. clear element in relation to floating
border-bottom- Sets the width of the bottom within a flex container. Sets the spacing between the elements.
border-spacing
width border of an element. borders of adjacent table cells. Specifies a layering or stacking
z-index
border-color Sets the color of the border on all Font Properties caption-side Specify the position of table's order for positioned elements.
the four sides of an element. Defines a variety of font caption. Specifies the treatment of content
overflow
Specifies how an image is to be properties within one declaration Show or hide borders and that overflows the element's box.
border-image empty-cells
used in place of the border styles. font like the font-style, font-variant, backgrounds of empty table cells. Specifies how to manage the
Specifies the amount by which font-weight, font-size/line-height, table-layout Specifies a table layout algorithm. overflow-x content when it overflows the
border-image-
the border image area extends and the font-family. Specifies whether table cell width of the element's content
outset
beyond the border box. font-family Defines a list of fonts for element. border-collapse borders are connected or area.
border-image- font-size Defines the font size for the text. separated. Specifies how to manage the
border-image-repeat
repeat overflow-y content when it overflows the
Preserves the readability of text
border-image- Specifies the inward offsets of the font-size-adjust Text Properties height of the element's content
when font fallback occurs.
slice image-border. area.
Selects a normal, condensed, or Define the text direction/writing
border-image- Specifies the location of the font-stretch direction Specifies whether or not an
expanded face from a font. direction. resize
source image to be used as a border. element is resizable by the user.
font-style Defines the font style for the text. Specifies the length of the tab
border-image- Specifies the width of the image- tab-size clip Defines the clipping region.
character.
width border. font-variant Specify the font variant. Specifies whether or not an
Sets the horizontal alignment of visibility
Sets the width, style, and color of font-weight Specify the font weight of the text. text-align element is visible.
border-left inline content.
the left border of an element. Specifies how the last line of a cursor Specify the type of cursor.
Sets the color of the left border of List Properties block or a line right before a Applies one or more drop-
border-left-color text-align-last box-shadow
an element. Defines the display style for a list forced line break is aligned when shadows to the element's box.
Sets the style of the left border of list-style
border-left-style and list elements. text-align is justify. box-sizing Alter the default CSS box model.
an element. Specifies the image to be used as Specifies the decoration added to
Sets the width of the left border of list-style-image text-decoration
border-left-width a list-item marker. text. Animation Properties
an element. list-style- Specifies the position of the list-
Defines the shape of the border text-decoration- Specifies the color of the text- Specifies the behavior of all
border-radius position item marker. animation
corners of an element. color decoration-line. animations.
Specifies the marker style for a
Sets the width, style, and color of list-style-type Specifies when the animation will
border-right list-item. Specifies what kind of line animation-delay
the right border of an element. text-decoration- start with a delay.
decorations are added to the
border-right- Sets the color of the right border Margin Properties line Specifies whether the animation
element. animation-
color of an element. should play forward, backward, or
Sets the margin on all four sides Specifies the style of the lines direction
margin text-decoration- in alternate cycles.
border-right- Sets the style of the right border of the element. specified by the text-decoration-
style of an element. style Specifies the number of seconds
Sets the bottom margin of the line property
margin-bottom animation- or milliseconds an animation
border-right- Sets the width of the right border element. text-indent Indent the first line of text. duration should take to complete one
width of an element. Sets the left margin of the Specifies the justification method
margin-left cycle.
Sets the style of the border on all element. text-justify to use when the text-align
border-style Specifies how a CSS animation
the four sides of an element. Sets the right margin of the property is set to justify. animation-fill-
margin-right should apply styles to its target
Sets the width, style, and color of element. Specifies how the text content will mode
border-top before and after it is executing.
the top border of an element. Sets the top margin of the text-overflow be displayed, when it overflows
margin-top Specifies the number of times an
Sets the color of the top border of element. the block containers. animation-
border-top-color animation cycle should be played
an element. Applies one or more shadows to iteration-count
text-shadow before stopping.
border-top-left- Defines the shape of the top-left Multi-Column Layout Properties the text content of an element. Specifies the name of
radius border corner of an element. text-transform Transforms the case of the text. @keyframes defined animations
Specifies the number of columns animation-name
border-top-right- Defines the shape of the top-right column-count that should be applied to the
in a multi-column element. Sets the height between lines of
radius border corner of an element. line-height selected element.
Specifies how columns will be text.
Sets the style of the top border of column-fill animation-play- Specifies whether the animation
border-top-style filled. Sets the vertical positioning of an
an element. vertical-align element relative to the current state is running or paused.
Specifies the gap between the
Sets the width of the top border of column-gap columns in a multi-column text baseline. Specifies how a CSS animation
border-top-width animation-
an element. element. Sets the extra spacing between should progress over the duration
Sets the width of the border on all letter-spacing timing-function
border-width Specifies a straight line, or "rule", letters. of each cycle.
the four sides of an element. to be drawn between each
column-rule word-spacing Sets the spacing between words.
column in a multi-column Specifies how white space inside
Color Properties element. white-space
the element is handled.
Defines and sets the color for Specifies the color of the rules Specifies how to break lines
color column-rule- word-break
text. drawn between columns in a within words.
color
Defines the transparency of an multi-column layout. Specifies whether to break words
opacity
element. Specifies the style of the rule word-wrap when the content overflows the
column-rule-
drawn between the columns in a boundaries of its container.
style
Dimension Properties multi-column layout.
height Defines the height of an element. Specifies the width of the rule Transform Properties
column-rule-
Defines the maximum height of drawn between the columns in a
max-height width Specifies whether or not the
an element. multi-column layout. backface- "back" side of a transformed
Defines the maximum width of an Specifies how many columns an visibility element is visible when facing the
max-width column-span element spans across in a multi-
element. user.
Defines the minimum height of an column layout.
min-height Defines the perspective from
element. Specifies the optimal width of the perspective which all child elements of the
column-width columns in a multi-column object are viewed.
Defines the minimum width of an
min-width element.
element. Defines the origin (the vanishing
A shorthand property for setting perspective-
width Specify the width of an element. point for the 3D space) for the
columns column-width and column-count origin
perspective property.
properties.
Generated Content Properties

Copyright © 2019 MakeUseOf. For more cheat sheets, head over to www.makeuseof.com