In this article, you will learn about different CSS units with examples.
CSS units are a crucial aspect of web development and play a critical role in determining the size and layout of elements on a web page. In web development, choosing the appropriate CSS unit is essential to achieving the desired visual effect and ensuring that a design looks good on all devices and screen sizes.
CSS units of measurement determine the size and dimensions of elements in a web page. The units in CSS can be divided into two categories:
Absolute Units: Absolute units provide a fixed measurement in physical or screen units.
Pixels (px)
Inches (in)
Centimeters (cm)
Millimeters (mm)
Relative Units: Relative units provide a measurement relative to the size of another element, typically the parent element.
Percentage (%)
Em (em)
Rem (rem)
Viewport Width (vw)
Viewport Height (vh)
It's important to choose the appropriate unit of measurement based on the desired effect and the type of element being styled. For example, absolute units are good for elements with a fixed size, while relative units are good for elements that should scale based on the size of the viewport or other elements.
Top 5 CSS units commonly used
Below we have the top 5 CSS units which are commonly used:
Pixels (px): Pixels are the smallest unit of a digital image and correspond to one dot on a screen. They are widely used because they provide a fixed unit of measurement and allow for precise control over the size and positioning of elements.
Percentages (%): Percentages are used when an element's size should be relative to the size of its parent element. This makes it easier to create responsive designs that adapt to different screen sizes and devices.
Em (em): Em is a relative unit of measurement that is equal to the size of the font of the element being styled. It is commonly used to specify the size of text elements.
Rem (rem): Rem is a relative unit of measurement that is equal to the size of the root font, typically set on the <html> element. It is used to specify font size across an entire web page.
Viewport Width (vw): Viewport Width is a unit of measurement that is equal to 1% of the width of the viewport. It is commonly used to specify the width of elements relative to the size of the user's screen.
Viewport Height (vh): Viewport Height is a unit of measurement that is equal to 1% of the height of the viewport. It is commonly used to specify the height of elements relative to the size of the user's screen.
1. Pixels (px)
A pixel is the smallest unit of a digital image, and it corresponds to one dot on a screen. In CSS, 1px is equal to 1/96th of an inch. Pixels are the most commonly used unit in CSS and are great for fixed-width elements such as buttons, images, and headers.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.image-class {
width: 500px;
height: 300px;
border: 2px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>This is the example of CSS unit - Pixels (px)</h2>
<img src="https://static.wixstatic.com/media/0f65e1_3e80320ea2044c608142830455ab2503~mv2.jpg" alt="Example Image" class="image-class">
</body>
</html>
2. Percentage (%) :
The percentage is a relative unit of measurement and is based on the size of the parent element. In CSS, a percentage value is relative to the parent element's size.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.image-class {
width: 100%;
height: 100%;
border: 2px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>This is the example of CSS unit - Percentage (%)</h2>
<img src="https://static.wixstatic.com/media/0f65e1_3e80320ea2044c608142830455ab2503~mv2.jpg" alt="Example Image" class="image-class">
</body>
</html>
3. em
The em unit is commonly used to specify the size of text elements, such as headings and body text. the em unit is that it allows for more dynamic and flexible designs, as it adjusts to the size of the text. For example, if you specify that a heading should be 2 ems in size, it will automatically become larger or smaller depending on the size of the text in the element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 4em;
margin-bottom:1em;
}
p {
font-size: 5em;
line-height: 1em;
}
</style>
</head>
<body>
<h1>This is the example of CSS unit - em</h1>
<p>Hello</p>
</body>
</html>
4. Rem
The rem is a relative unit of measurement that is equal to the size of the root font, typically set on the <html> element. The rem unit is used to specify font size across an entire web page, rather than just a specific element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 16px;
}
h1 {
font-size: 5rem;
margin-bottom: 1.5rem;
}
p {
font-size: 5rem;
line-height: 4.5rem;
}
</style>
</head>
<body>
<h1>Life Quote:</h1>
<p>You only live once, but if you do it right, once is enough</p>
</body>
</html>
5. Viewport Width and Viewport Height
The viewport width and height are the dimensions of the visible area of a web page, as seen by the user. They are defined by the size of the user's device screen, and can be used to create responsive designs that adjust to the size of the screen.
Here's an example of using the viewport width and height in CSS with media queries:
cssCopy code
@media (max-width: 767px) {
/* styles for screens up to 767px wide */h1 {
font-size: 1.5em;
}
p {
font-size: 0.9em;
}
}
@media (min-width: 768px) and (max-width: 991px) {
/* styles for screens between 768px and 991px wide */h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
}
@media (min-width: 992px) {
/* styles for screens larger than 992px wide */h1 {
font-size: 2.5em;
}
p {
font-size: 1.1em;
}
}
In this example, the media queries use the min-width and max-width properties to define styles for different ranges of viewport widths. When the viewport width is less than or equal to 767 pixels, the styles for screens up to 767 pixels wide will be applied. When the viewport width is between 768 and 991 pixels, the styles for screens between 768 and 991 pixels wide will be applied. When the viewport width is greater than 992 pixels, the styles for screens larger than 992 pixels wide will be applied.
Others:
1. Inches (in):
Inches are a physical unit of measurement and are mainly used for print styles. In CSS, 1 inch is equal to 96 pixels.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.image-class {
width: 5in;
height: 4in;
border: 0.1in solid black;
border-radius: 0.5in;
}
</style>
</head>
<body>
<h2>This is the example of CSS unit - Inches (in)</h2>
<img src="https://static.wixstatic.com/media/0f65e1_3e80320ea2044c608142830455ab2503~mv2.jpg" alt="Example Image" class="image-class">
</body>
</html>
2. Centimeters (cm):
Centimeters are a physical measurement units mainly used for print styles. In CSS, 1 centimeter is equal to 37.8 pixels.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.image-class {
width: 10cm;
height: 10cm;
border: 0.1cm solid black;
border-radius: 5cm;
}
</style>
</head>
<body>
<h2>This is the example of CSS unit - Centimeters (cm)</h2>
<img src="https://static.wixstatic.com/media/0f65e1_3e80320ea2044c608142830455ab2503~mv2.jpg" alt="Example Image" class="image-class">
</body>
</html>
3. Millimeters (mm):
Millimeters are a physical measurement unit mainly used for print styles. In CSS, 1 millimeter is equal to 3.78 pixels.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.image-class {
width: 100mm;
height: 100mm;
border: 2mm solid black;
border-radius: 10mm;
}
</style>
</head>
<body>
<h2>This is the example of CSS unit - Millimeters (mm)</h2>
<img src="https://static.wixstatic.com/media/0f65e1_3e80320ea2044c608142830455ab2503~mv2.jpg" alt="Example Image" class="image-class">
</body>
</html>Which CSS Unit is most commonly used?
The most commonly used CSS unit of measurement is the Pixel (px). This unit is the smallest unit of a digital image and corresponds to one dot on a screen. Pixels are great for fixed-width elements such as buttons, images, and headers because they provide a reliable, consistent measurement that doesn't change with the size of the viewport or the device used.
Comments