CSS Shorthand

Question 1

What is the CSS shorthand property for setting all margins?

Answer 1

margin: top right bottom left;

You can also use 1 to 4 values:

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 */

Question 2

How do you use the shorthand padding property?

Answer 2

padding: 10px;              /* All sides */
padding: 10px 20px;         /* Top & bottom | Left & right */
padding: 10px 20px 30px;    /* Top | Left & right | Bottom */
padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */

Question 3

How do you use the CSS shorthand for setting a border?

Answer 3

border: 1px solid black;

This sets:

Border width: 1px

Border style: solid

Border color: black

Question 4

How do you write a complete font shorthand declaration?

Answer 4

font: italic small-caps bold 16px/1.5 "Open Sans", sans-serif;

Order:

font-style

font-variant

font-weight

font-size

/line-height

font-family

At minimum, font-size and font-family are required.

Question 5

What is the CSS shorthand for setting a background?

Answer 5

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

Sets:

Background color

Image

Repeat

Position

Size
You can also control background-attachment and background-origin.

Question 6

How do you use the shorthand list-style?

Answer 6

Sets:

list-style-type: square

list-style-position: inside

You can also add an image:
~~~

list-style: square inside url(‘bullet.png’);
~~~

Question 7

What does the flex shorthand represent?

Answer 7

flex: 1 1 auto;

Sets:

flex-grow

flex-shrink

flex-basis

Question 8

How do you use the shorthand for animation?

Answer 8

animation: slide-in 2s ease-in-out 0.5s infinite alternate;

Sets:
Name
Duration
Timing-function
Delay
Iteration count
Direction
Fill-mode (optional)
Play state (optional)

Question 9

How do you write a transition shorthand?

Answer 9

transition: background-color 0.3s ease-in-out 0.2s;

Sets:
Property
Duration
Timing-function
Delay

Question 10

How do you write the outline shorthand?

Answer 10

outline: 2px dashed red;

Sets: width, style, color

Question 11

How do you write a shorthand for multi-columns?

Answer 11

columns: 200px 3;

Sets: column width, column count

Question 12

What does the grid shorthand do?

Answer 12

grid: auto-flow / 1fr 1fr 1fr;

Sets:
grid-template-rows
grid-template-columns
grid-auto-flow

Question 13

How do you set the shorthand for grid-area?

Answer 13

grid-area: 1 / 2 / 3 / 4

Combines: grid-row-start, grid-column-start, grid-row-end, grid-column-end.

Question 14

Set the shorthand for text-decoration.

Answer 14

text-decoration: underline red wavy;

Combines: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness.

Question 15

Set the shorthand for filter.

Answer 15

filter: grayscale(50%) blur(2px);

Combines: various filter functions like blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), sepia(), saturate().