Thread by @junaidshaikh_js

CSS Shorthand Properties.

Learn 12 CSS shorthand properties and save your time by writing less code.

A thread ⤵️

#100DaysOfCode #CodeNewbie

1. background

Shorthand for -

→ background-color

→ background-image

→ background-position

→ background-size

→ background-repeat

→ background-origin

→ background-clip

→ background-attachment

2. border

Shorthand for -

→ border-width

→ border-style

→ border-color

3. outline

Shorthand for -

→ outline-width

→ outline-style

→ outline-color

4. font

Shorthand for

→ font-style

→ font-variant

→ font-weight

→ font-size / line-height

→ font-family

5. margin

Shorthand for

→ margin-top

→ margin-right

→ margin-bottom

→ margin-left

6. padding

Shorthand for

→ padding-top

→ padding-right

→ padding-bottom

→ padding-left

7. animation

Shorthand for

→ animation-name

→ animation-duration

→ animation-timing-function

→ animation-delay

→ animation-iteration-count

→ animation-direction

→ animation-fill-mode

→ animation-play-state

8. flex

Shorthand for

→ flex-grow

→ flex-shrink

→ flex-basics

9. gap ( grid-gap )

Shorthand for

→ row-gap

→ column-gap

10. grid

Shorthand for

→ grid-template-rows

→ grid-template-columns

→ grid-template areas

→ grid-auto-rows

→ grid-auto-columns

→ grid-auto-flow

11. place-items

Shorthand for

→ align-items

→ justify-items

12. place-items

Shorthand for

→ align-items

→ justify-items

Thank you for reading this thread 💛

If you liked this thread →

1. Follow me ( @junaidshaikh_js ) for more related content
2. Retweet the first tweet to help others discover this knowledge.

Keep coding 😉

https://twitter.com/junaidshaikh_js/status/1422431567679348736?s=20

12. transition

Shorthand for

→ transition-property

→ transition-duration

→ transition-timing-function

→ transition-delay