Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
3 views2 pages

Web 3

The document outlines the creation of an external CSS stylesheet named 'style.css' to style various HTML elements including h2, h3, hr, p, div, span, time, img, and a tags. Each element is assigned specific styles such as colors, fonts, and margins, demonstrating the use of different CSS selectors. The HTML structure provided shows how these styles are applied to create a visually appealing webpage.

Uploaded by

sachinadi88
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
3 views2 pages

Web 3

The document outlines the creation of an external CSS stylesheet named 'style.css' to style various HTML elements including h2, h3, hr, p, div, span, time, img, and a tags. Each element is assigned specific styles such as colors, fonts, and margins, demonstrating the use of different CSS selectors. The HTML structure provided shows how these styles are applied to create a visually appealing webpage.

Uploaded by

sachinadi88
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/ 2

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.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled HTML Page</title>

<link rel="stylesheet" href="style.css">


</head>

<body>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<hr>

<div>This is a div container.


<p>This is a paragraph inside a div.
<span>This is a span inside a paragraph.</span>
</p>
</div>

<time datetime="2025-08-25">25th August 2025</time>


<img src="image.jpg" alt="Sample Image">
<a href="https://www.example.com">This is a link</a>
</body>
</html>

style.css
/* Style for H2 heading */
h2 {
color: steelblue;
font-family: Arial, sans-serif; font-size: 24px;
text-transform: uppercase; text-align: center;
}
/* Style for H3 heading */
h3 {
color: lightgreen;
font-family: 'Georgia', serif; font-size: 20px;
font-style: italic;
}
/* Style for Horizontal Rule (HR) */
hr {
border: 1px solid cyan; margin: 20px 100px;
}
/* Style for Paragraph (P) */
p{
font-family: Calibri;
color:violet ;
font-size: 22px;
}
/* Style for Div Container */
div {
background-color: lightpink;
padding: 20px;
margin: 20px 10px;
border-radius: 3px;
}
/* Style for Span */
span {
color: tomato;
font-weight: bold;
}
/* Style for Time */
time {
color: blue;
font-size: 16px;
font-weight: bold;
}
/* Style for Image (IMG) */
img {
max-width: 300px; height: auto; display: block; margin-left: 100px;
border: solid;
border-radius: 10px;
}
/* Style for Links (A) */
a{
color: orange;
text-decoration:italic;
}
a:hover {
color: red;
text-decoration: underline;
}

You might also like