CSS Exercises Solved Step by Step: A Practical Guide

Understanding CSS selectors and properties is only the first half of the battle. The real magic happens when you start combining them to solve actual layout and design problems. Just like with JavaScript, the best way to master CSS (Cascading Style Sheets) is through hands-on practice.

In this article, we will solve three classic CSS exercises step-by-step. These are incredibly common UI patterns that every frontend developer should know how to build from scratch. Let's dive in!

Exercise 1: The CSS Triangle

The Problem: You need to create a small pointing triangle (like an arrow on a tooltip or a dropdown menu) using only a single HTML <div>, without using any SVG or images.

Step-by-step: This is a classic CSS "hack". If you create an element with zero width and zero height, but give it very thick borders, the borders meet at angles. By making three of the borders transparent and giving the fourth border a color, you get a perfect triangle!

.triangle-up {
  /* 1. Remove width and height */
  width: 0;
  height: 0;
  
  /* 2. Set left and right borders to be transparent */
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  /* 3. Give the bottom border a color and size */
  border-bottom: 20px solid #3B82F6;
}

    

Exercise 2: The Holy Grail Layout

The Problem: Build the classic "Holy Grail" webpage layout: A full-width header at the top, a full-width footer at the bottom, and three columns in the middle (a navigation sidebar, a fluid center content area, and a right sidebar). The middle section should stretch to fill the screen.

Step-by-step: Years ago, developers used floats or complex flexbox setups for this. Today, CSS Grid makes this incredibly easy using the grid-template-areas property, which allows you to literally "draw" your layout in code.

.container {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 250px 1fr 200px;
  grid-template-areas: 
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

    

Exercise 3: Pure CSS Tooltip

The Problem: Create a tooltip that appears when a user hovers over a button. Do not use any JavaScript, just HTML and CSS.

Step-by-step: We can achieve this using CSS Pseudo-elements (::after) and the :hover state. We set the parent button to position: relative, and the tooltip to position: absolute. We hide the tooltip by default using opacity and visibility, and show it on hover.

.tooltip-container {
  position: relative;
  display: inline-block;
}

/* The Tooltip text itself */
.tooltip-container::after {
  content: 'Here is some extra info!';
  position: absolute;
  bottom: 125%; /* Position above the button */
  left: 50%;
  transform: translateX(-50%); /* Center it perfectly */
  background-color: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

/* Show the tooltip when hovering over the container */
.tooltip-container:hover::after {
  opacity: 1;
  visibility: visible;
}

    

Conclusion

CSS is incredibly powerful, and knowing these layout tricks and UI patterns will save you from having to reach for a heavy JavaScript library for simple components. By understanding how borders render, how the CSS Grid maps out 2D space, and how pseudo-elements work, you've leveled up your frontend styling skills. Keep practicing, and try combining the CSS Triangle with the Pure CSS Tooltip to make an arrow pointing down to the button!