Scribd
Upload
48 views

Web Lab Program3

null

Uploaded by

Meghana Gowda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
48 views

Web Lab Program3

null

Uploaded by

Meghana Gowda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Experiment-03

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.

Style.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sample Styled Page (No Div)</title>

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

</head>

<body>

<main id="main-content">

<h2>Welcome to Our Styled Page</h2>

<p>This is a paragraph right after an h2. It demonstrates the adjacent

sibling selector.</p>

<h3>Hover over me!</h3>

<hr>

<p lang="en">This paragraph has a lang attribute, demonstrating the

attribute selector.</p>

<section>

<p>Here's a <span class="highlight">highlighted</span> word using the

class selector.</p>

<p>This paragraph is inside a section, showing the descendant

selector.</p>

<span>This span is a direct child of the section.</span>

</section>

<p>The current date and time: <time datetime="2023-08-31">August 31,

2023</time></p>
<p>Notice how the first letter of each paragraph is styled differently.</p>

<article class="special">

<p>This paragraph is inside an article with class="special".</p>

</article>

<img

src="https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https://

images.ctfassets.net/wp1lcwdav1p1/6z473u5f7WaFUnr9GxDEk2/085274c4a84

1bd2dc900ebca36c43c9c/GettyImages

1255905237.jpg?w=1500&h=680&q=60&fit=fill&f=faces&fm=jpg&fl=progre

ssive&auto=format%2Ccompress&dpr=1&w=1000" alt="A placeholder

image">

<p>Check out this <a href="https://searchcreators.org/">link</a> to see

different link states.</p>

</main>

</body>

</html>

Style.css

/* Element Selector */

h2 {

color: #2c3e50;

font-family: 'Arial', sans-serif;

border-bottom: 2px solid #3498db;

padding-bottom: 10px;

/* Element Selector with Pseudo-class */

h3:hover {

color: #e74c3c;

cursor: pointer;

transition: color 0.3s ease;

}
/* Element Selector */

hr {

border: 0;

height: 1px;

background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0,

0.75), rgba(0, 0, 0, 0));

/* Element Selector with Attribute */

p[lang] {

font-style: italic;

/* Class Selector */

.highlight {

background-color: #f1c40f;

padding: 5px;

/* ID Selector */

#main-content {

max-width: 800px;

margin: 0 auto;

padding: 20px;

background-color: #ecf0f1;

/* Descendant Selector */

div p {

line-height: 1.6;

margin-bottom: 15px;

/* Child Selector */

div > span {

font-weight: bold;
color: #16a085;

/* Adjacent Sibling Selector */

h2 + p {

font-size: 1.1em;

color: #7f8c8d;

/* Attribute Selector */

time[datetime] {

color: #8e44ad;

font-weight: bold;

/* Pseudo-element Selector */

p::first-letter {

font-size: 1.5em;

font-weight: bold;

color: #c0392b;

/* Multiple Selectors */

img, a {

border: 1px solid #bdc3c7;

padding: 5px;

/* Pseudo-class Selector for Links */

a:link, a:visited {

color: #3498db;

text-decoration: none;

a:hover, a:active {

color: #e74c3c;

text-decoration: underline;
}

/* Attribute Selector for Images */

img[alt] {

max-width: 100%;

height: auto;

/* Combining Selectors */

div.special p {

text-indent: 20px;

color: #27ae60;

You might also like