CSS Practical 2
CSS Practical 2
Add appropriate CSS code to change the text, list, div element and table properties of the
<html>
<head>
<title>Department Website</title>
<style>
margin: 0;
padding: 0;
box-sizing: border-box;
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
nav {
background-color: #444;
padding: 10px 0;
text-align: center;
nav ul {
list-style-type: none;
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
.dropdown {
position: relative;
.dropdown-content {
display: none;
position: absolute;
background-color: #444;
min-width: 160px;
z-index: 1;
.dropdown:hover .dropdown-content {
display: block;
.dropdown-content a {
color: #fff;
text-decoration: none;
display: block;
.dropdown-content a:hover {
background-color: #555;
body {
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
padding: 20px;
h1, h2, h3 {
margin-bottom: 20px;
p{
margin-bottom: 10px;
ul {
margin-bottom: 20px;
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
th, td {
padding: 8px;
border-bottom: 1px solid #ddd;
th {
background-color: #444;
color: #fff;
text-align: left;
.container {
max-width: 1200px;
margin: 0 auto;
.section {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
</style>
</head>
<body>
<header>
<h1>Department of Microbiology</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">Faculty</a>
<div class="dropdown-content">
</div>
</li>
<li><a href="#">Courses</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">Syllabus</a></li>
<li><a href="#">Notifications</a></li>
</ul>
</nav>
<div class="container">
<section class="section">
</p>
</section>
</div>
</body>
</html>