Scribd
Upload
15 views13 pages

vnd.openxmlformats-officedocument.wordprocessingml.document&rendition=1-2

Html

Uploaded by

pagadalapravallika2409
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
15 views13 pages

vnd.openxmlformats-officedocument.wordprocessingml.document&rendition=1-2

Html

Uploaded by

pagadalapravallika2409
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/ 13

4.

Selector forms

a) Write a program to apply different types of selector forms Simple selector (element, id, class,
group, universal) , Combinator selector (descendant, child, adjacent sibling, general sibling) , Pseudo-
class selector ,Pseudo-element selector ,Attribute selector

AIM: To Write a program to apply different types of selector forms Simple selector , Combinator
selector , Pseudo-class selector ,Pseudo-element selector, Attribute selector

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>CSS Selectors Example</title>

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

</head>

<body>

<header id="main-header">

<h1>Welcome to CSS Selectors</h1>

<nav>

<ul>

<li><a href="#home" class="nav-link">Home</a></li>

<li><a href="#about" class="nav-link">About</a></li>

<li><a href="#contact" class="nav-link">Contact</a></li>

</ul>

</nav>

</header>

<section class="content">

<p class="intro">This is an introduction paragraph with a <span class="highlight">highlighted


text</span>.</p>

<p>This is a normal paragraph.</p>

<p>Another paragraph that uses a link: <a href="https://example.com">Click me!</a></p>

</section>
<footer>

<p>&copy; 2025 CSS Selectors Example</p>

</footer>

</body>

</html>

STYLES.CSS(FILE NAME)

/* Simple Selectors */

/* Element selector */

