Skip to main content
Practice

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.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.