# CSS Shorthand Properties

## The Universal Shorthand Property

all: inherit | initial | unset | revert ;

## Basics

### Margin

margin-top: 40px;
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;

margin: 40px auto 40px;

margin: 40px auto;

### Border

border-width: 1px;
border-style: solid;
border-color: #bdbdbd;

border: 1px solid #bdbdbd;

## Advanced

### List

list-style-type: circle;
list-style-position: inside;
list-style-image: url("https://");

list-style: circle inside url("https://");

### Font

font-style: italic;
font-weight: bold;
font-size: 2rem;
line-height: 2;
font-family: sans-serif;

font: italic bold 2rem/2 sans-serif;

### Background

background-color: #fff;
background-image: url(../img/bg.jpg);
background-position-x: center;
background-position-y: center;
background-size: cover;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: fixed;

background: #fff url(../img/bg.jpg) center/cover no-repeat fixed;

### Transition

transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 1s;

transition: all 0.5s ease 1s;

### Animation

animation-name: bounce;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;

animation: bounce 3s ease 1s infinite alternate forwards running;

## Resource
[Shorthand properties - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties)

###### tags: `CSS`