Skip to main content
Practice

Pixel (px)

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

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

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

px represents a single dot on a digital screen, known as a pixel.

CSS uses pixels to define length, width, margins, etc. Unlike relative units like em or %, px has a fixed size.

Thus, measurements defined in px provide consistent results across various devices and screens.

In addition to px, other units for measurements include:

  • em: A unit that defines a size relative to the parent element's size, changing based on the parent element

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

  • rem: Defines relative sizes based on the root element (typically the <html> element)

  • vw and vh: Define sizes as a percentage of the viewport's (the screen area in which a webpage is displayed) width (w) and height (h)

We'll cover each of these units in more detail in the following lessons :)


Follow the highlighted parts of the code to practice typing it out.

Want to learn more?

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