Scribd
Upload
47 views

Select All Elements With Class "Intro" and Set Background Color As Red

The document discusses CSS selectors and provides 11 tasks to demonstrate different types of selectors by selecting and styling various HTML elements. Each task describes which element(s) to select and what styles to apply, with the expected output shown. The tasks cover element, ID, class, descendant, child, and attribute selectors as well as the hover pseudo-class.

Uploaded by

Haseeb Javed
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
47 views

Select All Elements With Class "Intro" and Set Background Color As Red

The document discusses CSS selectors and provides 11 tasks to demonstrate different types of selectors by selecting and styling various HTML elements. Each task describes which element(s) to select and what styles to apply, with the expected output shown. The tasks cover element, ID, class, descendant, child, and attribute selectors as well as the hover pseudo-class.

Uploaded by

Haseeb Javed
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/ 11

CSS Selectors

Task: 1

Select all elements with class="intro" and set background color as red.

OUTPUT:

Task: 2

Select the element with id="firstname" and set background color as yellow.

<html>
<head>
    <style>
        #firstname{
            background-color: yellow;
        }

        </style>
</head>
<body>
   <h1>Welcome to My Homepage</h1>
   <div class="intro">
       <p id="firstname">My name is Donald</p>
       <p id="hometown">I live in Duckburg.</p>
   </div>
   <p>My besy friend is Mickey.</p>
</body>
</html>

OUTPUT:

Task: 3

Select all elements in given HTML code and set background color as yellow.
OUTPUT:

Task: 4

Select all <p> elements and set background color as yellow and font color as red.
OUTPUT:

Task: 5

Select all <p> elements with class="intro" and set background color as green and font color as
white.
OUTPUT:

Task: 6

Select all <h1> elements and all <p> elements and set background color as green and font color
as pink.
OUTPUT:

Task: 7
Select and style every <p> element that is inside <div> elements and set background color as
green and font color as pink.

OUTPUT:

Task: 8

Select all <p> elements where the parent is a <div> element and set background color as green.
OUTPUT:

Task: 9

Select all <p> elements that are placed immediately after <div> elements and set background
color as red.
OUTPUT:

Task: 10

Style all <a> elements with a target attribute: and set background color as pink.
OUTPUT:

Task: 11

Select and style a link when you mouse over it and change color to red.
OUTPUT:

You might also like