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

backgroundSets  a variety of background properties within one declaration.
background-attachmentSpecifies whether the background image is fixed in the viewport or scrolls.
background-clip Sets the painting area of the background.
background-colorSets an element’s background color.
background-imageSets an element’s background image.
background-origin Sets the positioning area of the background images.
background-positionSets the origin of a background image.
background-repeatSpecifies whether/how the background image is tiled.
background-size Sets the size of the background images.

CSS Border Properties

borderSets the width, style, and color for all four sides of an element’s border.
border-bottomSets the width, style, and color of the bottom border of an element.
border-bottom-colorSets 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-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-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-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-radius Sets 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-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-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.

CSS Color Properties

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

CSS Dimension Properties

heightSpecifies the height of an element.
max-heightSpecifies the maximum height of an element.
max-widthSpecifies the maximum width of an element.
min-heightSpecifies the minimum height of an element.
min-widthSpecifies the minimum width of an element.
widthSpecifies 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

fontSets the a variety of font properties within one declaration.
font-familySets the a list of fonts for element.
font-sizeSets 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-styleSets the font style for the text.
font-variantSpecifies the font variant.
font-weightSpecifies the font weight of the text.

CSS List Properties

list-styleSets the display style for a list and list elements.
list-style-imageSets the image to be used as a list-item marker.
list-style-positionSets the position of the list-item marker.
list-style-typeSets the marker style for a list-item.

CSS Margin Properties

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

CSS Outline Properties

outlineSets the width, style, and color for all four sides of an element’s outline.
outline-colorSets the color of the outline.
outline-offset Set 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.

CSS Padding Properties

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

CSS Table Properties

border-collapseSets the 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-cellsShow or hide borders and backgrounds of empty table cells.
table-layoutSets the a table layout algorithm.

CSS Text Properties

directionDefine the text direction/writing direction.
tab-size Sets the length of the tab character.
text-alignSets 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-decorationSets 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-indentIndent 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-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-spaceSets 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

displaySets the how an element is displayed onscreen.
positionSets the 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.
floatSets the whether or not a box should float.
clearSets the placement of an element in relation to floating elements.
z-indexSets the a layering or stacking order for positioned elements.
overflowSets 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.
clipSets the clipping region.
visibilitySets the whether or not an element is visible.
cursorSpecifies 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.
Join the community
Trending
Categories
Join the community