CSS shorthand properties

Commonly used CSS shorthand properties.

animation

animation: 1s ease-in-out forwards slidein;

animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
animation-timeline
animation-name

background

background: url("cheese.png") center / contain no-repeat;

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

border

border: 1px solid blue;

border-width
border-style
border-color

flex

flex: 0 0 50%;

flex-grow
flex-shrink
flex-basis

font

font: italic bold 16px/1.4 sans-serif;

font-style
font-variant
font-weight
font-stretch
font-size*
line-height
font-family*

list-style

list-style: none;

list-style-position
list-style-image
list-style-type

margin/padding

margin: 10px; /* all four sides */

margin: 10px 20px; /* top bottom | left right */

margin: 10px 20px 20px; /* top | left right | bottom */

margin: 10px 20px 20px 20px; /* top | right | bottom | left (clockwise) */

position

inset: 0 20px 0 20px;

top
right
bottom
left

text-decoration

text-decoration: underline wavy blue 2px;

text-decoration-line
text-decoration-style
text-decoration-color
text-decoration-thickness

transition

transition: color 1s;

transition-property
transition-duration
transition-timing-function
transition-delay

< toolbox