Exercise 1: Basic Selectors Create a CSS rule that selects all <p> elements on the page and changes their font color to blue.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
<p>Another paragraph.</p>
<p>And one more.</p>
</body>
</html>
Exercise 2: Class Selectors Apply a red background color to all elements with the class “highlight.”
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="highlight">Highlight me!</p>
<div class="highlight">And me!</div>
</body>
</html>
Exercise 3: ID Selectors Style the element with the ID “header” to have a bold font.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">This is a header</header>
</body>
</html>
Exercise 4: Descendant Selectors Select and style the <em> element within the <blockquote> element differently than other <em> elements on the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<blockquote>
<p>Here is a <em>special</em> quote.</p>
</blockquote>
<p>Another <em>normal</em> emphasis.</p>
</body>
</html>
Exercise 5: Pseudo-classes Apply a different color to visited and unvisited links.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Unvisited Link</a>
<a href="#" class="visited">Visited Link</a>
</body>
</html>
Exercise 6: Pseudo-elements Add a double border to the first letter of each <p> element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
<p>Another paragraph.</p>
</body>
</html>
Exercise 7: Complex Selectors Style the second list item of each unordered list differently.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>
Exercise 8: Color Create a CSS rule that changes the background color of the <body> element to a gradient.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is some content.</p>
</body>
</html>
Exercise 9: Sizing Units Make the font size of all headings responsive, adjusting based on the viewport width.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</body>
</html>
Exercise 10: Universal Selector Style all elements on the page to have a border.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
<div>Another element</div>
<a href="#">A link</a>
</body>
</html>
Exercise 11: Grouping Selectors Combine selectors to style both the <h1> and <h2> elements with the same properties.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</body>
</html>
Exercise 12: Attribute Selectors Select and style all links with a “target” attribute set to “_blank.”
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#" target="_blank">Link 1</a>
<a href="#">Link 2</a>
</body>
</html>
Exercise 13: Nth-child Pseudo-class Style every third list item with a background color.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
Exercise 14: First-child Pseudo-class Select and style the first list item within each <ul> differently.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Exercise 15: Last-child Pseudo-class Style the last list item within each <ul> differently.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>