CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS Units

CSS Units

In CSS, there are so many units available to show the length’s measurement. A single unit of CSS is applied to examine the size of the property, which the user set for content or element. The CSS unit is required to depict any measurement like margin: 30px; where the pixel or px is a unit of CSS. These units are applied to set the lengths, padding, margin, and many others.

Let’s understand some key points.

  • We can’t apply the whitespace among the unit and the number.
  • A unit may be neglected for 0.
  • A few CSS properties permit the length’s negative values.

The CSS units can be of two types:

  • Relative length
  • Absolute length

Relative lengths

This type of length is suitable to design any responsive site for the reason it scales relative to a parent or any size of the window. It describes the length, i.e., relative to other length properties.

If the screen size varies a lot, then the units of relative length are better because these units scale among the distinct rendering mediums (depending over the device). We can apply any relative units similarly, like a default for a responsive unit. The relative length provides help to ignore update designs for distinct screen sizes.

A few relative lengths are discussed and explained in the following table:

UnitName
emThis unit is relative to an element’s font-size.
exThese units are relative to the component’s font’s x-height. It is used rarely. Any x-height can be examined by the lowercase letter ‘x’ height.
chThis unit is quite similar to the ex unit, but rather than using the ‘x’ letter’s height, it measures an integer “0” (zero) width.
remIt is considered as the font size of the root element.
vhThese units corresponds to the viewport’s height. 1vh= 1% or 1/100 of the height of viewport.
vwThese units are relative to the viewport’s width. 1vh= 1% or 1/100 of the width of viewport.
vminThese units are relative to the viewport’s smaller dimension. 1vh= 1% or 1/100 of the lower dimension of a viewport.
vmaxThese units are relative to the viewport’s smaller dimension. 1vh= 1% or 1/100 of the lower dimension of a viewport’s.
%This unit is applied to represent a measurement like a percentage, i.e., relative to other values.

Consider the below examples:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body
{ 
text-align: center; 
} 
p
{ 
line-height: 0.1cm; 
color: navy; 
} 
</style> 
</head> 
<body> 
<h1> Relative units </h1> 
<p style = "font-size: 2em;" > It has the font-size: 2em; </p> 
<p style = "font-size: 8ex;" > It has the font-size: 8ex; </p> 
<p style = "font-size: 6ch;" > It has the font-size: 6ch; </p> 
<p style = "font-size: 4rem;" > It has the font-size: 4rem; </p> 
<p style = "font-size: 4vw;" > It has the font-size: 4vw; </p> 
<p style = "font-size: 10vh;" > It has the font-size: 10vh; </p> 
<p style = "font-size: 10vmin;" > It has the font-size: 10vmin; </p> 
<p style = "font-size: 8vmax;" > It has the font-size: 8vmax; </p> 
<p style = "font-size: 400%;" > It has the font-size: 400%; </p> 
</body> 
</html> 

Output:

CSS Units

Example: Time

A few animations attribute need values to show in time.

UnitDescription
sThis value is the time duration in seconds.
msThis value Is the time duration in milliseconds. 1ms= 1/100 of any second
<!DOCTYPE html> 
<html> 
<head> 
<style>  
div 
{ 
width: 200px; 
height: 200px; 
background: lime; 
border-radius: 50px; 
transition-property: background, width, height; 
transition-duration: 1s, 2s, 3s; 
} 
div:hover 
{  
width:300px; 
background: orange; 
height:300px; 
border-radius: 80px; 
} 
</style> 
</head> 
<body> 
<center> 
<h2> Hover to examine the effects. </h2> 
<div></div> 
</center> 
</body> 
</html> 

Output:

CSS Units

Example: Angles

The transformation attributes of CSS need values to show in angles.

UnitsDescription
degIt shows the angles inside the degrees.
gradIt shows the angles inside the gradians, which is 1/400 of any turn.
turnIt shows the angles inside the turns, which is 360 degrees.
<!DOCTYPE html> 
<html> 
<head> 
<style> 
img 
{ 
border: 9px ridge gray; 
border-radius: 30px; 
margin: 10px;  
transition-duration: 2s; 
} 
#img1:hover
{  
transform: rotate(30deg); 
transform-origin: bottom left 50px; 
} 
</style> 
</head> 
<body> 
<center> 
<img src="Lion1.png" id="img1"/> 
</center> 
</body> 
</html> 

Output:

CSS Units

Absolute lengths

The absolute length is the units of fixed-length type. The length, i.e., is displayed with the use of the absolute units can be represented absolutely of that size. As the screen size varies a lot, thus it is not suggested to use the on-screen. So, any absolute unit must be applied if the output’s medium is known, like the print layout.

These units will be helpful if the responsiveness will not be considered inside a project. It is not more favorable for some responsive sites due to it does not scale if any screen changes.

The absolute length will be considered to be of the same size all the time, generally. The units of absolute length are discussed below:

UnitsNameDescription
cmCentimetersThis unit applied to depict the measurements within the centimeters.
mmMillimetersThis unit asked to illustrate the measurements within the millimeters.
inInchesThis unit referred to represent the measurements within the inches. 1in= 96px= 2.54cm
ptPointsThis unit applied to depict the measurements within the points. 1pt = 1/72 of 1 inch
pcPicasThis unit referred to represent the measurements within the picas. 1pc = 12pt so, there 6 picas will equal to 1 inch.
pxPixelsThis unit applied to depict the measurements within the pixels. 1px = 1/96th of inch

Example:

In the following illustration, we will apply the CSS property font-size for some paragraphs to represent the values with the use of the units as above-mentioned of absolute length.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body
{ 
text-align: center; 
} 
</style> 
</head> 
<body> 
<h1> Absolute units </h1> 
<p style = "font-size: 20px;" > It has the font-size: 20px; </p> 
<p style = "font-size: 1.2cm;" > It has the font-size: 1.2cm; </p> 
<p style = "font-size: .7in;" > It has the font-size: .7in; </p> 
<p style = "font-size: 18pt;" > It has the font-size: 18pt; </p> 
<p style = "font-size: 2pc;" > It has the font-size: 2pc; </p> 
<p style = "font-size: 10mm;" > It has the font-size: 10mm; </p> 
</body> 
</html> 

Output:

CSS Units



ADVERTISEMENT
ADVERTISEMENT