1.
Create a simple page with div tags and show different ways
to add CSS as well as what happens when you target the
same elements with inline, internal, and external CSS. Also,
u lize comments in the project where required.
Ans. <!DOCTYPE html>
<html>
<head>
< tle>Inline CSS</ tle>
</head>
<body>
<p style="color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
GeeksForGeeks
</p>
<head>
b. <head>
< tle>Internal CSS</ tle>
<style>
.main {
text-align: center;
}
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.geeks {
font-style: bold;
font-size: 20px;
}
</style>
c.
<html>
<head>
< tle>External CSS</ tle>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main
<div class="GFG">GeeksForGeeks</div>
<div id="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
2. Build an HTML page with mul ple paragraphs, each
assigned a unique class name. Write CSS rules using class
selectors to apply dis nct styling to each paragraph. Follow
the BeM naming conven on and explain how you've named
the classes.
Ans. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, ini al-
scale=1.0">
< tle>Document</ tle>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<p class="my1">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
A rem neque ipsa! Eveniet aliquam sapiente quisquam
accusant
soluta repellendus voluptatem voluptates inventore aut!
Error ra one excepturi quaerat animi! Nostrum!
</p>
<p class="my2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
A rem neque ipsa! Eveniet aliquam sapiente quisquam
accusant
soluta repellendus voluptatem voluptates inventore aut!
Error ra one excepturi quaerat animi! Nostrum!
</p>
<p class="my3">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
A rem neque ipsa! Eveniet aliquam sapiente quisquam
accusant
soluta repellendus voluptatem voluptates inventore aut!
Error ra one excepturi quaerat animi! Nostrum!
</p>
<p class="my4">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
A rem neque ipsa! Eveniet aliquam sapiente quisquam
accusant
soluta repellendus voluptatem voluptates inventore aut!
Error ra one excepturi quaerat animi! Nostrum!
</p>
</body>
</html>
.my1{
color: aqua ;
font-style: italic;
}
.my2{
color: darkgreen ;
font-style: italic;
}
.my3{
color:lawngreen ;
font-style:cursive;
}
.my4{
color: gray ;
font-style:bold ;
}
3. Develop an HTML form with various input elements. Use
CSS to style the form, including se ng background colors for
input fields. Create a custom color pale e for the form
elements, and demonstrate how to apply opacity to one of
the form sec ons.
Ans. <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
ini al-scale=1">
<style>
body {font-family: Arial, Helve ca, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bo om: 16px;
resize: ver cal;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h3>Contact Form</h3>
<div class="container"
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname"
placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname"
placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<op on value="australia">Australia</op on>
<op on value="canada">Canada</op on>
<op on value="usa">USA</op on>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write
something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
