Pixel(px)
The following CSS code adjusts the font size of a paragraph (<p>
tag) to 12px
and styles the text color to blue
.
p { font-size: 12px; color: blue; }
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 :)
Follow the emphasized parts of the code and try inputting them yourself.
What does pixel (px) mean?
Screen resolution
Aspect ratio of the screen
A tiny dot on a digital screen
Screen size
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help