Introduction to CSS Units
CSS Units is defined as the different ways where the length is expressed. This Unit specifies how the web design interacts with various devices, also considered a base measurement unit. The Units in CSS help the CSS properties like margin, width, font-size to express their length in units without whitespace, and it accepts negative value too. For a value ‘0,’ the units can be neglected.
List of CSS units (Explain each with example)
In this section, we will highlight a few popular CSS Units types to set the properties. There are two types of CSS Units which are classified as absolute and Relative Units.
1. Absolute Units
The Absolute unit is fixed in size, and it is not used in Screen size as the size varies for the Screen image. For any property that is set to absolute value, the size remains the same either on the phone or on a large window screen. For example, the known output size such as a page Layout is considered to be an Absolute unit. This unit is considered well when we don’t expect any responsiveness from the site and also benefits in defining max and min-width where the areas become too wide.
The list of Physical Absolute units are:
- px: This is pixels that are the most popular unit for screen size. This is the most common unit in CSS, which fixes the width of the element in the code. Also used in Spacing and position properties. So pixel is a visual angle of a device and fixes the size of an element on a screen.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
blockquote {
width: 50%;
margin: 25px auto;
padding: 18px;
font-size: 14px;
box-shadow: inset 11px 3px 22px 3px purple, 3px 3px 9px 2px pink;
}
</style>
</head>
<body>
<h1><center> A Paragraph content resizing using CSS Units</h1>
<blockquote>
<q>There are few portals when you can start your beginning in Practicing Skills on HTML and CSS</q>
<p>— Please generate and share the link</p>
</blockquote>
</body>
</html>Output:
- pt: It defines the units as points. In CSS, one point is assigned as 1/72 inch. This unit is recommended most for devices like printers.
Syntax:
property : vpt;Where ‘v’ is the numeric value. Ex: height : 10pt;
Example of the unit in points
<!DOCTYPE html>
<html>
<head>
<style>
.pointvalue {
font-size: 22pt;
color:red;
}
</style>
</head>
<body>
<p>A complete paragraph content</p>
<p class="pointvalue">EDUCBA- Online Tutorial</p>
<p> dimensions are : 1pt=1.4px so 22pt=30.8px</p>
</body>
</html>Output:
- pc: This unit states that it is the picas length unit, and it is not recommended much by W3C.
Syntax:
property: a pt;where ‘a’ is any numeric value.
- in: This inch is specifically used when creating a printed book page.
Example:
Implementing ‘pc’ and ‘in’ units together
<html>
<head>
<title>Absolute unit- Inches</title>
<style>
.examp {
font-size: .7pc;
font-weight:bold;
}
.skill {
font-size: .3in;
line-height: .2in;
}
</style>
</head>
<body>
<div class = "examp"> A complete Guide</gfg>
<div class = "skill"> Beginners to Intermediate How to become a Web Developer </body>
</html>Output:
- cm: The most commonly used for daily purposes is centimeters, which is used less in web development cases.
Example:
<!DOCTYPE html>
<html>
<head>
<title> CSS Relative units- Example </title>
<style>
body {
margin: 1cm;
padding: 0.5cm;
font-family: 'Times Roman';
font-size: 0.8cm;
}
p {
padding: 12px 4px;
margin: 1cm;
color: darksalmon;
}
p:nth-of-type(1) {
background: pink;
color: white;
}
p:nth-of-type(2) {
background: yellow;
border: 1px dotted blue;
font-family: 'Dosis';
}
p:nth-of-type(3) {
background: orange;
color: white;
}
p:nth-of-type(4) {
background: #56200e;
}
</style>
</head>
<body>
<p>This is Trading Activity for many investors</p>
<p> It is simply the business of exchanging commodities between the people.</p>
<p>Serves as a Platform for many registered users.</p>
<p>This is an example for Units using a paragraph</p>
</body>
</html>Output:
- mm: The length is specified as a millimeter.
Example:
<html>
<head>
<title>Absolute unit- MM</title>
<style>
.abc {
font-size: 10mm;
font-weight:bold;
}
.demo {
font-size: 6mm;
line-height: 2mm;
}
</style>
</head>
<body>
<div class = "abc"> Sizing the Content</abc> <br> </br>
<div class = "demo"> CSS properties Requiring Size Values</div>
</body>
</html>Output:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo of CSS units - Absolute Units</title>
<style>
h1 { margin: 0.1in; } /* inches */
h2 { line-height: 4cm; } /* centimeters */
h3 { word-spacing: 5mm; } /* millimeters */
h4 { font-size: 14pt; } /* points */
h5 { font-size: 2pc; } /* picas */
h6 { font-size: 14px; } /* picas */
</style>
</head>
<body>
<h1># CSS Level-Demo of CSS units - Absolute Units</h1>
<h2>CSS Units Explained</h2>
<h3>By Mark Tommy</h3>
<h4>Definition on CSS Units</h4>
<h5>Conclusion</h5>
<h6>Further Reading</h6>
</body>
</html>Output:
2. Relative Units
These units are not fixed across the devices and are well used for low-resolution screen size and have a good, responsive site. They specify the relative units which are completely dependent on other length property. This is especially preferred for digital media screens Few of the Relative units are:
- Percentage: This helps enclose parent elements in percentage.
- em: This relative unit falls on the element font-size. When we define the font size for the HTML element, their values are relative to one other. for example, if the font-size of the parent is 10px and the child is 0.2 em, then the rendered size is 2px. Thus, the font size of the child element could be increased or decreased.
Example: In the below example, the em value is calculated to pixels.
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
background: purple;
}
.base {
font-size: 2em;
width: 6em;
background: red;
}
.derived {
font-size: 0.6em;
background: darksalmon;
}
</style>
</head>
<body>
<div>
The Exact font size of the div property is 30px.
<p class="base">2em will be 30px done So now the new Width of paragraph is 6em i.e. 6*30px = 180px <p>
<p class="derived">2em will be 0.6*30 = 18px</p>
</div>
</body>
</html>Output:
- rem: The value of this element is always equal to the font-size of the root element. Here is the demo.
Example:
<html>
<head>
<style>
body {
text-align: center;
}
div {
font-size: 2.1rem;
}
span {
font-size: 3rem;
}
.hex {
font-size: 12px;
padding-top: 120px;
}
</style>
</head>
<h1>Demo on rem -unit</h1>
<p>The CSS unit values<code>div</code> with the different types.
</p>
<div>
<p>Font size – 20.1px</p>
<div>
<p>Font size – 20.2px</p>
<div>
<p>Font size – 21.5px
<br><br><span> Font size – 45px</span></p>
</div>
</div>
</div>
<p class="hex">A complete Web Page.</p>
</html>Output:
- ch: It is equal to the width of an element ‘0’. It means all the characters are of the same width.
Example:
width: 20ch;- vh: Relative to the height of the viewport.
Example:
font-size: 12vh;- vw: Relative to the width of the viewport.
Example:
font-size :8vw;- vmin, vmax: This is used when we need an image to fit in size with smaller or larger viewports dimensions.
- ex: This unit is a completely lower value assignment of the font-size.
Example: Relative Units example.
<!DOCTYPE html>
<html>
<head>
<title> CSS Relative units- Example </title>
<style>
.v1 {
font-size:3vh;
}
.v2 {
font-size:3vw;
}
.v3 {
font-size:3vmax;
}
.v4 {
font-size:3vmin;
}
</style>
</head>
<body>
<p class="v1">Layout Height (3vh) placed</p>
<p class="v2">Layout Width (3vw) placed</p>
<p class="v3"> Layout Max (3vmax) - vh/vw placed </p>
<p class="v4"> Viewport Min (3vmin) - vh/vw placed </p>
</body>
</html>Output:
Note: Here, the viewport is your visible area in the browser screen.
Conclusion
We end here with a brief note on CSS Units which is the most fundamental aspect while creating a page layout design. Therefore, in this article, we have seen different CSS units and how it works which is very helpful to create a better layout design.
Recommended Articles
This is a guide to CSS Units. Here we discuss the List of CSS units and how it works and Explain each example along with the outputs. You may also have a look at the following articles to learn more –
