CSS Properties Cheat Sheet

This CSS Properties Cheat Sheet is the best cheat sheet for new coders as it breaks down the properties by category. Easy to find and easy to use!

We have sorted the properties in alphabetical in order to make it even easier.

CSS Background Properties

background	Sets  a variety of background properties within one declaration.
background-attachment	Specifies whether the background image is fixed in the viewport or scrolls.
background-clip	Sets the painting area of the background.
background-color	Sets an element’s background color.
background-image	Sets an element’s background image.
background-origin	Sets the positioning area of the background images.
background-position	Sets the origin of a background image.
background-repeat	Specifies whether/how the background image is tiled.
background-size	Sets the size of the background images.

CSS Border Properties

border	Sets the width, style, and color for all four sides of an element’s border.
border-bottom	Sets the width, style, and color of the bottom border of an element.
border-bottom-color	Sets the color of the bottom border of an element.
border-bottom-left-radius	Sets the shape of the bottom-left border corner of an element.
border-bottom-right-radius	Sets the shape of the bottom-right border corner of an element.
border-bottom-style	Sets the style of the bottom border of an element.
border-bottom-width	Sets the width of the bottom border of an element.
border-color	Sets the color of the border on all the four sides of an element.
border-image	Sets the how an image is to be used in place of the border styles.
border-image-outset	Sets the amount by which the border image area extends beyond the border box.
border-image-repeat	Sets the whether the image-border should be repeated, rounded or stretched.
border-image-slice	Sets the inward offsets of the image-border.
border-image-source	Sets the location of the image to be used as a border.
border-image-width	Sets the width of the image-border.
border-left	Sets the width, style, and color of the left border of an element.
border-left-color	Sets the color of the left border of an element.
border-left-style	Sets the style of the left border of an element.
border-left-width	Sets the width of the left border of an element.
border-radius	Sets the shape of the border corners of an element.
border-right	Sets the width, style, and color of the right border of an element.
border-right-color	Sets the color of the right border of an element.
border-right-style	Sets the style of the right border of an element.
border-right-width	Sets the width of the right border of an element.
border-style	Sets the style of the border on all the four sides of an element.
border-top	Sets the width, style, and color of the top border of an element.
border-top-color	Sets the color of the top border of an element.
border-top-left-radius	Sets the shape of the top-left border corner of an element.
border-top-right-radius	Sets the shape of the top-right border corner of an element.
border-top-style	Sets the style of the top border of an element.
border-top-width	Sets the width of the top border of an element.
border-width	Sets the width of the border on all the four sides of an element.

CSS Color Properties

color	Specifies the color of the text of an element.
opacity	Sets the transparency of an element.

CSS Dimension Properties

height	Specifies the height of an element.
max-height	Specifies the maximum height of an element.
max-width	Specifies the maximum width of an element.
min-height	Specifies the minimum height of an element.
min-width	Specifies the minimum width of an element.
width	Specifies the width of an element.

CSS Flexbox Properties

align-content	Sets the alignment of flexible container’s items within the flex container.
align-items	Sets the default alignment for items within the flex container.
align-self	Sets the alignment for selected items within the flex container.
flex	Sets the components of a flexible length.
flex-basis	Sets the initial main size of the flex item.
flex-direction	Sets the direction of the flexible items.
flex-flow	A shorthand property for the flex-direction and the flex-wrap properties.
flex-grow	Sets the how the flex item will grow relative to the other items inside the flex container.
flex-shrink	Sets the how the flex item will shrink relative to the other items inside the flex container.
flex-wrap	Sets the whether the flexible items should wrap or not.
justify-content	Sets the how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.
order	Sets the order in which a flex items are displayed and laid out within a flex container.

CSS Font Properties

font	Sets the a variety of font properties within one declaration.
font-family	Sets the a list of fonts for element.
font-size	Sets the font size for the text.
font-size-adjust	Preserves the readability of text when font fallback occurs.
font-stretch	Selects a normal, condensed, or expanded face from a font.
font-style	Sets the font style for the text.
font-variant	Specifies the font variant.
font-weight	Specifies the font weight of the text.

CSS List Properties

list-style	Sets the display style for a list and list elements.
list-style-image	Sets the image to be used as a list-item marker.
list-style-position	Sets the position of the list-item marker.
list-style-type	Sets the marker style for a list-item.

CSS Margin Properties

margin	Sets the margin on all four sides of the element.
margin-bottom	Sets the bottom margin of the element.
margin-left	Sets the left margin of the element.
margin-right	Sets the right margin of the element.
margin-top	Sets the top margin of the element.

CSS Outline Properties

outline	Sets the width, style, and color for all four sides of an element’s outline.
outline-color	Sets the color of the outline.
outline-offset	Set the space between an outline and the border edge of an element.
outline-style	Sets a style for an outline.
outline-width	Sets the width of the outline.

CSS Padding Properties

padding	Sets the padding on all four sides of the element.
padding-bottom	Sets the padding to the bottom side of an element.
padding-left	Sets the padding to the left side of an element.
padding-right	Sets the padding to the right side of an element.
padding-top	Sets the padding to the top side of an element.

CSS Table Properties

border-collapse	Sets the whether table cell borders are connected or separated.
border-spacing	Sets the spacing between the borders of adjacent table cells.
caption-side	Specifies the position of table’s caption.
empty-cells	Show or hide borders and backgrounds of empty table cells.
table-layout	Sets the a table layout algorithm.

CSS Text Properties

direction	Define the text direction/writing direction.
tab-size	Sets the length of the tab character.
text-align	Sets the horizontal alignment of inline content.
text-align-last	Sets the how the last line of a block or a line right before a forced line break is aligned when text-align is justify.
text-decoration	Sets the decoration added to text.
text-decoration-color	Sets the color of the text-decoration-line.
text-decoration-line	Sets the what kind of line decorations are added to the element.
text-decoration-style	Sets the style of the lines specified by the text-decoration-line property
text-indent	Indent the first line of text.
text-justify	Sets the justification method to use when the text-align property is set to justify.
text-overflow	Sets the how the text content will be displayed, when it overflows the block containers.
text-shadow	Applies one or more shadows to the text content of an element.
text-transform	Transforms the case of the text.
line-height	Sets the height between lines of text.
vertical-align	Sets the vertical positioning of an element relative to the current text baseline.
letter-spacing	Sets the extra spacing between letters.
word-spacing	Sets the spacing between words.
white-space	Sets the how white space inside the element is handled.
word-break	Sets the how to break lines within words.
word-wrap	Sets the whether to break words when the content overflows the boundaries of its container.

CSS Display Properties

display	Sets the how an element is displayed onscreen.
position	Sets the how an element is positioned.
top	Specifies the location of the top edge of the positioned element.
right	Specifies the location of the right edge of the positioned element.
bottom	Specifies the location of the bottom edge of the positioned element.
left	Specifies the location of the left edge of the positioned element.
float	Sets the whether or not a box should float.
clear	Sets the placement of an element in relation to floating elements.
z-index	Sets the a layering or stacking order for positioned elements.
overflow	Sets the treatment of content that overflows the element’s box.
overflow-x	Sets the how to manage the content when it overflows the width of the element’s content area.
overflow-y	Sets the how to manage the content when it overflows the height of the element’s content area.
resize	Sets the whether or not an element is resizable by the user.
clip	Sets the clipping region.
visibility	Sets the whether or not an element is visible.
cursor	Specifies the type of cursor.
box-shadow	Applies one or more drop-shadows to the element’s box.
box-sizing	Alter the default CSS box model.