Hello Folks, Today we get to talk about CSS Units. CSS Units are those suffixes attached to numbers or values of properties. For instance, setting up the height as height: 100px.The height is the property, 100 is the value and px is the CSS unit. These values do not apply if they have no unit.

Most people casually use any unit, and there are also units some of us do not know about or have never used. Every CSS unit has an advantage, and time of use. The most popular of all units is pixel (px). Let’s take a look at them all and know when to use them.

• Absolute units When we talk about absolute units, we are talking about units that do not scale i.e they do not reduce or increase in size depending on the device. We use these units when responsiveness is not vital. It appears the same size either or desktops, tablets, and mobile devices. Examples include;

• the popular unit, pixel (px)

• pt i.e point

• pc i.e parsec

• cm i.e centimeter

• mm i.e millimeter

• in i.e inches

• Relative Units: When working on responsive projects, it is essential you use Relative units. These units scale to fit the window size you are working on and hence, helps to avoid updating of values for each screen size. However, it is difficult to determine which to choose, as there are varieties of them. Let’s go through each;

• % as in percentage: This is relative to the parent element’s value for that property. Imagine assigning height: 10% to the footer of a website. The footer would take only 10% of the size of the screen height. Hence, % divides the container by 100.

• em as in emphemeral unit : this unit is half the size of the current font-size of a parent element. Example a paragraph being half the size of its heading. e.g

header h1{
font-size: 2rem;
}
header p{
font-size: 1em;
}

• rem as in root em : rem unit on the contrary is twice the size of a child element, just as shown in h1 above. 1rem is also equal to 16px.

• ch as in characters: characters always have the same width. This unit could be used for spacing based on character size. E.g

.subheading{
    padding: 5ch;
}

• vh as in viewport height: this unit is relative to the height of the device screen/window. The height of landing pages are always 100vh. E.g

body{
    height: 100vh;
}

• vw as in viewport width : this unit is relative to the width of the device screen/window. if you want a sidebar or article that would only take a some part of the screen width, you can say;

.sidebar{
    Width: 40vw;
}

• vmin as in minimum viewport : this is relative to the viewport’s smaller dimension. For an image, using vmin means it would display based on the viewports width, even if it is larger in size than the width of the viewport. E.g

img{
    min-width: 100vmin;
}

• vmax as in maximum viewport : this is relative to the viewport’s larger dimension. Using this unit means you don’t care if the image exceeds the viewport width and causes a scroll overflow. E.g

img{
    width: 100vmax;
}

• ex as in equal to the height of lowercase character ‘x’: this unit is hardly used, but you can use it to measure your desired line-height space. E.g a line-height of 2ex would be twice the size of a lowercase letter ‘x’.

div{
line-height: 2ex;
}

I hope this article has made you more familiar with CSS units. Kindly follow me here and on twitter @jovialcoderr