3.Develop an external style sheet named as “style.
css” and provide
different styles for h2, h3, hr, p, div, span, time, img & a tags. Apply
different CSS selectors for tags and demonstrate the significance of each.
CSS file
/* Basic styles for h2 and h3 headings */
h2 {
font-family: 'Arial', sans-serif;
font-size: 24px;
color: #4CAF50; /* Green color */
text-align: center;
margin-bottom: 20px;
}
h3 {
font-family: 'Verdana', sans-serif;
font-size: 20px;
color: #FF5722; /* Orange color */
border-bottom: 2px solid #FF5722; /* Underline with border */
padding-bottom: 5px;
margin-top: 10px;
}
/* Style for horizontal rule (hr) */
hr {
border: 0;
height: 2px;
background: #333; /* Dark gray color */
margin: 20px 0;
}
/* Styles for paragraph (p) */
p{
font-family: 'Georgia', serif;
font-size: 16px;
color: #333; /* Dark gray color */
line-height: 1.6;
margin: 15px 0;
}
/* Styles for div */
div {
border: 1px solid #ddd; /* Light gray border */
padding: 15px;
margin: 10px 0;
background-color: #f9f9f9; /* Very light gray background */
}
/* Styles for span */
span {
color: #FF4081; /* Pink color */
font-weight: bold;
}
/* Styles for time */
time {
font-style: italic;
color: #757575; /* Gray color */
}
/* Styles for img */
img {
max-width: 100%;
height: auto;
border-radius: 8px; /* Rounded corners */
display: block;
margin: 0 auto; /* Center image */
}
/* Styles for anchor (a) tags */
a{
color: #1E90FF; /* Dodger blue */
text-decoration: none; /* Remove underline */
font-weight: bold;
}
a:hover {
color: #FF4500; /* Orange red on hover */
text-decoration: underline; /* Underline on hover */
}
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Main Heading</h2>
<h3>Sub Heading</h3>
<hr>
<p>This is a paragraph with some <span>inline styling</span> applied to it.</p>
<div>
<p>This is a paragraph inside a div. Div elements are styled to provide visual
separation.</p>
<time datetime="2024-08-22">August 22, 2024</time>
<img src="example.jpg" alt="Example Image">
</div>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
