CSS units

September, 2022

Intro

Usually, we get stuck when we have to think which CSS property we have to use as per our needs. For each property, several units are also there which we have to consider.

Before going for CSS units, let's look at what CSS is.

CSS stands for Cascading Style Sheet, and it is used to style web pages. By using CSS, we may customize the design of our website and give it a pleasing appearance to visitors.

CSS units

We need a number of properties, such as padding, width, height, radius, etc. to style the website. The numerous units in CSS known as CSS units are used to determine these attributes. These attributes all require the length unit. To express length, a variety of units can be employed.

It should be noted that a space cannot be provided between the number and the CSS unit indicating a needed property. Additionally, it is not required to include the unit for which the value is 0.

In CSS, there are two different kinds of length units:

Absolute Length Unit:

This unit of length is fixed and the length appears to be exactly that size when it is expressed in this unit format. Due of its rigidity, we cannot use this for responsive websites.

Some absolute length units are:

• cm - centimeter
• mm - millimeter
• pc - picas
• pt - points
• in - inches

Relative Length Unit

The units of relative length are based on the sizes of other elements. These units may scale to fit the window's size, making them suitable for usage on responsive websites.

Some relative length units are:

rem - This is relative for font - size of root element.

% - This is used to determine measurement as percentage.

vh - This is relative to the height of viewport.

em - This is relative for font-size.

Conclusion

So, we get that without CSS units, we cannot make a pleasant and good website as designing is equally important as logic.