Trending October 2023 # Different List Of Css Units With Examples # Suggested November 2023 # Top 18 Popular

You are reading the article Different List Of Css Units With Examples updated in October 2023 on the website Saigonspaclinic.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 Different List Of Css Units With Examples

Introduction to CSS Units

CSS Units are 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, and font size to express their length in units without whitespace, and it accepts negative values. For a value’ 0,’ the units can be neglected.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

List of CSS units (Explain each with an example)

This section will highlight a few popular CSS Units types to set the properties. Two types of CSS Units are classified as absolute and Relative Units.

1. Absolute Units

The Absolute unit sets the size and is not applicable for screen size since the size varies for the screen image. The size remains the same on the phone or on a large window screen for any property set to absolute value. For example, when you already know the output size, such as a page layout, you consider it an absolute unit. This unit is suitable when you do not expect responsiveness from the site and is also useful for defining max and min-width when the areas become excessively wide.

px: These pixels are the most popular unit for screen size. This is the most common unit in CSS, which fixes the element’s width 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:

blockquote { width: 50%; margin: 25px auto; padding: 18px; font-size: 14px; box-shadow: inset 11px 3px 22px 3px purple, 3px 3px 9px 2px pink; }

Output:

pt: It defines the units as points. In CSS, we assign one point as 1/72 inch. This unit is highly recommended for devices such as printers.

Syntax:

property : vpt;

Where ‘v’ is the numeric value. Ex: height : 10pt;

Example of the unit in points

.pointvalue { font-size: 22pt; color:red; }

Output:

pc: This unit represents the length in picas and is not highly recommended by W3C.

Syntax:

property: a pt;

Where ‘a’ is any numeric value.

in: This inch is specifically used when you create a printed book page.

Example:

Implementing ‘pc’ and ‘in’ units together

.examp { font-size: .7pc; font-weight:bold; } .skill { font-size: .3in; line-height: .2in; }

Output:

cm: The most commonly used for daily purposes is centimeters, which is used less in web development cases.

Example:

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; }

mm: The length is specified as a millimeter.

Example:

.abc { font-size: 10mm; font-weight:bold; } .demo { font-size: 6mm; line-height: 2mm; }

Output:

Example:

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 */

Output:

2. Relative Units

These units are not fixed across devices and are widely used for low-resolution screen sizes, making them suitable for responsive website design. They specify the relative units which are completely dependent on other length properties. This preference is especially prominent for digital media screens. A 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 following example, we calculate the em value in pixels.

div { font-size: 20px; background: purple; } .base { font-size: 2em; width: 6em; background: red; } .derived { font-size: 0.6em; background: darksalmon; } The Exact font size of the div property is 30px.

Output:

rem: The value of this element is always equal to the ‘s font-sizeroot element’s font-size. Here is the demo.

Example:

body { text-align: center; } div { font-size: 2.1rem; } span { font-size: 3rem; } .hex { font-size: 12px; padding-top: 120px; }

Output:

ch: It equals 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: We use this when we require an image to adjust its size to fit smaller or larger viewport dimensions.

ex: This unit is a completely lower value assignment of the font size.

Example: Relative Units example.

.v1 { font-size:3vh; } .v2 { font-size:3vw; } .v3 { font-size:3vmax; } .v4 { font-size:3vmin; }

Output:

Note: Here, the viewport is your visible area on 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.