HTML CSS examples for CSS:Introduction
CSS Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit.
If the value is 0, the unit can be omitted.
There are two types of length units: relative and absolute.
Relative length units specify a length relative to another length property.
| Unit | Description |
|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
| ex | Relative to the x-height of the current font (rarely used) |
| ch | Relative to width of the "0" (zero) |
| 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 |
The following code shows how to use the em unit.
<!DOCTYPE html> <html> <head> <style> p {<!--from w w w . j a v a 2 s. c o m--> font-size: 16px; line-height: 2em; } div { font-size: 30px; border: 1px solid black; } span { font-size: 0.5em; } </style> </head> <body> <p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p> <p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p> <p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p> </body> </html>
The following code shows how to use the ex unit.
<!DOCTYPE html> <html> <head> <style> div {<!--from ww w. j av a2 s .c om--> font-size: 30px; border: 1px solid black; } span { font-size: 1ex; } </style> </head> <body> <div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div> </body> </html>
The following code shows how to use the vw unit.
<!DOCTYPE html> <html> <head> <style> h1 {<!--from w ww .j a v a2 s . c o m--> font-size: 20vw; } </style> </head> <body> <h1>Hello</h1> <p>Resize the width of the browser window to see how the font-size of h1 changes.</p> <p>1vw = 1% of viewport width.</p> <p>The vw unit is not supported in IE8 and earlier.</p> </body> </html>
The following code shows how to use vh unit.
<!DOCTYPE html> <html> <head> <style> h1 {<!--from ww w .j av a 2s . c om--> font-size: 20vh; } </style> </head> <body> <h1>Hello</h1> <p>Resize the height of the browser window to see how the font-size of h1 changes.</p> <p>1vh = 1% of viewport height.</p> <p>The vh unit is not supported in IE8 and earlier.</p> </body> </html>
The following code shows how to use the vmin unit.
<!DOCTYPE html> <html> <head> <style> h1 {<!--from w ww. jav a2s . c o m--> font-size: 15vmin; } </style> </head> <body> <h1>Hello</h1> <p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p> <p>1vmin = 1vw or 1vh, whichever is smaller.</p> <p>The vmin unit is not supported in IE8 and earlier.</p> </body> </html>
The following code shows how to use vmax unit.
<!DOCTYPE html> <html> <head> <style> h1 {<!-- w ww. j a va 2 s.c o m--> font-size: 15vmax; } </style> </head> <body> <h1>Hello</h1> <p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p> <p>1vmax = 1vw or 1vh, whichever is larger.</p> <p>The vmax unit is not supported in Internet Explorer or Safari 6.1 and earlier versions.</p> </body> </html>
The absolute length units are fixed exact size.
| Unit | Description |
|---|---|
| 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) |
The following code shows how to cm unit.
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 1.5cm;} h2 {font-size: 1cm;} p {<!-- www. j a v a 2s. c om--> font-size: 0.5cm; line-height: 1cm; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The following code shows how to mm unit.
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 15mm;} h2 {font-size: 10mm;} p {<!--from w ww .j a va2 s . c o m--> font-size: 5mm; line-height: 10mm; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The following code shows how to in unit.
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 1in;} h2 {font-size: 0.5in;} p {<!-- ww w . j a v a 2s . c om--> font-size: 0.2in; line-height: 0.5in; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The following code shows how to use px unit.
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 50px;} h2 {font-size: 30px;} p {<!--from www. j av a 2s .c o m--> font-size: 15px; line-height: 20px; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The following code shows how to use pt unit.
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 50pt;} h2 {font-size: 25pt;} p {<!--from w w w . j a v a 2 s.c om--> font-size: 15pt; line-height: 25pt; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The following code shows how to use pc unit.
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 4.5pc;} h2 {font-size: 3pc;} p {<!--from w w w . ja va 2 s . c o m--> font-size: 1.5pc; line-height: 3pc; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>