20 CSS Rules You Should Never Forget. - VincasStonys
Tags: css, webdev, design, beginners
Published: 2022-10-18 14:47:47

####   Original Tweet From  [@VincasStonys](https://twitter.com/VincasStonys)
{% embed https://twitter.com/VincasStonys/status/1577551954137743360 %}
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 🧵 

###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: ![Twitter Image 0](https://pbs.twimg.com/media/FeSXJv6WQAElA6-.jpg) 

###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: ![Twitter Image 1](https://pbs.twimg.com/media/FeSXKeEXoAEI8QA.jpg) 

###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: ![Twitter Image 2](https://pbs.twimg.com/media/FeSXK7YWYAEo03p.jpg) 

AdSpace Here!!

###6/. border

Use a shorthand: "border: 1px solid red;"

It combines the properties: border-width -&gt; border-style -&gt; 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: ![Twitter Image 3](https://pbs.twimg.com/media/FeSXLgcXEAEbC5E.jpg) 

###7/. display

Used to hide the elements or change to flexbox model.

Here's what to remember: ![Twitter Image 4](https://pbs.twimg.com/media/FeSXL-ZXoAAZZKr.jpg) 

###8/. flex
###9/. flex-direction
###10/. align-items
###11/. justify-content

They're all necessary flexbox properties. Learn them in-depth from [@NikkiSiapno](https://twitter.com/NikkiSiapno). {% embed https://twitter.com/1511613750637318151/status/1576139398030282758 %} 

###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. ![Twitter Image 5](https://pbs.twimg.com/media/FeSXMmQXoAAqHxk.jpg) 

AdSpace Here!!

###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. ![Twitter Image 6](https://pbs.twimg.com/media/FeSXNEtWAAE1oPh.jpg) 

###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. ![Twitter Image 7](https://pbs.twimg.com/media/FeSXNmVXwAAqOh5.jpg) 

###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. ![Twitter Image 8](https://pbs.twimg.com/media/FeSXOeEXoAABqAc.jpg) 

###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](https://twitter.com/ishratUmar18) ![Twitter Image 9](https://pbs.twimg.com/media/FeSXO8QXkAA6szM.jpg) {% embed https://twitter.com/1415892657612726275/status/1556652722182430723 %} 

[@ishratUmar18](https://twitter.com/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](https://twitter.com/VincasStonys)
2. Like &amp; retweet {% embed https://twitter.com/119787699/status/1577551954137743360 %} 



#### Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)