Heyy all! Amena this side! 🔥

Today, we'll understand what is the px unit in CSS...

So let's go! 👇

Pixels 👻

What are pixels?

1. A pixel is the smallest unit of an image on a screen!

   In CSS, it's used to set the position of elements on the screen.

   One pixel is equal to one dot on the screen, so specifying a width or height of 100px will result in a 100-pixel-wide or 100-pixel-high element.

Understand px by code!

Let's understand this topic by code!

HTML code here! 👇🏻

<div class="px">
    <h1>heyy there!</h1>
</div>

The output of HTML code!

CSS code here! 👇🏻

/* What are pixels in CSS? */
/* Eg: */

.px{
    height: 1px;
    background-color: lightgreen;
}

So I have settled the height of the div to 1px...And remember 1 pixel = 1 dot...

So this is the height and it will be a straight line! Let me show you the OUTPUT...

Don't be confused It's easy for you! 😉

Let's set it to 100px and see what's the Output! 👇🏻

.px{
    height: 100px;
    background-color: lightgreen;
}

Output:

Hopefully, you are cleared with Pixels! Yayy! Congrats!

That is it for today guys! And I'll see you all in my next article till then take care and bye! ❤