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. |