Assignments Of Class 6: CSS Units
Assignment 1: Understanding Pixels (px)
Task:
- Create an HTML page with a header (h1) and paragraph (p). Apply pixel-based font sizes and margins to these elements.
Solution:
1. Create HTML structure:
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>Pixel Units</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to CSS Units</h1>
<p>This paragraph demonstrates the use of pixels for font size and margin.</p>
</body>
</html>
2. CSS Code:
css
Copy code
h1 {
font-size: 24px;
margin: 15px;
}
p {
font-size: 16px;
margin: 10px;
}
Explanation:
- The h1 font-size is set to 24px, and it will take up 24 pixels of space.
- The p font-size is 16px, and its margin is 10px on all sides.
Assignment 2: Using Em Units for Font Sizes
Task:
- Create an HTML page and apply em units for the font size of a div element and its nested h2.
Solution:
1. HTML Structure:
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>Em Units</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h2>This is a heading inside a div</h2>
</div>
</body>
</html>
2. CSS Code:
css
Copy code
div {
font-size: 2em; /* 2 times the font size of the parent */
}
h2 {
font-size: 1.5em; /* 1.5 times the font size of the div */
}
Explanation:
- The div font-size is 2em, meaning it's 2 times the font size of its parent element.
- The h2 font-size is 1.5em, meaning it's 1.5 times the size of the div's font size.
Assignment 3: Using Rem Units for Consistent Font Size
Task:
- Create an HTML page and use rem units for font sizes across multiple elements.
Solution:
1. HTML Structure:
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>Rem Units</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph text with rem unit.</p>
</body>
</html>
2. CSS Code:
css
Copy code
html {
font-size: 16px; /* Root font size */
}
h1 {
font-size: 2rem; /* 2 times the root font size (32px) */
}
p {
font-size: 1rem; /* Same as root font size (16px) */
}
Explanation:
- The root html font-size is set to 16px.
- The h1 uses 2rem, making its font size 32px (2 times the root font size).
- The p uses 1rem, so its font size is 16px.
Assignment 4: Using Percentages for Width and Font Size
Task:
- Create a webpage with a container that uses percentage-based width. Apply percentage-based font size to a p element inside it.
Solution:
1. HTML Structure:
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>Percentage Units</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p>Text with percentage font size and container width.</p>
</div>
</body>
</html>
2. CSS Code:
css
Copy code
.container {
width: 80%; /* 80% of the parent's width */
margin: 0 auto;
}
p {
font-size: 150%; /* 150% of the default font size */
}
Explanation:
- The .container takes up 80% of its parent element’s width.
- The p font-size is 150% of the default size, making the text slightly larger than the usual size.
Assignment 5: Viewport Units for Responsive Font Size
Task:
- Create a webpage where the font size adjusts based on the viewport width using vw units.
Solution:
1. HTML Structure:
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>Viewport Units</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Responsive Font Size</h1>
</body>
</html>
2. CSS Code:
css
Copy code
h1 {
font-size: 5vw; /* Font size is 5% of the viewport width */
}
Explanation:
- The h1 font-size will be 5% of the width of the viewport, so it will adjust as the screen size changes.
Assignment 6: Combining Multiple Units
Task:
- Create an HTML page and apply a combination of pixel, em, rem, and percentage-based units to style a container and its text.
Solution:
1. HTML Structure:
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>Multiple Units</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Heading</h1>
<p>Paragraph demonstrating different CSS units.</p>
</div>
</body>
</html>
2. CSS Code:
css
Copy code
.container {
width: 80%; /* Percentage of the parent element */
padding: 20px; /* 20px padding */
font-size: 1.2rem; /* Font size relative to the root font size */
}
h1 {
font-size: 2em; /* 2 times the parent element's font size */
}
p {
font-size: 1.5em; /* 1.5 times the parent element's font size */
}
Explanation:
- The .container takes up 80% of the parent width with 20px padding and a font-size relative to the root (1.2rem).
- The h1 is 2 times the size of its parent element's font size, and the p is 1.5 times the parent's font size.
Assignment 7: Implementing Viewport Height for Full Page Layout
Task:
- Create an HTML page where the height of an element takes up the entire viewport using vh.
Solution:
1. HTML Structure:
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>Viewport Height</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>Full Page Section</h1>
</section>
</body>
</html>
2. CSS Code:
css
Copy code
section {
height: 100vh; /* Takes up the full viewport height */
background-color: lightblue;
text-align: center;
}
h1 {
font-size: 5vw; /* Font size adjusts based on viewport width */
color: darkblue;
}
Explanation:
- The section element takes up 100% of the viewport height using 100vh.
- The h1 font-size is responsive using 5vw and will adjust based on the viewport width.
Assignment 8: Combining Percentages and Viewport Units
Task:
- Create a webpage layout with a container using vw and vh and text inside it using percentages.
Solution:
1. HTML Structure:
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>Combined Units</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p>Responsive container with text.</p>
</div>
</body>
</html>
2. CSS Code:
css
Copy code
.container {
width: 60vw; /* 60% of the viewport width */
height: 60vh; /* 60% of the viewport height */
background-color: lightcoral;
}
p {
font-size: 5%; /* 5% of the container's width */
}
Explanation:
- The .container takes up 60% of the viewport width and height.
- The p font-size is 5% of the container’s width, so it adjusts as the container size changes.
Assignment 9: Experiment with CSS Grid and Units
Task:
- Create a simple grid layout using fr units and style the grid items with px, em, and rem units.
Solution:
1. HTML Structure:
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 Grid Units</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
2. CSS Code:
css
Copy code
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: lightseagreen;
font-size: 1.2rem;
text-align: center;
}
Explanation:
- The grid is divided into 3 equal columns using 1fr, and there’s a 10px gap between the items.
- Each .grid-item has a 1.2rem font size and a 20px padding.
Assignment 10: Applying Units to Buttons
Task:
- Style buttons with px, em, and rem units for padding, font size, and border radius.
Solution:
1. HTML Structure:
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>Button Styling</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Click Me</button>
</body>
</html>
2. CSS Code:
css
Copy code
button {
padding: 10px 20px; /* px units for padding */
font-size: 1.5em; /* em units for font size */
border-radius: 2rem; /* rem units for border radius */
background-color: #4CAF50;
color: white;
border: none;
}
Explanation:
- The button has a 10px top and bottom padding, 20px left and right padding, and a 1.5em font size.
- The border-radius is set to 2rem for rounded corners based on the root font size.
No comments:
Post a Comment