Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
15 views3 pages

Lecture 13 CSS Excercise

The document contains a series of exercises focused on CSS pseudo-classes and pseudo-elements. Each exercise provides specific objectives and instructions for styling HTML elements, such as buttons, input fields, lists, and links, using various hover and focus effects. Additionally, there is a challenge task that encourages the integration of all learned concepts into a feedback box design.

Uploaded by

mehmoonasaleem098
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 views3 pages

Lecture 13 CSS Excercise

The document contains a series of exercises focused on CSS pseudo-classes and pseudo-elements. Each exercise provides specific objectives and instructions for styling HTML elements, such as buttons, input fields, lists, and links, using various hover and focus effects. Additionally, there is a challenge task that encourages the integration of all learned concepts into a feedback box design.

Uploaded by

mehmoonasaleem098
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/ 3

🧪 CSS Pseudo-Classes & Pseudo-Elements – Exercises

🟩 Exercise 1: Button Hover Effect


Objective: Change the button color and text color on hover.
Instructions:
 Create a button with the text: “Submit”.
 When the user hovers over the button:
o Background should turn green.

o Text color should turn white.

HTML Code
<button>Submit</button>

🟩 Exercise 2: Focus Input Field


Objective: Highlight an input field when clicked.
Instructions:
 Create a text input field.
 When the input is focused:
o Add a 2px solid blue border.

o Remove the default outline.

HTML Code
<input type="text" placeholder="Your Name">

🟩 Exercise 3: First and Nth Child Styling


Objective: Style the first and third list items differently.
Instructions:
 Create an unordered list with 5 items.
 Make the first item red and bold.
 Make the third item have a yellow background.
HTML Code
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

🟩 Exercise 4: Add Icons with ::before and ::after


Objective: Use pseudo-elements to add emojis before and after text.
Instructions:
 Create a heading: <h3>Notice</h3>
 Add a warning emoji (⚠️) before the heading.
 Add a check emoji (✔️) after the heading.

🟩 Exercise 5: Interactive Paragraph Hover


Objective: Show an emoji only when paragraph is hovered.
Instructions:
 Create a paragraph: <p>Hover to see magic!</p>
 On hover, add a pointing emoji 👉 before the text using ::before.

🟩 Exercise 6: Link State Styling


Objective: Style different link states.
Instructions:
 Create a link: <a href="#">Google</a>
 Style as follows:
o Blue when not visited

o Purple when visited

o Green when hovered

o Red when clicked

🟩 Exercise 7: Active Button Effect


Objective: Simulate button press on click.
Instructions:
 Create a button: <button>Press Me</button>
 When user clicks and holds:
o Background color should change to orange.

🟩 Challenge Task (Bonus for Fast Students)


Objective: Build a “feedback box” using all pseudo-classes and pseudo-
elements.
Instructions:
 Include:
o A text field and a textarea with :focus style.

o A button with :hover and :active.

o A label with a ::after asterisk * to show it’s required.

o A heading with an emoji using ::before.

You might also like