Skip to main content

CSS Cheat Sheet

Get up to speed with CSS fast. A comprehensive CSS cheat sheet for web developers.

Box Model​

  • width: Specifies the width of an element
  • height: Specifies the height of an element
  • padding: Specifies the padding inside an element
  • border: Specifies a border around an element
  • margin: Specifies the margin outside an element

Text​

  • font-family: Specifies the font for text
  • font-size: Specifies the size of text
  • color: Specifies the color of text
  • text-align: Specifies the horizontal alignment of text
  • text-decoration: Specifies the text decoration (underline, overline, line-through)
  • text-indent: Specifies the indentation of the first line of text in a block
  • text-shadow: Specifies a shadow for text
  • text-transform: Specifies the capitalization of text (none, capitalize, uppercase, lowercase)
  • vertical-align: Specifies the vertical alignment of an inline-level element in a line box (baseline, text-top, middle, text-bottom, super, sub)
  • white-space: Specifies how white space inside an element should be handled (normal, pre, nowrap, pre-wrap, pre-line)

Background​

  • background-color: Specifies the background color of an element
  • background-image: Specifies a background image for an element
  • background-repeat: Specifies if a background image should repeat or not
  • background-attachment: Specifies if a background image is fixed or scrolls with the rest of the page

Display​

  • display: Specifies how an element should be displayed (inline, block, inline-block, none)
  • visibility: Specifies if an element is visible or hidden

Flexbox​

  • display: flex: Specifies that an element is a flex container
  • flex-direction: Specifies the direction of the flex items (row, row-reverse, column, column-reverse)
  • justify-content: Specifies how the flex items are aligned along the main axis (flex-start, flex-end, center, space-between, space-around)
  • align-items: Specifies how the flex items are aligned along the cross axis (flex-start, flex-end, center, baseline, stretch)
  • flex-wrap: Specifies whether flex items should wrap or not (nowrap, wrap, wrap-reverse)
  • flex-flow: Shorthand property for flex-direction and flex-wrap
  • justify-content: Specifies the alignment of flex items along the main axis (flex-start, flex-end, center, space-between, space-around)
  • align-content: Specifies the alignment of a flex container's lines within the flex container when there is extra space along the cross axis (flex-start, flex-end, center, space-between, space-around, stretch)

Positioning​

  • position: Specifies the type of positioning for an element (static, relative, absolute, fixed)
  • top: Specifies the distance of an element from the top of its containing element
  • bottom: Specifies the distance of an element from the bottom of its containing element
  • left: Specifies the distance of an element from the left of its containing element
  • right: Specifies the distance of an element from the right of its containing element

Transforms​

  • transform: Specifies the transformation to be applied to an element
  • translate: Specifies the translation (movement) of an element in the x and y axis
  • rotate: Specifies the rotation of an element
  • scale: Specifies the scaling of an element in the x and y axis
  • skew: Specifies the skewing of an element in the x and y axis

Transitions​

  • transition: Specifies the transition effect for an element
  • transition-property: Specifies the CSS property to which the transition effect should be applied
  • transition-duration: Specifies the duration of the transition effect
  • transition-timing-function: Specifies the speed curve of the transition effect
  • transition-delay: Specifies the delay before the transition effect starts

Animations​

  • animation: Specifies the animation for an element
  • animation-name: Specifies the name of the @keyframes animation
  • animation-duration: Specifies the duration of the animation
  • animation-timing-function: Specifies the speed curve of the animation
  • animation-delay: Specifies the delay before the animation starts
  • animation-iteration-count: Specifies the number of times the animation should run
  • animation-direction: Specifies the direction of the animation (normal, reverse, alternate, alternate-reverse)

Border​

  • border-width: Specifies the width of an element's border
  • border-style: Specifies the style of an element's border (solid, dotted, dashed, double, groove, ridge, inset, outset)
  • border-color: Specifies the color of an element's border
  • border-radius: Specifies the rounding of an element's corners

Shadows​

  • box-shadow: Specifies a shadow for an element
  • text-shadow: Specifies a shadow for text

Typography​

  • line-height: Specifies the height of a line of text
  • letter-spacing: Specifies the spacing between characters in text
  • word-spacing: Specifies the spacing between words in text
  • text-transform: Specifies the capitalization of text (none, capitalize, uppercase, lowercase)

Lists​

  • list-style: Specifies the style of a list (disc, circle, square, none)
  • list-style-position: Specifies the position of the list marker (inside, outside)
  • list-style-image: Specifies an image as the list marker

Tables​

  • border-collapse: Specifies whether table borders should be collapsed into a single border or separated
  • border-spacing: Specifies the distance between the borders of adjacent cells
  • caption-side: Specifies the position of the table caption (top, bottom)
  • empty-cells: Specifies whether or not to display borders and backgrounds for empty cells in a table

Grid​

  • display: grid: Specifies that an element should be displayed as a grid container
  • grid-template-columns: Specifies the size and number of columns in a grid
  • grid-template-rows: Specifies the size and number of rows in a grid
  • grid-template-areas: Specifies named grid areas
  • grid-column-gap: Specifies the size of the gap between columns in a grid
  • grid-row-gap: Specifies the size of the gap between rows in a grid
  • grid-gap: Shorthand property for grid-column-gap and grid-row-gap
  • justify-items: Specifies the alignment of grid items along the row axis (start, end, center, stretch)
  • align-items: Specifies the alignment of grid items along the column axis (start, end, center, stretch)
  • justify-content: Specifies the alignment of grid items along the row axis within the grid area (start, end, center space-between, space-around)
  • align-content: Specifies the alignment of grid items along the column axis within the grid area (start, end, center, space-between, space-around, stretch)

Backgrounds​

  • background: Specifies all the background-related properties in one line of code
  • background-color: Specifies the background color of an element
  • background-image: Specifies an image as the background of an element
  • background-repeat: Specifies if and how a background image should repeat (repeat, repeat-x, repeat-y, no-repeat)
  • background-attachment: Specifies whether a background image should be fixed or scroll with the rest of the page (scroll, fixed)
  • background-position: Specifies the position of a background image (top, bottom, left, right, center)

Borders​

  • border: Specifies a border for an element
  • border-width: Specifies the width of a border
  • border-style: Specifies the style of a border (solid, dotted, dashed, double, groove, ridge, inset, outset)
  • border-color: Specifies the color of a border
  • border-top, border-right, border-bottom, border-left: Specifies the width, style, and color of a border for each individual side of an element
  • border-radius: Specifies the rounding of the corners of a border

Dimensions​

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

Margins​

  • margin: Specifies the margin of an element (can be set for all sides with one property, or for each side individually with margin-top, margin-right, margin-bottom, margin-left)
  • auto: Lets the browser calculate the margin

Padding​

  • padding: Specifies the padding of an element (can be set for all sides with one property, or for each side individually with padding-top, padding-right, padding-bottom, padding-left)

Miscellaneous​

  • opacity: Specifies the opacity of an element
  • overflow: Specifies what to do if content overflows an element's box (visible, hidden, scroll, auto)
  • cursor: Specifies the type of cursor to be displayed (default, pointer, auto, etc.)
  • transition: Specifies the transition effect for an element to change from one style to another (property, duration, timing-function, delay)
  • transform: Specifies a two-dimensional transformation for an element (scale, rotate, translate, skew)