I'm not understanding CSS in depth!

Question

It's just so confusing.
What exactly "100 px","100vh" and "100%" do? How do they differ?

How much exactly 1px,1vh,1% is?

I'm having trouble understand these terms please help.

Answer 1

Ok.
For % width/height, let's say you have a glass (container element) and water (child element).
Now, you pour the child element or water until the container element or the glass is half filled i.e. 50% filled.
Here, the glass is in the room(viewport)but you goal pour in the glass & not the room. So, for now, forget the room; focus on the glass.

Now, if the capacity of the container is 100ml, then its 50%will be 50ml. But if it is 500ml, then its 50% will be 250ml. So, the height & width of the child element depends on the height & width of the corresponding container. The size of the viewport (room) does not affect the amount of water the glass can hold. Whether you keep it in auditorium or cabin, the glass of capacity 100ml won't hold any more than 100ml,no matter where it's kept.
If I give you a vessel of capacity 100ml and ask you to fill it 70%, you can pour 70ml water in it.But if I say, fill 70% of A vessel, you'd ask:How tall & wide? So, you have to specify the height & width of the parent element.

Answer 2

i) Pixels(px)

px = pixels, a fixed unit

Example: width: 100px; means exactly 100 pixels wide, no matter the screen size.

Think of px as a ruler with specific notches, it doesn’t change

ii) Viewport Height(vh)

vh = viewport height. 1vh is 1% of the height of the visible browser window

Example: height: 100vh;
means the element will be as tall as the browser window

If your screen is 500px tall, then:-

1vh = 5px
100vh = 500px

iii) Percentage (%)

% = relative to the parent element (not screen or browser size)

Example: width: 100%;
means it will take up 100% of the width of the parent container

So if the parent is 500px wide

100% = 500px
50% = 250px

Answer 3

Manav Roy , px(pixels), vh (viewport height) and % are all units, just like km and yards.
However, px is an absolute unit while vh and % are relative units.

A 100px content remains the same size everywhere. On a huge screen, it will be very small while on a very small screen, it might appear huge. Pixel is a dot on the screen. A huge screen has many dots while a smaller one has lesser. On a mobile screen, 4px font size may be enough, but you'll need a microscope to read a 4px font displayed on a large screen. What I'm getting at is that it might not always be the best practice to use absolute units like px, cm and pt.

Viewport, as you may know, is the part of the screen visible to the user. 100vh (viewport height) means the entire visible height of the browser so it will be a full-screen content.

% is the relative size of a child element ( basically,an element nested inside a container) as compared to its parent element. In that case, it is best to define the height of the parent container element.

Answer 4

Ushasi Bhattacharya
Thanks you so much 🙏

Answer 5

Alhaaz
Ushasi Bhattacharya
Thanks for such a wonderful explanation.
I understood

Answer 6

But I'm bit confused in last one... % width/height

Answer 7

Feel free to ask if you have any further doubt(s).

Answer 8

Manav Roy , you're welcome.

Answer 9

CSS can be tricky when you first dive into it, but once you break down the units, it becomes clearer. "100px" is a fixed measurement, representing 100 pixels. "100vh" is 100% of the viewport height, meaning it’s based on the browser window’s height. "100%" represents 100% of the parent element's size, whether it's width or height. So, they each adjust differently depending on the context, like the screen or parent size. Keep experimenting, and it'll start to make more sense!
https://atmcalgary.com
atm calgary

Answer 10

If you want to learn CSS, feel free to ask any questions if you're feeling lost or confused. CSS, which stands for Cascading Style Sheets, is not difficult to understand. It works in conjunction with HTML, so having a solid understanding of HTML is essential for becoming proficient in CSS. I hope this helps!

Answer 11

Manav Roy Percent is a relative measurement based on parent element dimensions. There are caveats though because of the CSS box model, such as an inline element not having the height property respected. https://developer.mozilla.org/en-US/docs/Web/CSS/percentage https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model