Whether you are a seasoned web developer or a rookie part-timer, having a CSS cheat sheet closeby always helpful. CSS can be used to build some of the most visually pleasing websites that you will find.

In this article, we are going to include some of the most useful CSS3 tags/divs that you would need. While it is by no means a complete CSS reference manual, it would certainly make your job much easier.

  1. Background
  2. Animation
  3. Font
  4. Text
  5. 3D / 2D Transform
  6. Box Model

CSS Styles Cheat Sheet for Developers

Background

background – All the background properties in one declaration

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

background-size – The background image size

length
%
auto | cover | contain

background-repeat – The way the background image is repeated

repeat | repeat-x | repeat-y | no-repeat

background-image – The background image

url
gradients
none

background-position – The starting position of the background image

top left | top center | top right | center left | center center |
center right | bottom left | bottom center | bottom right

background-attachment – The background image fixed or scrolls

scroll | fixed | local

background-origin – Where the background image is positioned

border-box | padding-box | content-box

background-clip – Painting area of the background

border-box | padding-box | content-box

Animation

animations – All the animation properties in one declaration

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

animation-timing-function – Speed curve of an animation

ease | linear | ease-in | easeout | ease-in-out | cubic-Bezier
(number, number, number, number)

animation-delay – Delays animation start

time

animation-iteration-count – Number of an animation replays

inherit
number

animation-direction – Reverse animation or in alternate cycles

normal | alternate

animation-play-state – The animation is running or paused

running | paused

Font

font-size-adjust – controls font size if the first declared option is not available

none | inherit
number

font-family – Font of the element

serif | sans-serif | Font Name

font-style – The specific style of the font

normal | italic | oblique | inherit

font-variant – Set small-caps

normal | small-caps | inherit

font-size – Size of the used font

xx-small | x-small | small | medium | large | x-large | xxlarge |
smaller | larger |

font-weight – Use bold or thin characters

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
700 | 800 | 900 | inherit

Text

direction – The writing direction, Arabic is using rtl

ltr | rtl | inherit

hanging-punctuation – Can a punctuation mark be placed outside the line box?

none | [ start | end | endedge ]

letter-spacing – The spacing between characters

normal
length
%

unicode-bidi – Should the text be overridden to support more languages?

normal | embed | bidi-override

white-space – How are white-spaces handled

normal | pre | nowrap | pre-wrap | pre-line

text-align – Horizontal alignment of text

start | end | left | right | center | justify

text-align-last – Horizontal alignment of the last line of text

start | end | left | right | center | justify

text-decoration – Overline, underline, or line-through the text

none | underline | overline | line-through | blink

text-shadow – Should the text cast shadow?

none
color
length

word-break – Text breaking rules when the text reaches the end of the container

normal | keep-all | loose | break-strict | break-all

word-wrap – Break long words and wrap onto the next line

normal
nowrap

text-emphasis

none | [ [ accent | dot | circle | disc | [ before | after ]?]

3D / 2D Transform

backface-visibility – Is element visible when not facing the screen?

visible | hidden

perspective – How many pixels the 3D element is placed from the view

none
number

perspective-origin – Where is the 3D element based on the x- and y-axis?

[ [ percentage> | <length> | left | center | right ] [ <percentage> |
<length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center
| right ] || [ top | center | bottom ] ] <length> ]

transform – 2D-3D transformation

none | matrix | matrix3d | translate3d | tranlateX | translateY |
translateZ | scale | scale3d | scaleX | scaleY | scaleZ | rotate |
rotate3d | rotateX | rotateY | rotateZ | skewX | skewY | skew |
perspective

transform-origin – Changes the position of transformed elements

[ [ [ <percentage> | <length> | left | center | right ] [ <percentage>
| <length> | top | center | bottom ]? ] <length> ] | [ [ [ left |
center | right ] || [ top | center | bottom ] ] <length> ]

transform-style – Render nested elements in 3D

flat | preserve-3d

Box Model

float – Float elements left or right

left | right | none

height – Height of the element

auto
length
%

max-height – Maximum height of the element

none
length
%

max-width – Maximum width of element

none
length
%

min-height – Minimum height of the element

none
length
%

width – Minimum width of the element

auto
%
length

margin – Set the top, right, bottom, and left margins in one line

margin-top
margin-right
margin-bottom
margin-left

margin-bottom – Bottom margin

auto
length
%

margin-left – Left margin

auto
height
%

margin-right – Right margin

auto
height
%

margin-top – Top margin

auto
length
%

padding – Padding between the element border and content

padding-top
padding-right
padding-bottom
padding-left

padding-bottom – Bottom padding

length
%

padding-left – Left padding

length
%

padding-right – Right padding

length
%

padding-top – Top padding

length
%

display – Box display type

none | inline | block | inline-block | flex | inline-flex | grid |
inline-grid | contents | list-item |run-in | compact | table |
inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | ruby | ruby-base | ruby-text |
ruby-base-group | ruby-text-group

overflow – Hide, display or scroll if the content overflows its container

visible | hidden | scroll |
auto | no-display | no-content
overflow-x
overflow-y

overflow-x – Horizontal overflow

visible | hidden | scroll |
auto | no-display | no-content

visibility – Visibility: hidden elements leave a gap

visible | hidden | collapse

clear – Deny floating of an element

left | right | both | none