Scribd
Upload
8 views

Practical 4 1

Uploaded by

vaishnavipatel.it22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Practical 4 1

Uploaded by

vaishnavipatel.it22
Copyright
© © All Rights Reserved
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