Lecture

Pixel(px)

The following CSS code adjusts the font size of a paragraph (<p> tag) to 12px and styles the text color to blue.

p Tag CSS Example
p { font-size: 12px; color: blue; }

So, what does px in font-size: 12px; mean?

px stands for Pixel, a tiny dot on the digital screen.

CSS uses pixels to define lengths, widths, margins, etc., and unlike relative units like em or %, it maintains a fixed size.

Therefore, dimensions defined in px deliver consistent results across various devices and screens.

Besides px, there are other units used to specify dimensions:

  • em: A relative unit based on the element's parent size; changes according to the parent element's size

  • %: Specifies size as a percentage of the parent element's size

  • rem: A relative unit based on the root element (typically the <html> element)

  • vw and vh: Specifies size as a percentage of the viewport's (the area of the screen displaying the webpage) width (w) and height (h)

Each unit will be explained in detail in the following lessons :)


Follow the emphasized parts of the code and try inputting them yourself.

Mission
0 / 1

What does pixel (px) mean?

Screen resolution

Aspect ratio of the screen

A tiny dot on a digital screen

Screen size

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help

HTML
CSS
Loading...