CSS Length Units
- % - Define sizes in terms of parent objects or current object dependent on property
- em - Relative to the font-size of the element (2em means 2 times the size of the current font)
- rem - Relative to font-size of the root element
- vw - Relative to 1% of the width of the viewport*
- vh - Relative to 1% of the height of the viewport*
- vmin - Relative to 1% of viewport's* smaller dimension
- vmax - Relative to 1% of viewport's* larger dimension
- cm - centimeters
- mm - millimeters
- in - inches (1in = 96px = 2.54cm)
- px - pixels (1px = 1/96th of 1in)
- pt - points (1pt = 1/72 of 1in)
- pc - picas (1pc = 12 pt)
- s - seconds (used for animations and transitions)
- ms - milliseconds (used for animations and transitions)
- ex - Relative to the x-height of the current font
- ch- Based on the width of the zero (0) character
- fr - fractional unit (used for CSS Grid Layout)
A CSS distance measurement is a number immediately followed by a length unit (px, em, pc, in, …)
CSS supports a number of length measurements units. They are absolute or relative.
Creating scalable elements using rems and ems
Version ≥ 3
You can use rem defined by the font-size of your html tag to style elements by setting their font-size to a value of rem and use em inside the element to create elements that scale with your global font-size.
HTML:
<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">
Relevant CSS:
html {
font-size: 16px;
}
input[type="button"] {
font-size: 1rem;
padding: 0.5em 2em;
}
input[type="range"] {
font-size: 1rem;width: 10em;
}
input[type=text] {
font-size: 1rem;
padding: 0.5em;
}
Possible Result:
Font size with rem
CSS3 introduces a few new units, including the rem unit, which stands for "root em". Let's look at how rem works. First, let's look at the differences between em and rem.
- em: Relative to the font size of the parent. This causes the compounding issue
- rem: Relative to the font size of the root or <html> element. This means it's possible to declare a single font
- size for the HTML element and define all rem units to be a percentage of that.
The main issue with using rem for font sizing is that the values are somewhat difficult to use. Here is an example of some common font sizes expressed in rem units, assuming that the base size is 16px :
- 10px = 0.625rem
- 12px = 0.75rem
- 14px = 0.875rem
- 16px = 1rem (base)
- 18px = 1.125rem
- 20px = 1.25rem
- 24px = 1.5rem
- 30px = 1.875rem
- 32px = 2rem
CODE:
Version ≥ 3
html {
font-size: 16px;
}h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 1rem; /* 16px */
}
li {
font-size: 1.5em; /* 24px */
}
vmin and vmax
- vmin: Relative to 1 percent of the viewport's smaller dimension
- vmax: Relative to 1 percent of the viewport's larger dimension
In other words, 1 vmin is equal to the smaller of 1 vh and 1 vw
1 vmax is equal to the larger of 1 vh and 1 vw
Note: vmax is not supported in:
- any version of Internet Explorer
- Safari before version 6.1
vh and vw
CSS3 introduced two units for representing size.
- vh, which stands for viewport height is relative to 1% of the viewport height
- vw, which stands for viewport width is relative to 1% of the viewport width
Version ≥ 3
div {
width: 20vw;
height: 20vh;
}
Above, the size for the div takes up 20% of the width and height of the viewport.
using percent %
One of the useful units when creating a responsive application.
Its size depends on its parent container.
Equation:
( Parent Container`s width ) * ( Percentage(%) ) = Output
For Example:
Parent has 100px width while the Child has 50%.
On the output, the Child's width will be half(50%) of the Parent's, which is 50px.
HTML
<div class="parent">PARENT
<div class="child">
CHILD
</div>
</div>
CSS
<style>
*{
color: #CCC;
}
.parent{
background-color: blue;
width: 100px;
}
.child{
background-color: green;
width: 50%;
}
</style>
OUTPUT:
ATutorialHub Related Guide
-
.png "Sea battle game only using HTML and CSS")
Sea battle game only using HTML and CSSAdmin
sea battle game where using only HTML and CSS and animation in css and html tags sea battle game2021-09-20 03:43:36
Comments (8)
User Comments
panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot
raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts
Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it
Zain Khan
2021-09-18 15:07:23Great content and customized courses.
Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!
Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website
Leave a Comment