Scribd
Upload
8 views

PROGRAM 3CSS

Uploaded by

zafarahmed2003
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
8 views

PROGRAM 3CSS

Uploaded by

zafarahmed2003
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/ 4

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>

You might also like