h1 {

color: blue;

/* ID selector */

#main-header {

background-color: #f2f2f2;

padding: 20px;

/* Class selector */

.nav-link {

color: green;

text-decoration: none;

/* Group selector */

h1, p {

font-family: Arial, sans-serif;

}
/* Universal selector */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

/* Combinator Selectors */

/* Descendant selector (selects all <p> inside the .content section) */

.content p {

font-size: 16px;

/* Child selector (selects only direct <p> children of .content) */

.content > p {

color: red;

/* Adjacent sibling selector (selects the <p> that immediately follows an <h1>) */

h1 + p {

font-weight: bold;

/* General sibling selector (selects all <p> siblings of <h1>) */

h1 ~ p {

font-style: italic;

/* Pseudo-classes */
/* :hover pseudo-class */

.nav-link:hover {

color: orange;

/* :first-child pseudo-class */

.content p:first-child {

background-color: lightblue;

/* :last-child pseudo-class */

.content p:last-child {

color: purple;

/* :nth-child pseudo-class */

.content p:nth-child(2) {

color: darkred;

/* :not pseudo-class */

p:not(.intro) {

background-color: #e0e0e0;

/* Pseudo-elements */

/* ::before pseudo-element */

h1::before {

content: "Prefix: ";

color: red;
}

/* ::after pseudo-element */

h1::after {

content: " - End of title";

color: gray;

/* Attribute Selectors */

/* Select all anchor elements with href attribute starting with "https" */

a[href^="https"] {

font-weight: bold;

color: darkblue;

/* Select all anchor elements with href attribute containing "example" */

a[href*="example"] {

color: green;

/* Select all anchor elements with href attribute ending with ".com" */

a[href$=".com"] {

color: purple;

}
OUTPUT:

Prefix: Welcome to CSS Selectors


 Home
 About
 Contact
This is an introduction paragraph with a highlighted text.
This is a normal paragraph.
Another paragraph that uses a link: Click me!
© 2025 CSS Selectors Example

RESULT: The above program to apply different types of selector forms Simple selector ,Combinator
selector , Pseudo-class selector ,Pseudo-element selector, Attribute selector was successfully
Executed.

5)a) Write a program to demonstrate the various ways you can reference a color in CSS.

Aim: To Write a program to demonstrate the various ways you can reference a color in CSS.

Program:

<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even
transparent colors using RGBA or HSLA color values.</p>
</body>
</html>
Output:
Same as color name "Tomato":

gb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

b) Write a CSS rule that places a background image halfway down the page, tilting it horizontally. The
image should remain in place when the user scrolls up or down.
Aim: To Write a CSS rule that places a background image halfway down the page, tilting it
horizontally. The image should remain in place when the user scrolls up or down.
Program:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
text-align: center;
}
#ex {
text-align: center;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Example for fixed Background Image</h1>
<div id="ex">
<p>
Paragraphs are the building block of papers. Many students define paragraphs in terms of
length: a paragraph is a group of at least five sentences,
</p>
<br><br>
<p>
a paragraph is half a page long,etc. In reality, though, the unityand coherence of ideas among
sentences is what constitutes a paragraph.
</p>
<br><br>
<p> A paragraph is defined as “a group of sentences or a single sentence that forms a unit”
(Lunsford and Connors 116).
</p>
<br><br>
<p>
Length and appearance do not determine whether a section in a paper is a paragraph.
</p>
<br><br>
<p>
For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just
one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support
one main idea.
</p>
<br><br>
<p>
In this handout, we will refer to this as the “controlling idea,” because it controls what
happens in the rest of the paragraph.
</p>
</div>
</body>
</html>
Output:

5 c) Write a program using the following terms related to CSS font and text:

i. font-size ii. font-weight iii. font-style

iv. text-decoration v. text-transformation vi. text-alignment

AIM: Write a program using the terms related to CSS font and text font-size, font-weight, font-style,
text-decoration,text-transformation,text-alignment

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>CSS Font and Text Properties</title>

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

</head>

<body>

<header>

<h1>CSS Font and Text Properties</h1>

</header>

<section class="content">
<h2 class="font-example">Font-Size Example</h2>

<p class="font-size-example">welcome to sree rama engineering college</p>

<h2 class="font-example">Font-Weight Example</h2>

<p class="font-weight-example">HTML stands for Hyper Text Markup Language and HTML is the
standard markup language for creating Web pages </p>

<h2 class="font-example">Font-Style Example</h2>

<p class="font-style-example">CSS stands for Cascading Style Sheets and describes how HTML
elements are to be displayed on screen, paper, or in other media</p>

<h2 class="font-example">Text-Decoration Example</h2>

<p class="text-decoration-example">CSS saves a lot of work. It can control the layout of multiple
web pages all at once</p>

<h2 class="font-example">Text-Transform Example</h2>

<p class="text-transform-example">External stylesheets are stored in CSS files.</p>

<h2 class="font-example">Text-Alignment Example</h2>

<p class="text-align-example">HTML describes the structure of a Web page</p>

</section>

</body>

</html>

OUTPUT

CSS Font and Text Properties


Font-Size Example

welcome to sree rama engineering college


Font-Weight Example

HTML stands for Hyper Text Markup Language and HTML is the standard markup
language for creating Web pages
Font-Style Example

CSS stands for Cascading Style Sheets and describes how HTML elements are to be
displayed on screen, paper, or in other media

Text-Decoration Example

CSS saves a lot of work. It can control the layout of multiple web pages all at once

Text-Transform Example

EXTERNAL STYLESHEETS ARE STORED IN CSS FILES.

Text-Alignment Example

HTML describes the structure of a Web page

RESULT:The above program using the terms related to CSS font and text font-size, font-weight,
font-style, text-decoration,text-transformation,text-alignment was successfully Executed.

5d) Write a program, to explain the importance of CSS Box model using

i. Content ii. Border iii. Margin iv. padding

AIM: To Write a program, to explain the importance of CSS Box model using Content, Border,
Margin,padding

Source code:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: lightgrey;

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;
}

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:
borders, padding, margins, and the actual content.</p>

<div>HTML is the standard markup language for creating Web pages</div>

</body>

</html>

OUTPUT

Result: The above program, to explain the importance of CSS Box model using Content, Border,
Margin,padding was successfully Executed.

You might also like