Scribd
Upload
21 views4 pages

Experiment No 3

Uploaded by

shafiqhakhanum53
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
21 views4 pages

Experiment No 3

Uploaded by

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

Experiment no 3

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.

STYLE.HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

<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 >This paragraph has a lang attribute, demonstrating the attribute selector.</p>

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

<section>

<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://www.w3schools.com/images/w3schools_green.jpg" alt="A placeholder image" >

<p>Check out this <a href=”https://vtu.ac.in/” target=”_blank”>link</a> to see different link states.</p>

</main>

</body>

</html> Style.css

/* Element Selector */

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