Program 3 · Web Technology Lab

Web Technology Lab · BCSL504 Web Tech (HTML · CSS · JS)

Problem Statement Program 3

Develop an external style sheet named style.css and provide different styles for h2, h3, hr, p, div, span, time, img and a tags. Apply different CSS selectors for tags and demonstrate the significance of each.

Web Tech (HTML · CSS · JS) Code 2 files

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled HTML Elements</title>

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

<body>

<h2>This is an H2 Heading</h2>

<h3>This is an H3 Heading</h3>

<hr>

<p>
This is a paragraph with
<span>highlighted text</span>.
</p>

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

<time datetime="2024-11-17">
November 17, 2024
</time>

<p>
<img src="https://vtudeveloper.in/assets/sample.png" alt="Sample Image">
</p>

<p>
Visit my
<a href="#">Website</a>
</p>

</body>
</html>

style.css

h2{
    color:blue;
    font-size:24px;
}

h3{
    color:green;
}

hr{
    border:2px solid red;
}

p{
    font-size:18px;
}

div{
    background:#f0f0f0;
    padding:10px;
}

span{
    color:red;
}

time{
    font-style:italic;
}

img{
    width:100px;
    height:100px;
}

a{
    color:purple;
    text-decoration:none;
}

Output 1 screenshot

VTU Developer

Download the clean, watermark-free output image — ₹1.00