Scribd
Upload
19 views5 pages

Practical 4 1

Uploaded by

vaishnavipatel.it22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views5 pages

Practical 4 1

Uploaded by

vaishnavipatel.it22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Practical-4

1. 1. Use different selectors in CSS (Class, id, name) to apply Color,


text-align, background of the html file.
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
7. <link rel=""stylesheet" href=""style.css">
8. <title>Document</title>
9. <style>
10. .class2{
11. background-color :aquamarine;
12. color :black;
13. text align:center;
14. }
15. </style>
16. </head>
17. <body>
18. <h1 style="background-color :aquamarine; color :black; text-align
:center;">name tags is used</h1>
19. <h2 class="class2">class tag is used</h2>
20. <h3 id="class3"><a
href="https://moodle.escet.online/login/index.php">Moddle</a></h3>
21. </body>
22. </html>

1. 2. Use different types of CSS with the above example (Internal,


External & Inline).
2. body{
3. background-color: burlywood;
4. }
5.
6. class3{
7. background-color: aquamarine;
8. color: black;
9. text-align: center;
10. align-items: center;
11. display: grid;
12. }
3. Create a web page like this. (i.e.Source Code attached with this
assignment in first.html)
4. Now add a styles to the previous page so that it looks like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
header{background-color: #333;
color: white;
font-family: Arial, Helvetica, sans-serif;
padding: 10px 0px;
text-align: center;
}
main{font-family: Arial,Sans-Serif;
}
header h1{margin: 0;
}
nav a { color: #fff; display:
inline-block;
padding: 10px 20px;
text-decoration: none;
}
nav a:hover { background-color: #555;
}
nav ul{list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav ul li{margin: 0 10px;
}
nav ul li a{display: grid;
display: inline-flex;
color: white;
font-size: 20px;
text-decoration: none;
padding: 5px 10px;
}
section{
font-size: 15px;
line-height: 40px;
margin:1px;
padding:1px;
}
section p1{
margin-top: 0;
border :2px solid lightgrey;
padding :20px 50px 20px 20px;
background-color: #eee;
}
section p3{
margin top: 0px;
border :2px solid lightgrey;
padding: 20px 50px 20px 20px;
background-color: #eee;
}
</style>
</head>
<body>
<header>
<h2>Welcome to CSS Selectors Example</h2>
<nav>
<ul>
<li><a href="Section 1">Section 1</a></li>
<li><a href="Section 2">Section 2</a></li>
<li><a href="Section 3">Section 3</a></li>
</ul>
</nav>
</header>
<main>
<section id="Section 1">
<h3>SECTION 1</h3>
<p1>This is the content of Section 1</p1>
<section id="Section 2">
<h3>SECTION 2</h3>
<p>This is the content of Section 2</p>
<section id="Section 3">
<h3>SECTION 3</h3>
<p3>This is the content of Section 3</p3>
</section>
</main>
</body>
</html>

You might also like