/* 1. Margin & Padding */
margin: 10px;                          /* All sides */
margin: 10px 20px;                     /* Top/Bottom | Left/Right */
margin: 10px 20px 30px;                /* Top | Left/Right | Bottom */
margin: 10px 20px 30px 40px;           /* Top | Right | Bottom | Left */

padding: 10px 20px;                    /* Same rules apply */

/* 2. Border */
border: 1px solid #000;                /* width style color */
border-width: 1px 2px 3px 4px;         /* Top | Right | Bottom | Left */
border-color: red green blue yellow;
border-style: solid dashed dotted double;

/* 3. Background */
background: #fff url("image.jpg") no-repeat center center / cover;
/* color image repeat position / size */

/* 4. Font */
font: italic small-caps bold 16px/1.5 'Arial', sans-serif;
/* style variant weight size/line-height family */

/* 5. List */
list-style: square inside url("icon.png");
/* type position image */

/* 6. Flex */
flex: 1 0 200px;
/* grow shrink basis */

/* 7. Grid */
grid-template: auto / 1fr 1fr;
/* rows / columns */
grid-area: header;
/* shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end */

/* 8. Transition */
transition: all 0.3s ease-in-out 0s;
/* property duration timing-function delay */

/* 9. Animation */
animation: slide 2s ease-in-out infinite alternate;
/* name duration timing-function iteration-count direction */

/* 10. Outline */
outline: 2px dashed red;
/* width style color */

/* 11. Column */
columns: 2 200px;
/* count width */

/* 12. Overflow */
overflow: hidden auto;
/* overflow-x overflow-y */

/* 13. Inset */
inset: 10px 20px 30px 40px;
/* top right bottom left */