Lecture Notes Of Class 6: CSS Units
Objective:
- Understand
various CSS units like Pixels, Em, Rem, Percentages, and Viewport units
(vw, vh).
- Learn
when and how to use different CSS units for styling.
Topics:
1. Pixels
(px):
- Definition: A
pixel is a fixed unit of measurement that represents a single point on the
screen.
- Usage:
Used for fixed sizes like font size, margin, padding, and borders.
- Pros:
Precise control over element dimensions.
- Cons:
Doesn't scale well with different screen sizes or zoom levels.
Example:
css
Copy code
p {
font-size: 16px;
margin: 10px;
}
2. Em
(em):
- Definition:
Relative to the font size of the parent element. 1em is equivalent to the
current font size.
- Usage:
Useful for scaling text and elements relative to their parent element’s
font size.
- Pros:
Scalable based on the parent element's font size.
- Cons:
Can compound if nested deeply.
Example:
css
Copy code
div {
font-size: 2em; /* 2 times the font size of
the parent */
}
3. Rem
(rem):
- Definition:
Relative to the font size of the root element (html). 1rem equals the font
size of the root element, usually set to 16px by default.
- Usage:
Used for setting consistent sizing across the entire page that scales with
the root element’s font size.
- Pros:
More predictable than em since it is always based on the root font size.
- Cons:
Still does not adapt to screen size changes as flexibly as percentages or
viewport units.
Example:
css
Copy code
html {
font-size: 16px; /* 1rem equals 16px */
}
h1 {
font-size: 2rem; /* 32px */
}
4. Percentages
(%):
- Definition: A
percentage is based on the size of the parent element (for dimensions like
width and height) or the font size (for text).
- Usage:
Useful for fluid layouts and responsive designs.
- Pros:
Scales with the parent element or container.
- Cons:
Can be tricky when used with multiple nested elements.
Example:
css
Copy code
.container
{
width: 80%; /* 80% of the parent element’s
width */
}
h2 {
font-size: 150%; /* 150% of the parent
element's font size */
}
5. Viewport
units (vw, vh):
- Definition:
- vw
(Viewport Width): 1vw equals 1% of the viewport's width.
- vh
(Viewport Height): 1vh equals 1% of the viewport's height.
- Usage:
Ideal for responsive designs, as the size adjusts based on the viewport
size.
- Pros:
Useful for full-page layouts and ensuring elements scale with the screen
size.
- Cons:
Can cause issues with extremely small or large screens, so may require
additional adjustments.
Example:
css
Copy code
h1 {
font-size: 5vw; /* Font size is 5% of the
viewport width */
}
section {
height: 100vh; /* Takes the full height of
the viewport */
}
Lab
Exercise:
Create a simple HTML page that
demonstrates the use of various CSS units for styling different elements. For
this exercise, you'll apply the different units for font sizes, margins, and
padding.
HTML:
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Units Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>CSS Units in Action</h1>
<p>This is a paragraph
demonstrating various CSS units.</p>
<button>Click Me</button>
</div>
</body>
</html>
CSS (styles.css):
css
Copy code
/*
Applying units to different elements */
/* Pixels
*/
h1 {
font-size: 24px;
margin: 20px;
}
/* Em */
p {
font-size: 1.5em; /* 1.5 times the font
size of the parent */
margin: 1em;
}
/* Rem */
button {
font-size: 1.2rem; /* 1.2 times the root
font size */
padding: 10px 20px;
}
/*
Percentage */
.container
{
width: 80%;
margin: 0 auto;
}
/*
Viewport units */
body {
font-size: 2vw; /* Font size is 2% of the
viewport width */
margin: 0;
padding: 0;
}
h1 {
font-size: 5vw; /* 5% of the viewport width
*/
}
button {
margin-top: 2vh; /* 2% of the viewport
height */
}
Task:
- Apply
the different units (px, em, rem, %, vw, vh) to elements on the HTML page
(e.g., fonts, margins, and padding).
- Observe
the differences when you resize the browser window, especially for vw, vh,
and percentage-based values.
Conclusion:
- The
class aims to provide a thorough understanding of CSS units and when to
use them for various layout and typography needs.
- Students
will gain hands-on experience applying these units and observing their
behavior in different scenarios.
No comments:
Post a Comment