Absolute units provide fixed measurements for your elements and text. In CSS, the px (pixel) unit is one of the most common absolute units. When you use pixels, the element's size does not change based on the screen size or resolution. This is useful when you need precise control over the layout.

Syntax

selector {
  property: valuepx;
}

Explanation:

• Pixels (px):
  • A pixel is a fixed unit of measurement.
  • Using px gives you an exact size regardless of the device.

Example 1: Setting a Fixed Width and Height

In this example, a <div> is set with a fixed width and height using pixels. The box will remain 300px wide and 200px tall on all devices.

Explanation:

• Fixed Dimensions:
  • The <div> has a width of 300px and height of 200px.
• Outcome:
  • The box size remains constant on all screens.

Example 2: Font Size in Pixels

In this example, a paragraph is styled with a fixed font size using pixels. The text remains the same size on every device.

Explanation:

• Fixed Font Size:
  • The paragraph text is set to 18px.
• Outcome:
  • The text looks the same on all devices because the measurement is absolute.

These examples show how the px unit is used to set exact dimensions and sizes. By using absolute units, you have clear and fixed control over how your elements appear on the page.