CSS Exercises to Master Your Skills

Practicing CSS through exercises is one of the best ways to build a strong understanding of web styling. At The Coding College, we emphasize hands-on learning. These CSS exercises are designed to help you master everything from basic styling to advanced layouts.

Let’s get started with some practical tasks!

Beginner Exercises

1. Change Text Color

Create a webpage where all headings (<h1>) are red, and all paragraphs (<p>) are blue.

Hint: Use the color property in your CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Text Color Exercise</title>
  <style>
    h1 {
      color: red;
    }
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

2. Add Background Color

Add a light gray background color to your webpage and make the text white.

Hint: Use the background-color and color properties.

3. Create a Bordered Box

Create a <div> with a solid black border, 2px thick, and add 20px padding inside the box.

Hint: Use the border and padding properties.

4. Center an Element

Center a <div> horizontally and vertically in the browser window.

Hint: Use display: flex and justify-content with align-items.

5. Style Links

Change the link color to green and underline it only when the user hovers over it.

Hint: Use the :hover pseudo-class.

Intermediate Exercises

6. Responsive Design with Media Queries

Create a responsive webpage where the background color changes to light blue when the screen width is less than 600px.

Hint: Use @media and max-width.

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

7. Add a Navigation Bar

Build a horizontal navigation bar with the following links: Home, About, Contact. Style it with padding, a background color, and hover effects.

Hint: Use ul, li, and :hover pseudo-classes.

8. Grid Layout Exercise

Create a 3×3 grid layout where each grid cell has a 1px solid border and is equally spaced.

Hint: Use the display: grid and grid-template-columns properties.

9. Add a CSS Transition

Create a button that changes color when hovered, with a smooth transition effect.

Hint: Use the transition property with hover.

button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: darkblue;
}

10. Create a Flexbox Layout

Create a flexbox layout with three sections: Header, Main Content, and Footer. Arrange them vertically on small screens and side-by-side on larger screens.

Hint: Use display: flex with media queries.

Advanced Exercises

11. Create a Tooltip

Design a button that shows a tooltip when the user hovers over it.

Hint: Use the ::after pseudo-element and position: absolute.

12. Animated Loading Spinner

Create a CSS-only animated spinner using the @keyframes property.

Hint: Use the transform: rotate() function.

13. Build a Pricing Table

Design a pricing table with three columns (Basic, Pro, Premium) using CSS Grid or Flexbox. Add hover effects to highlight a column.

Hint: Use hover, grid, and responsive techniques.

14. Overlay Text on an Image

Create an image with centered overlay text. The text should appear only when the user hovers over the image.

Hint: Use position: relative and opacity.

15. Responsive Image Gallery

Build a responsive image gallery with 4 images per row on large screens and 2 images per row on small screens.

Hint: Use grid-template-columns with media queries.

How to Practice Effectively

  • Experiment: Try modifying the exercises to see how changes affect the layout.
  • Build Projects: Use these exercises as building blocks for larger projects.
  • Test Your Skills: Implement solutions without copying code.

Leave a Comment