There are 259 CSS properties. To be productive, you only need to know 20.
Here's the list of CSS rules you should remember, and how to derive the rest.
A thread 🧵
Here's the list of CSS rules you should remember, and how to derive the rest.
A thread 🧵
1. color
Changes the text color. Prefix with background or border to change the respective color. It will cover 95% of your coloring needs.
Here's how to use them:
Changes the text color. Prefix with background or border to change the respective color. It will cover 95% of your coloring needs.
Here's how to use them:
2. width
3. height
Use to change the size of the element. Can be a fixed value (px, em, rem) or a percentage value.
Here's how:
3. height
Use to change the size of the element. Can be a fixed value (px, em, rem) or a percentage value.
Here's how:
4. padding
5. margin
Use to control free space inside and around the element.
Suffix with top/bottom/right/left for more granular control.
The shorthand syntax follows a clockwise direction starting from the top.
Here's an example:
5. margin
Use to control free space inside and around the element.
Suffix with top/bottom/right/left for more granular control.
The shorthand syntax follows a clockwise direction starting from the top.
Here's an example:
6. border
Use a shorthand: "border: 1px solid red;"
It combines the properties: border-width -> border-style -> border-color.
Often you don't need fancy borders, so just remember that shorthand and tweak it to your needs.
Here it is in code:
Use a shorthand: "border: 1px solid red;"
It combines the properties: border-width -> border-style -> border-color.
Often you don't need fancy borders, so just remember that shorthand and tweak it to your needs.
Here it is in code:
7. display
Used to hide the elements or change to flexbox model.
Here's what to remember:
Used to hide the elements or change to flexbox model.
Here's what to remember:
8. flex
9. flex-direction
10 align-items
11. justify-content
They're all necessary flexbox properties. Learn them in-depth from @NikkiSiapno.
9. flex-direction
10 align-items
11. justify-content
They're all necessary flexbox properties. Learn them in-depth from @NikkiSiapno.
12. font
Shorthand is long and confusing. But the properties you will use the most are font-family and font-size. Remember it's font, not text.
Shorthand is long and confusing. But the properties you will use the most are font-family and font-size. Remember it's font, not text.
13. position
Relative - use on the parent of "absolute" element.
Absolute - overlay on content, specifying coordinates in "relative" parent.
Fixed - overlay on top, relative to the browser window.
14-17. top / left / right / bottom
Coordinates for fixed and absolute elements.
Relative - use on the parent of "absolute" element.
Absolute - overlay on content, specifying coordinates in "relative" parent.
Fixed - overlay on top, relative to the browser window.
14-17. top / left / right / bottom
Coordinates for fixed and absolute elements.
18. z-index
To control which elements will be on top when their boxes overlap. Higher number - higher priority. Often used with absolute or fixed elements.
To control which elements will be on top when their boxes overlap. Higher number - higher priority. Often used with absolute or fixed elements.
19. overflow
Most commonly used to enable scrolling inside of the element by specifying `overflow: auto;`
Sometimes combined with `overflow: hidden;` on the parent.
Can control the horizontal/vertical direction by suffixing with x/y.
Most commonly used to enable scrolling inside of the element by specifying `overflow: auto;`
Sometimes combined with `overflow: hidden;` on the parent.
Can control the horizontal/vertical direction by suffixing with x/y.
20. box-sizing
Controls what width/height mean - content size or box size.
Just set `box-sizing: border-box;` on all elements to prevent frustration.
If you want to understand this, here's an in-depth explanation from @ishratUmar18
Controls what width/height mean - content size or box size.
Just set `box-sizing: border-box;` on all elements to prevent frustration.
If you want to understand this, here's an in-depth explanation from @ishratUmar18
@ishratUmar18 The 80/20 rule applies to CSS.
This guide is simplified and isn't a complete list of available properties/values. But that's the point! You don't need to know everything to be efficient.
If you enjoyed and want more of these:
1. Follow me @VincasStonys
2. Like & retweet
This guide is simplified and isn't a complete list of available properties/values. But that's the point! You don't need to know everything to be efficient.
If you enjoyed and want more of these:
1. Follow me @VincasStonys
2. Like & retweet
Loading suggestions...