Top 30 CSS Practice Exercises for Intermediate with Solutions

21. Use position: sticky to make a sidebar that sticks while scrolling.

Expected Output:

The sidebar stays visible when scrolling through the main content.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the sticky sidebar */ </style> </head> <body> <div class="container"> <aside class="sidebar">Sidebar</aside> <main class="content"> Main Content<br />Scroll down to see the effect. </main> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

22. Create an accordion menu that expands and collapses sections.

Expected Output:

Clicking an accordion item expands it to show hidden content.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the accordion menu */ </style> </head> <body> <div class="accordion"> <div class="item"> <button class="toggle">Item 1</button> <div class="content">Content for Item 1</div> </div> <div class="item"> <button class="toggle">Item 2</button> <div class="content">Content for Item 2</div> </div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

23. Style a table to highlight the row on hover.

Expected Output:

Hovering over a row changes its background color.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the table */ </style> </head> <body> <table> <tr> <td>Row 1</td> </tr> <tr> <td>Row 2</td> </tr> <tr> <td>Row 3</td> </tr> </table> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

24. Create a hover effect to flip a card and show details on the back.

Expected Output:

Hovering over the card flips it to reveal the back.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the flip effect */ </style> </head> <body> <div class="card"> <div class="front">Front</div> <div class="back">Back</div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

25. Design a responsive image gallery using CSS Grid.

Expected Output:

The images are displayed in a grid layout that adjusts on smaller screens.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the gallery */ </style> </head> <body> <div class="gallery"> <img src="img1.jpg" alt="Image 1" /> <img src="img2.jpg" alt="Image 2" /> <img src="img3.jpg" alt="Image 3" /> <img src="img4.jpg" alt="Image 4" /> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

26. Create a button with a ripple effect when clicked.

Expected Output:

A ripple effect appears when the button is clicked.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the button with a ripple effect */ </style> </head> <body> <button class="ripple">Click Me</button> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

27. Design a badge counter on a notification icon using ::after pseudo-element.

Expected Output:

A small badge showing the count appears on the icon.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the notification icon and badge */ </style> </head> <body> <div class="notification-icon">🔔</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

28. Create a menu that slides in from the left side when a button is clicked.

Expected Output:

Clicking the button shows the sliding menu.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the sliding menu */ </style> </head> <body> <button id="toggleMenu">☰ Menu</button> <div class="menu">Menu Content</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

29. Style an input range slider with a custom track and thumb.

Expected Output:

The slider track and thumb are customized.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the range slider */ </style> </head> <body> <input type="range" class="slider" /> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

30. Create a parallax scrolling effect for a background image.

Expected Output:

The background image scrolls slower than the content.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the parallax effect */ </style> </head> <body> <section class="parallax"></section> <div class="content">Content goes here...</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.