Assignments Of Class 22: Pseudo-classes
Assignment 1: Change Background Color on Hover for Buttons
Objective: Change the background color of a button when the user hovers over it using the :hover pseudo-class.
Steps:
1. Create a simple HTML page with a button element.
2. Use the :hover pseudo-class in CSS to change the background color of the button when hovered.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
background-color: lightblue;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: orange;
}
</style>
</head>
<body>
<button>Hover me!</button>
</body>
</html>
Explanation:
- When the user hovers over the button, the background color changes from lightblue to orange.
Assignment 2: Focus Effect on Input Field
Objective: Use the :focus pseudo-class to apply a style to an input field when it is focused.
Steps:
1. Create an HTML form with input fields.
2. Use the :focus pseudo-class to change the border color of the focused input.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Effect</title>
<style>
input {
padding: 10px;
margin: 5px;
border: 2px solid #ccc;
font-size: 16px;
}
input:focus {
border-color: green;
background-color: lightyellow;
}
</style>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
</form>
</body>
</html>
Explanation:
- When an input field is focused, the border turns green, and the background color turns light yellow.
Assignment 3: Style Odd and Even Rows in a Table Using :nth-child()
Objective: Style the odd and even rows of a table with different background colors using the :nth-child() pseudo-class.
Steps:
1. Create a table with multiple rows.
2. Apply alternating background colors to the rows using :nth-child().
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Row Styling</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
tr:nth-child(odd) {
background-color: lightgray;
}
tr:nth-child(even) {
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
<tr>
<td>Mike</td>
<td>35</td>
</tr>
<tr>
<td>Anna</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
Explanation:
- The :nth-child(odd) applies the lightgray color to odd rows, and :nth-child(even) applies lightblue to even rows, alternating the background colors.
Assignment 4: Style Links on Hover
Objective: Apply a hover effect to links (<a>) to change their color when hovered.
Steps:
1. Create an HTML page with multiple links.
2. Use the :hover pseudo-class to change the color of the links when hovered.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Hover Effect</title>
<style>
a {
text-decoration: none;
color: blue;
font-size: 18px;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">Home</a>
<br>
<a href="#">About</a>
<br>
<a href="#">Services</a>
</body>
</html>
Explanation:
- When the user hovers over any link, its color changes from blue to red.
Assignment 5: Focus Effect for Textarea
Objective: Apply a style to a textarea when it gains focus using the :focus pseudo-class.
Steps:
1. Create a form with a textarea element.
2. Use :focus to change the border color of the textarea when it is focused.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Focus Effect</title>
<style>
textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
margin: 5px 0;
}
textarea:focus {
border-color: purple;
background-color: lightpink;
}
</style>
</head>
<body>
<form>
<label for="feedback">Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" placeholder="Write your feedback here..."></textarea>
</form>
</body>
</html>
Explanation:
- When the textarea is focused, its border turns purple, and the background color changes to lightpink.
Assignment 6: Apply Hover Effect on Multiple Buttons
Objective: Apply a hover effect to multiple buttons in the same form.
Steps:
1. Create a form with multiple buttons.
2. Use :hover to change the background color of all buttons when hovered.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Buttons Hover</title>
<style>
button {
padding: 10px 20px;
background-color: lightcoral;
border: none;
font-size: 16px;
margin: 5px;
}
button:hover {
background-color: tomato;
}
</style>
</head>
<body>
<form>
<button type="button">Save</button>
<button type="button">Cancel</button>
<button type="button">Delete</button>
</form>
</body>
</html>
Explanation:
- All three buttons change their background color from lightcoral to tomato when hovered.
Assignment 7: Style Every Third Item in a List Using :nth-child()
Objective: Use the :nth-child() pseudo-class to apply a style to every third item in an unordered list.
Steps:
1. Create an unordered list with several list items.
2. Apply a style to every third item using :nth-child(3n).
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Every Third Item</title>
<style>
ul li:nth-child(3n) {
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>
Explanation:
- Every third item (Item 3, Item 6) in the list gets a lightgreen background color.
Assignment 8: Focus Effect on Search Bar
Objective: Apply a focus effect to a search input field.
Steps:
1. Create an HTML form with a search bar.
2. Use :focus to apply a border change and background color when the search bar is focused.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Bar Focus</title>
<style>
input[type="search"] {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
width: 200px;
}
input[type="search"]:focus {
border-color: blue;
background-color: lightyellow;
}
</style>
</head>
<body>
<form>
<label for="search">Search:</label>
<input type="search" id="search" name="search" placeholder="Type to search...">
</form>
</body>
</html>
Explanation:
- When the search bar is focused, its border color changes to blue, and the background becomes light yellow.
Assignment 9: Style Links with Different States
Objective: Apply different styles for links in normal, hover, and active states.
Steps:
1. Create several links.
2. Apply different styles for normal, hover, and active states.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link States</title>
<style>
a {
text-decoration: none;
color: blue;
}
a:hover {
color: red;
}
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</body>
</html>
Explanation:
- Links have different colors in their normal, hover, and active states.
Assignment 10: Style Even Items in a List with :nth-child()
Objective: Use :nth-child(even) to apply a different style to even items in a list.
Steps:
1. Create an unordered list.
2. Use :nth-child(even) to style even items differently.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Even List Items</title>
<style>
ul li:nth-child(even) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
Explanation:
- The even-numbered list items (Item 2, Item 4) are styled with a red text color.
No comments:
Post a Comment