Web Technology lab

Program 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. 


<!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 some <span>highlighted text</span> using a span element.</p>

    <div>
        <p>This paragraph is inside a div element with a background color and padding.</p>
    </div>

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

    <p>
        Here is an image example:
        <img src="Images/vtudeveloperlogo.jpg" alt="Sample Image">
    </p>

    <p>
        Visit my <a href="https://vtudeveloper.in">website</a> for more information.
    </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-color: #f0f0f0;
        padding: 10px;
}
    
span {
        color: red;
}
    
time {
        font-style: italic;
}
    
img {
        width: 100px;
        height: 100px;
}
    
a {
    text-decoration: none;
    color: purple;
}

Output :-

output
Comments

Replay !

0 Comments

Share Your Thoughts

Please enter your name
Please enter a valid email
Password must be at least 6 characters
Please enter your comment
0/500 characters
Email Verification Required
We've sent a 6-digit verification code to . Please enter the code below to verify your email address.
Email Verified Successfully!
Your email has been verified. Would you like to proceed with posting your comment?

Type "YES" to confirm and post your comment, or click Cancel to skip posting.