๐ŸŒ† 60+ CSS Shorthand Properties: Cheat Sheet

๐Ÿ’Ž Direct Link for High-Resolution Image

If you liked this one, give a โญ๏ธ to this GitHub repo to support my work.

โœง Direct Link:
https://t.co/4tm0id59LH
What did we cover?

Here are those.

โž€ all
โž background
โž‚ background-position
โžƒ font
โž„ text-align
โž… text-decoration
โž† text-emphasis
โž‡ list-style
โžˆ offset
โž‰ overflow
โž€โž€ inset
โž€โž inset-block
โž€โž‚ inset-inline
โž€โžƒ margin
โž€โž„ margin-block
โž€โž… margin-inline
โž€โž† padding
โž€โž‡ padding-block
โž€โžˆ padding-inline
20. overscroll-behavior
โžโž€ scroll-margin
โžโž scroll-padding
โžโž‚ border
โžโžƒ border-top
โžโž„ border-right
โžโž… border-bottom
โžโž† border-left
โžโž‡ border-block
โžโžˆ border-block-start
30. border-block-end
โž‚โž€ border-inline
โž‚โž border-inline-start
โž‚โž‚ border-inline-end
โž‚โžƒ border-color
โž‚โž„ border-block-color
โž‚โž… border-inline-color
โž‚โž† border-style
โž‚โž‡ border-block-style
โž‚โžˆ border-inline-style
40. border-width
โžƒโž€ border-block-width
โžƒโž border-inline-width
โžƒโž‚ border-radius
โžƒโžƒ border-image
โžƒโž„ outline
โžƒโž… block-step
โžƒโž† mask
โžƒโž‡ animation
โžƒโžˆ transition
50. pause
โž„โž€ columns
โž„โž columns-rule
โž„โž‚ flex
โž„โžƒ flex-flow
โž„โž„ place-content
โž„โž… place-items
โž„โž† place-self
โž„โž‡ grid
โž„โžˆ grid-area
60. grid-column
โž…โž€ grid-row
โž…โž grid-template
โž…โž‚ gap
Hey ๐Ÿ‘‹

I am a Tech Writer, Educator, and Mentor from India ๐Ÿ‡ฎ๐Ÿ‡ณ, here sharing

โœ… Tutorials
โœ… Tricks
โœ… Career Tips
โœ… Cheat Sheets
โœ… Practice Questions
โœ… Project Ideas
on
โž  Web Development
โž  Data Structures and Algorithms
โž  Databases

Thanks for reading. ๐Ÿ™

More from Swapna Kumar Panda

๐Ÿ›ฃ Beginner's Roadmap for Front-End

HTML & CSS โ†’ ๐Ÿ‘ฉโ€๐Ÿ’ป โ†’ JavaScript โ†’ ๐Ÿ‘ฉโ€๐Ÿ’ป
โ†“
๐Ÿ‘ฉโ€๐Ÿ’ป โ† React* โ† ๐Ÿ‘ฉโ€๐Ÿ’ป โ† Tailwind*
โ†“
TypeScript โ†’ ๐Ÿ‘ฉโ€๐Ÿ’ป โ†’ Next.js* โ†’ ๐Ÿ‘ฉโ€๐Ÿ’ป โ†’ ๐Ÿ

โ‡ฉ

What would we cover?

โžŠ HTML & CSS
โž‹ JavaScript
โžŒ CSS Frameworks
โž UI Frameworks
โžŽ TypeScript
โž Server-side Frameworks
โž Practice, Practice and, Practice
โž‘ Other Skills
โž’ Frequently Asked Questions

โžŠ HTML & CSS

โฌ˜ Your Front-End journey shall always start from HTML & CSS and, ends with these as well.

โฌ— Don't over burden yourself to learn everything at once. It's a continuous subject.

โฌ™ Do not separate HTML from CSS. That's


โž‹ JavaScript

JavaScript is essential. You should start with basics and move to complex subjects.

โ JavaScript Syntaxes
(preferably ES6 onwards)
โ HTML DOM API
โ Event Handling
โ Fetch


โžŒ CSS Frameworks

CSS Framework is necessary if you are planning to be a professional developer.

There are so many options available.

โ Tailwind CSS
โ Bootstrap
โ Chakra
โ Bulma
โ Foundation
โ Skeleton
โ Pure CSS

Start with anything. You can switch any time.

More from Catagory jee

You May Also Like