본문으로 건너뛰기

Pixels (px)

Pixels (px)

The CSS code below adjusts the font size of the paragraph (Paragraph) composed of previously defined p tags to 12px and changes the text color to blue.

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

What does px mean in font-size: 12px;?

px stands for Pixel, which is a small dot on a digital screen.

CSS uses pixel units to specify lengths, widths, margins, etc., and unlike relative units such as em or %, pixels have a fixed size.

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

For reference, besides px, other units of measurement include:

  • em: A unit that specifies the relative size of an element, which varies depending on the size of the parent element.

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

  • rem: Specifies the relative size based on the size of the root element (usually the <html> element).

  • vw and vh: Specifies the size as a percentage of the width (w) and height (h) of the viewport (the screen area where the webpage is displayed).

We will discuss each unit in more detail in the following lesson.


Follow and enter the emphasized parts of the code with an asterisk.