Stay away from "px" and use relative units and percentage

So welcome, quick overview, we have three types of CSS units and they are: Absolute Units, Relative units, Percentage.

Absolute units are pixels(px) which is always fixed on the screen and some others we won't be discussing in the article as they not being used often and I would advise you stay clear of them.
Percentage they are easy to understand and they are always relative to the parent element.
Relative units are divided into two which are:

i. Relative to font-size and they are the "em" and "rem" (which we would be discussing about in this article).

ii. Relative to viewport(vm, vh, vmin, vmax) {we won't be discussing them in this article}.

Pixels(px)

So what is pixel, px for short? pixels are technically a dot on the screen and they are fixed which is close to a bad feat if we want to achieve responsiveness in our web pages.

For example, a 620px of your screen size will definitely be different on a larger or smaller screen size, so know this. How do we solve this problem that leads us to Percentage(%), em and rem.

Percentage(%)

So Percentage in this context is a relative unit and they always work or adapt relatively with the size of their parent element.

For example, a width of 50% on your screen will also take up 50% of any screen it's left to the screen size to determine either it scales up or down; Percentages are best used for width and images.

Em

The em is also a realtive unit and they are also relative to their parent element's font-size. PLEASE NOTE, fonts are inherited and by default they are always 16px if they are not being declared.

For example, a <li>tag font-size is relative to the font-size declared in the <ul>tag. so if the font-size isn't declared in the em checks the grandparents could<div> in this case, then it assigns the font-size of the <li> by that. Em is calculated by the font-size of the body if declared or by the default font-size which is 16px if it's not declared. i.e 16px = 1em, 32px = 2em, if the font-size set on the body is 20px then 1em = 20px, as you can see the only place to use px yet is only the body element.

Problem of em

So take note if not used well em creates a cascading effect when used for font-sizes, let me explain that better as we both know em gets their font-size relatively from their parent element, so elements of same tags tend not to be uniform as they might different parents and they are definitely not getting the calculations for their measurements from one source as each element rely on their parent.

Solution to the em problem is to introduce you to rem

to start with, What is rem? rem is a short for "Root element", i.e all elements using the rem are always relative to the "root" of the webpage. In other words, rem solves the multiple sources problem of the em, our elements now get their calculations for measurements from one unique source which is the root.

What is the root? The root of an html page is the html element, just by declaring the font-size in the html element we are one step closer to a achieving smooth responsive web page. for instance html {font-size: 18px}

so I think you know now the best place or the only place to use px rn is in html tag.

Choosing units to use

now that we all know that "px" cause a lot of problems, as they are fixed( one dot on the screen) just because of new emergence of different devices with different screen resolution. so the problem we are solving is e.g if you set 18px on a regularly display, it could look good on your screen but it definitely won't look good on a higher screen resolution or larger screen.