lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# Pixel (px)

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

```css title="Example CSS for p tag"
p {
  font-size: 12px;
  color: blue;
}
```

<br />

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 :)

<br />

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

A pixel is the smallest unit on a digital display and represents a single dot on the screen. In CSS, the px unit denotes a fixed size and provides consistent results across various devices.

Pixel (px)

What does pixel (px) mean?