Let's Learn About Pixels (px) Unit In CSS

Let's Learn About Pixels (px) Unit In CSS

Apr 29, 2023ยท

2 min read

Play this article

Heyy all! Amena this side! ๐Ÿ”ฅ

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

So let's go! ๐Ÿ‘‡

Pixels ๐Ÿ‘ป

graphics - What is a pixel (px) in CSS? - Stack Overflow

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>

The output of HTML code!

CSS code here! ๐Ÿ‘‡๐Ÿป

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

    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! ๐Ÿ‘‡๐Ÿป

    height: 100px;
    background-color: lightgreen;


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! โค