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 a paragraph (`<p>` tag) to `12px` and styles the text color to `blue`.

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

<br />

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

<br />

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

A pixel is the smallest unit on a digital screen, representing a single point. In CSS, px units indicate a fixed size, providing consistent results across various devices.

Pixel (px)

Pixel(px)

What does pixel (px) mean?