<!DOCTYPE html>
<html>
<head>
<style>
body {
background: lightblue;
}
@media (max-width: 600px) {
body {
background: pink; /* Changes background on small screens */
}
}
</style>
</head>
<body>
<h2>Resize the browser window</h2>
</body>
</html>
Explanation:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
background: lightgray;
padding: 20px;
}
.item {
background: skyblue;
padding: 30px;
flex: 1; /* Equal width items */
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
</div>
</body>
</html>
Explanation:
display: flex; arranges items horizontally.gap: spacing between items.flex: 1; makes items share equal space.<!DOCTYPE html>
<html>
<head>
<style>
button {
background: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
button:hover {
background: darkgreen; /* Changes color when hovered */
}
</style>
</head>
<body>
<button>Hover Me</button>
</body>
</html>
Explanation:
:hover applies style when the mouse is over the element.<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background: lightblue;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
</style>
</head>
<body>
<div class="box">Box Model Example</div>
</body>
</html>
Explanation (Box Model):
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red; /* Thickness, style, color */
padding: 10px; /* Space inside border */
margin: 15px; /* Space outside border */
}
</style>
</head>
<body>
<div>This is a CSS border example.</div>
</body>
</html>
Explanation:
border: creates a border with thickness, style (solid, dashed, dotted), and color.padding: space inside border.margin: space outside border.<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Arial, sans-serif; /* Sets font type */
font-size: 18px; /* Controls text size */
font-weight: bold; /* Makes text bold */
text-align: center; /* Aligns text in the middle */
}
</style>
</head>
<body>
<p>Styled Text Example</p>
</body>
</html>
Explanation:
font-family: changes font style.font-size: controls text size.font-weight: bold, normal, light.text-align: left, right, center, justify.<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgray; /* Sets page background */
}
h2 {
background-color: yellow; /* Sets only heading background */
}
</style>
</head>
<body>
<h2>CSS Background Example</h2>
</body>
</html>
Explanation:
body) or specific elements (like h2).<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue; /* Changes heading text color */
}
p {
color: green; /* Changes paragraph text color */
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
<p>This is a CSS color example.</p>
</body>
</html>
Explanation:
color property sets the text color.This simple online pixel (PX) values to EM units converter tool calculate precise EM values from pixels for better CSS scaling and accessibility. In CSS, pixel and em are units used to define sizes for elements dimensions, fonts and layout structure.
Following is formula to convert pixel to em.
em = px / font-size
For example, if base font-size is 16px, then setting an element to 1.5 em will make it 24px ( 1.5 * 16 ). This way em units ensure responsiveness.
Following is a digital converter for converting pixel to em and vice-versaFont Size (px):Pixels:EM:
Note: Default font-size is 16px. So while converting the px to em, you need to select your base value (default is 16) for the pixel and use it in the formula to calculate.
To learn about units in CSS, checkout article on CSS measurement units.
Following table shows the corresponding em values to px values, considering the base pixel value as 16px:
| PX | EM |
|---|---|
| 5px | 0.3125em |
| 6px | 0.3750em |
| 7px | 0.4375em |
| 8px | 0.5000em |
| 9px | 0.5625em |
| 10px | 0.6250em |
| 11px | 0.6875em |
| 12px | 0.7500em |
| 13px | 0.8125em |
| 14px | 0.8750em |
| 15px | 0.9375em |
| 16px | 1.0000em |
| 17px | 1.0625em |
| 18px | 1.1250em |
| 19px | 1.1875em |
| 20px | 1.2500em |
CSS Units define the measurement system used to specify the values. CSS offers a number of different units for expressing length and measurement. CSS unit is used to specify the property size for a page element or its content.
There are a number of ways to specify and measure length in CSS. It is used to specify margins, padding, font size, width, height, border, etc.
For example – font-size: 50px, here number 50 has a suffix px i.e., pixel, it is a CSS measurement unit.
There should be no whitespace between the number and the unit. The unit can be left out when the value is 0.
Length units can be categorized into two types:
These units are categorized as fixed-length units, which means that lengths specified with absolute units maintain an exact, unchanged size on the screen.
These units prove to be very effective when the browser has comprehensive information about the properties of the screen, the printer being used, or other appropriate user agents.Height: 2pxHeight: 2cmHeight: 2inHeight: 2pt
The following table contains all the types of absolute units:
| Unit | Description | Equivalent value | Example |
|---|---|---|---|
| mm | Refers to millimeter, it is used to specify the measurements in millimeters. | 1mm = 1/10th of 1cm | font-size: 10mm; |
| cm | Refers to centimeter, it is used to specify the measurements in centimeters. | 1cm = 37.8px = 25.2/64in | font-size: 5cm; |
| Q | Refers to Quarter-millimeters, it is used to specify the measurements in centimeters. | 1Q = 1/40th of 1cm | font-size: 5Q; |
| in | Refers to inches, it is used to specify the measurement in inches. | 1in = 2.54cm = 96px | font-size: 1in; |
| pt | Refers to point, it is used to specify the measurements in points. | 1pt = 1/72 of 1in | font-size: 20pt; |
| pc | Refers to picas, it is used to specify the measurement in picas. | 1pc = 1/6th of 1in | width: 6pc; |
| px | Refers to pixels, it is used to specify the measurement in pixels. | 1px = 1/96th of 1in | font-size: 15px; |
Absolute units prove valuable for projects where responsiveness is not a priority. However, they are less beneficial for responsive websites because they do not adjust when screen dimensions change.
Here is an example of absolute units (mm, cm, in, Q) used for font sizes:
<html><head><style>.unit-mm { font-size: 5mm; } .unit-cm { font-size: 1cm; } .unit-inch { font-size: 0.5in; } .unit-quarter { font-size: 40Q; } </style></head><body><h1 class="unit-mm"> Font size 5mm </h1><h1 class="unit-cm"> Font size 1cm </h1><h1 class="unit-inch"> Font size 0.5inch </h1><h1 class="unit-quarter"> Font size 40Q </h1></body></html></pre>Relative Length Units
Relative length units are measured in relation to other elements or viewport of the screen.
Relative units are great for styling responsive websites because they can be adjusted proportionally based on window size or parent elements. These units define lengths relative to other length properties.Height: 3emHeight: 3exHeight: 3lhHeight: 3vh
The following table contains all the types of relative units:
Unit Description Example em Relative to the font-size of the element. font-size: 4em; ex Relative to the x-height of the current font. font-size: 4ex; ch Relative to width of the "0". font-size: 4ch; rem Relative to font-size of the root element. font-size: 2rem; lh It is relative to the line height of the element. font-size: 4lh; rlh It is relative to the line height of the root element. font-size: 4rlh; vh It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport. font-size: 4vh; vw It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport. width: 4vw; vmin It is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport's smaller dimension. width: 4vmin; vmax It is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport's larger dimension. width: 4vmax; vb It is relative to the size of the initial containing block in the direction of the root element's block axis. 1vb = 1% of containing block's size (block axis). font-size: 4vb; vi It is relative to the size of the initial containing block in the direction of the root element's inline axis. 1vb = 1% of containing block's size (inline axis). font-size: 4vi; svw, svh It is relative to the width and height of the smaller viewport. 1svw = 1% or 1/100 of the smaller viewport's width and 1svh = 1% or 1/100 of the smaller viewport's height. width: 40svw; height: 40svh; lvw, lvh It is relative to the width and height of the larger viewport. 1lvw = 1% or 1/100 of the larger viewport's width and 1lvh = 1% or 1/100 of the larger viewport's height. width: 40lvw; height: 40lvh; dvw, dvh It is relative to the width and height of the dynamic viewport. 1dvw = 1% or 1/100 of the dynamic viewport's width and 1dvh = 1% or 1/100 of the dynamic viewport's height. width: 40dvw; height: 40dvh; Example
Here is an example of relative units (em, rem, vw, vh, %) used for font sizes:
<html><head><style>.unit-em { font-size: 2em; } .unit-rem { font-size: 1.5rem; } .unit-vw { font-size: 5vw; } .unit-vh { font-size: 5vh; } .unit-percent { font-size: 150%; } </style></head><body><h1 class="unit-em">Font size 2em </h1><h1 class="unit-rem">Font size 1.5rem </h1><h1 class="unit-vw">Font size 5vw </h1><h1 class="unit-vh">Font size 5vh </h1><h1 class="unit-percent">Font size 150% </h1></body></html></pre>Units px (Pixel) and em (indicates size relative to the size of the font) are two of the measurement units of length. In order to convert px to em, try our free CSS - PX to EM Converter.