Tag: CSS units

Categories
Web development

Units in CSS

Units in CSS

CSS has different units for displaying a length. A length is a number followed by a length unit, such as 20px, 15vh, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.one, .two, .three, .four {
  line-height: 30px;
}
    
.one {
  font-size: 15px;    
    }
    
.two {
  font-size: 25px;
    }
.three {
  font-size: 35px;
    }
.four {
  font-size: 20px;
    }
</style>
</head>
<body>

<p class="one">This is a first paragraph.</p>
<p class="two">This is a second paragraph.</p>
<p class="three">This is a third paragraph.</p>
<p class="four">This is a fourth paragraph.</p>

</body>
</html>

Output:

This is a first paragraph.

This is a second paragraph.

This is a third paragraph.

This is a fourth paragraph.


You can use two kinds of length units: absolute and relative.

Absolute Lengths

CSS Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

cm – centimeters.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.one, .two, .three, .four {
  line-height: 0.3cm;
}
    
.one {
  font-size:0.5cm;    
    }
    
.two {
  font-size: 1cm;
    }
.three {
  font-size: 1.2cm;
    }
.four {
  font-size: 0.7cm;
    }
</style>
</head>
<body>

<p class="one">This is a first paragraph.</p>
<p class="two">This is a second paragraph.</p>
<p class="three">This is a third paragraph.</p>
<p class="four">This is a fourth paragraph.</p>

</body>
</html>

Output:

This is a first paragraph.

This is a second paragraph.

This is a third paragraph.

This is a fourth paragraph.


mm – millimetres.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.one, .two, .three, .four {
  line-height: 3mm;
}
    
.one {
  font-size:6mm;    
    }
    
.two {
  font-size: 7mm;
    }
.three {
  font-size: 11mm;
    }
.four {
  font-size: 9mm;
    }
</style>
</head>
<body>

<p class="one">This is a first paragraph.</p>
<p class="two">This is a second paragraph.</p>
<p class="three">This is a third paragraph.</p>
<p class="four">This is a fourth paragraph.</p>

</body>
</html>

Output:

This is a first paragraph.

This is a second paragraph.

This is a third paragraph.

This is a fourth paragraph.


in – inches (1in = 96px = 2.54cm)

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.one, .two, .three, .four {
  line-height: 0.2in;
}
    
.one {
  font-size:0.5in;    
    }
    
.two {
  font-size: 0.4in;
    }
.three {
  font-size: 0.7in;
    }
.four {
  font-size: 0.2in;
    }
</style>
</head>
<body>

<p class="one">This is a first paragraph.</p>
<p class="two">This is a second paragraph.</p>
<p class="three">This is a third paragraph.</p>
<p class="four">This is a fourth paragraph.</p>

</body>
</html>

Output:

This is a first paragraph.

This is a second paragraph.

This is a third paragraph.

This is a fourth paragraph.


px – pixels (1px = 1/96th of 1in)

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.one, .two, .three, .four {
  line-height: 10px;
}
    
.one {
  font-size:15px;    
    }
    
.two {
  font-size: 20px;
    }
.three {
  font-size: 35px;
    }
.four {
  font-size: 25px;
    }
</style>
</head>
<body>

<p class="one">This is a first paragraph.</p>
<p class="two">This is a second paragraph.</p>
<p class="three">This is a third paragraph.</p>
<p class="four">This is a fourth paragraph.</p>

</body>
</html>

Output:

This is a first paragraph.

This is a second paragraph.

This is a third paragraph.

This is a fourth paragraph.


pt – points (1pt = 1/72 of 1in)

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.one, .two, .three, .four {
  line-height: 15pt;
}
    
.one {
  font-size:15pt;    
    }
    
.two {
  font-size: 20pt;
    }
.three {
  font-size: 35pt;
    }
.four {
  font-size: 25pt;
    }
</style>
</head>
<body>

