FullStack Development WEEK-5 DATE:
POSTLAB :
1. Create a webpage where each paragraph is given a unique background color
using different CSS color reference methods.
Program Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraphs with Unique Background Colors</title> <style> p {
padding: 20px;
margin: 10px;
color: white;
font-family: Arial, sans-serif;
}
#para1 {
background-color: red; /* Named color */
}
#para2 {
background-color: #00ff00; /* Hexadecimal */
}
#para3 {
background-color: rgb(0, 0, 255); /* RGB */
}
#para4 {
background-color: hsl(300, 100%, 50%); /* HSL */
}
#para5 {
background-color: rgba(255, 165, 0, 0.8); /* RGBA with opacity */
}
</style> </head>
<body>
<p id="para1">This paragraph has a named color (red) background.</p>
<p id="para2">This paragraph uses a hexadecimal (#00ff00) background.</p>
<p id="para3">This paragraph has an RGB (0, 0, 255) background.</p>
<p id="para4">This paragraph uses an HSL (300, 100%, 50%) background.</p>
<p id="para5">This paragraph has an RGBA (255, 165, 0, 0.8) background.</p>
</body> </html>
OUTPUT:
[Link] ENGINEERING COLLEGE PAGE NO:
FullStack Development WEEK-5 DATE:
2. Create a webpage with multiple sections, each having a different background
(solid color, gradient, image).
Program Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sections with Different Backgrounds</title>
<style>
section {
height:
200px;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Arial, sans-
serif; font-size: 1.2em;
}
#section1 {
background-color: teal;
}
#section2 {
background: linear-gradient(to right, purple, pink);
}
#section3 {
background-image: url('[Link]
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<section id="section1">Section with Solid Color Background</section>
<section id="section2">Section with Gradient Background</section>
<section id="section3">Section with Image Background</section>
</body>
</html>
OUTPUT:
3. Create two boxes with the same content size but different padding and margin
[Link] ENGINEERING COLLEGE PAGE NO:
FullStack Development WEEK-5 DATE:
values. Observe the difference in total space occupied.
[Link] ENGINEERING COLLEGE PAGE NO:
FullStack Development WEEK-5 DATE:
Program Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boxes with Different Padding and Margins</title>
<style>
.box {
width: 200px;
height: 100px;
background-color:lavenderblush;
display: inline-block;
vertical-align: top;
font-family: Arial, sans-
serif; box-sizing: border-
box;
}
#box1 {
padding: 10px;
margin: 10px;
border: 2px solid black;
}
#box2 {
padding: 30px;
margin: 30px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="box1" class="box">Box 1: 10px padding, 10px margin</div>
<div id="box2" class="box">Box 2: 30px padding, 30px margin</div>
</body>
</html>
OUTPUT:
[Link] ENGINEERING COLLEGE PAGE NO:
