Module 7 : CSS Units & Measurements – Absolute vs. Relative Units
Introduction to CSS Units & Measurements
In web design, CSS (Cascading Style Sheets) uses various units to define the size, spacing, and layout of elements on a webpage. Understanding these units is crucial for creating responsive and scalable web designs. CSS units are divided into two main categories:
Absolute Units – Fixed size that does not change based on the viewport or parent element.
Relative Units – Flexible size that adjusts based on the viewport or parent element.
1. Absolute Units in CSS
Absolute units are fixed and do not change regardless of screen size or device resolution. These are suitable when you want the size to remain consistent across all devices.
Common Absolute Units
Unit Description
px Pixel: Represents a single dot on the screen. 1px = 1 device pixel.
cm Centimeter: Represents physical centimeters. 1cm = 37.8px.
mm Millimeter: Represents physical millimeters. 1mm = 3.78px.
in Inch: Represents physical inches. 1in = 96px.
pt Point: Commonly used in print. 1pt = 1/72 inch.
pc Pica: Commonly used in print. 1pc = 12pt or 1/6 inch.
Example: Using Absolute Units
HTML:
<div class="box">This is a fixed size box</div>
CSS:
.box {
width: 300px;
height: 150px;
background-color: lightblue;
}
Explanation:
The box size is fixed to 300px x 150px. It will not change regardless of screen size or resolution.
Exercise 1: Absolute Units
Task:
Create a square box with a fixed size of 5cm x 5cm.
Add a text inside the box and center it.
Solution:
<div class="box">Fixed Size</div>
.box {
width: 5cm;
height: 5cm;
background-color: lightcoral;
display: flex;
justify-content: center;
align-items: center;
}
Result: The box remains 5cm x 5cm on any device.
2. Relative Units in CSS
Relative units are flexible and change based on the size of the parent element, viewport, or root element. This is crucial for creating responsive designs.
Common Relative Units
Unit Description
% Percentage: Size relative to the parent element’s size.
em Element’s font size: Size relative to the font size of the element itself or its parent.
rem Root em: Size relative to the root element (<html>)'s font size.
vw Viewport Width: 1vw = 1% of the viewport’s width.
vh Viewport Height: 1vh = 1% of the viewport’s height.
Example 1: Using Percentage (%)
HTML:
<div class="container">
<div class="box">50% Width</div>
</div>
CSS:
.container {
width: 500px;
background-color: lightgrey;
}
.box {
width: 50%;
height: 100px;
background-color: lightgreen;
}
Explanation:
The .box takes 50% of the .container width.
If the container width changes, the box size will change accordingly.
Example 2: Using em and rem
HTML:
<div class="text">
<p>This text is normal.</p>
<p class="large-text">This text is 2em.</p>
</div>
CSS:
.text {
font-size: 16px;
}
.large-text {
font-size: 2em;
}
Explanation:
2em means 2 times the parent font size.
If the parent’s font size changes, the 2em text size will also change.
Key Difference:
em depends on the parent element’s size.
rem depends on the root (<html>) element’s size.
Example 3: Using vw and vh
HTML:
<div class="full-screen-box">
Fullscreen Box
</div>
CSS:
.full-screen-box {
width: 100vw;
height: 100vh;
background-color: skyblue;
}
Explanation:
100vw = 100% of the viewport width.
100vh = 100% of the viewport height.
This ensures the box covers the entire screen.
Exercise 2: Relative Units
Task:
Create a button that takes 50% of the viewport width and 10% of the 8viewport height.
Add text in the button and center it.
Solution:
<button class="responsive-btn">Click Me</button>
.responsive-btn {
width: 50vw;
height: 10vh;
background-color: orange;
border: none;
font-size: 1.5rem;
text-align: center;
}
Result: The button adjusts based on the screen size.
3. Practical Exercises
Exercise 3: Combining Units
Task:
Create a card with:
Width: 60% of the container.
Padding: 2em.
Font size: 1.5rem.
Full-height background using vh.
Solution:
<div class="card">
Responsive Card
</div>
.card {
width: 60%;
padding: 2em;
font-size: 1.5rem;
height: 80vh;
background-color: lightblue;
}
4. Summary
Unit Type Fixed/Responsive Best Use
px, cm, in Fixed Print designs, fixed layouts
%, em, rem Responsive Text size, container width/height
vw, vh Responsive Fullscreen backgrounds, responsive buttons
5. Final Project
Project: Build a Responsive Landing Page
Task:
Create a full-screen hero section using vw and vh.
Add a title with rem for scalable text.
Include a button using % for flexible sizing.
Solution:
<div class="hero">
<h1>Welcome to My Site</h1>
<button>Explore</button>
</div>
.hero {
width: 100vw;
height: 100vh;
background-color: lightgrey;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-size: 3rem;
}
button {
width: 20%;
height: 5%;
font-size: 1rem;
}
✅ Conclusion
Understanding CSS units is essential for building responsive and flexible web designs. Absolute units provide fixed sizes, while relative units adapt to different screen sizes and device types. Always prioritize relative units when creating responsive layouts for modern web design.
No comments:
Post a Comment