<p class="one">This is a first paragraph.</p>
<p class="two">This is a second paragraph.</p>
<p class="three">This is a third paragraph.</p>
<p class="four">This is a fourth paragraph.</p>

</body>
</html>

Output:

This is a first paragraph.

This is a second paragraph.

This is a third paragraph.

This is a fourth paragraph.


pc – picas (1pc = 12 pt)

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.one, .two, .three, .four {
  line-height: 2pc;
}
    
.one {
  font-size:2.5pc;    
    }
    
.two {
  font-size: 2pc;
    }
.three {
  font-size: 3pc;
    }
.four {
  font-size: 1.5pc;
    }
</style>
</head>
<body>

<p class="one">This is a first paragraph.</p>
<p class="two">This is a second paragraph.</p>
<p class="three">This is a third paragraph.</p>
<p class="four">This is a fourth paragraph.</p>

</body>
</html>

Output:

This is a first paragraph.

This is a second paragraph.

This is a third paragraph.

This is a fourth paragraph.


Relative Lengths

CSS Relative Lengths

Relative length units define a length relative to another length property.

em – relative to the font size of the element (3em means 3 times the size of the current size of element).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example {
font-size: 40px;
    }
    
p {
font-size: 0.5em;     
    }
span {
font-size: 0.7em;
    }
</style>
</head>
<body>

<div class="example">
 <p>This is a paragraph.</p>
 <span>This is the span element.</span>
    </div>

</body>
</html>

Output:

This is a paragraph.

This is the span element.

ex – relative to the x-height of the current size.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example {
   font-size: 40px;
    }
    
p {
   font-size: 2ex;     
    }
span {
   font-size: 1.7ex;
    }
</style>
</head>
<body>

<div class="example">
 <p>This is a paragraph.</p>
 <span>This is the span element.</span>
    </div>

</body>
</html>

Output:

This is a paragraph.

This is the span element.

ch – relative to the width of the “0”.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example {
  font-size: 40px;
    }
    
p {
  font-size: 1ch;     
    }
span {
  font-size: 2ch;
    }
</style>
</head>
<body>

<div class="example">
 <p>This is a paragraph.</p>
 <span>This is the span element.</span>
    </div>

</body>
</html>

Output:

This is a paragraph.

This is the span element.

rem – relative to the size of the root element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example {
        font-size: 40px;
    }   
p {
   font-size: 2rem;     
    }
span {
        font-size: 3rem;
    }
</style>
</head>
<body>

<div class="example">
 <p>This is a paragraph.</p>
 <span>This is the span element.</span>
    </div>

</body>
</html>

Output:

This is a paragraph.

This is the span element.

vw – relative to 1% of the width of the viewport.

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  font-size: 5vw;
}
</style>
</head>
<body>

<h4>This is heading 4.</h4>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is heading 4.

This is a paragraph.


vh – relative to 1% of the height of the viewport.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  font-size: 15vh;
}
</style>
</head>
<body>

<h4>This is heading 4.</h4>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is heading 4.

This is a paragraph.


vmin – relative to 1% of viewport’s smaller dimension.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  font-size: 10vmin;
}
</style>
</head>
<body>

<h4>This is heading 4.</h4>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is heading 4.

This is a paragraph.


vmax – relative to 1% of viewport’s larger dimension.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  font-size: 5vmax;
}
</style>
</head>
<body>

<h4>This is heading 4.</h4>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is heading 4.

This is a paragraph.


% – relative to the parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1 {
  font-size: 40px;
    }
h4 {
  font-size: 50%;
}
p {font-size: 70%;}
    
</style>
</head>
<body>
<div class="example-1">
<h4>This is heading 4.</h4>
<p>This is a paragraph.</p>
    </div>
</body>

Output:

This is heading 4.

This is a paragraph.


Enjoy coding!

Read also:

Web Safe Fonts

CSS Fixed Sidebar Menu

CSS Shadows