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.
Want to learn more?
Join CodeFriends Plus membership or enroll in a course to start your journey.