Scribd
Upload
39 views

CSS Part2 (QS)

The document provides a sample HTML code and instructions to complete CSS practice questions targeting different CSS selectors including element, class, id, universal, child, descendant selectors and pseudo-classes. The 10 questions are divided into two parts - the first part focuses on applying various selectors and the second part introduces pseudo-classes and pseudo-elements. The student is asked to add CSS rules to style the given HTML based on the questions.

Uploaded by

saurabhdubey8ballpool
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

CSS Part2 (QS)

The document provides a sample HTML code and instructions to complete CSS practice questions targeting different CSS selectors including element, class, id, universal, child, descendant selectors and pseudo-classes. The 10 questions are divided into two parts - the first part focuses on applying various selectors and the second part introduces pseudo-classes and pseudo-elements. The student is asked to add CSS rules to style the given HTML based on the questions.

Uploaded by

saurabhdubey8ballpool
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS (Part 2)

[email protected]
Practice Questions

We are going to write CSS for the following code :


(Please copy-paste or re-write this code in your HTML file)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>CSS Assignment</title>
</head>
<body>
<h1>CSS Practice</h1>
<h3>Let's learn about selector.</h3>
<!-- Paragraph1 -->
<p>There are multiple selectors in css.</p>
<!-- Paragraph2 -->
<p>Some of them include class selector, id selector etc.</p>
<!-- Paragraph3 -->
<p>And we can also combine these too.</p>

<div>
<h5>Did you like the practice set?</h5>
<input type="checkbox" id="yes" />

[email protected]
<label for="yes">Yes</label>
<br />
<button>Learn next!</button>
</div>
</body>
</html>

PART A (Selectors)
Qs1. Give the h1 header a unique id - “mainTopic” & set its color to blue using the id
selector.

Qs2. Align all the text in the page to the center using a universal selector.

Qs3. Change the font style of all heading tags in the page to ‘Georgia’.

Qs4. Set the color of all the paragraphs to white & background color to cornflowerblue.
(Without using the element selector - ‘p’)

Qs5. Select all buttons inside div and change their background color to purple & text
color to azure.

PART B (Pseduo class & elements)


Qs6. Change the button background color to yellow & text color to blue when we hover

[email protected]
over it.

Qs7. Change the color of every odd numbered paragraph to yellow. (Paragraph 1 & 3)

Qs8. Change the color of the first letter of h1 heading to red.

Qs9. Set the text color of the checkbox label to dark green when the checkbox is
ticked.

Qs10. Order these rules according to their specificity, from least specific to most
specific. :
- h1
- #mainContent
- .main
- div .main

You might also like