30 CSS Basic Exercises for Intermediate with Solutions

Master intermediate CSS skills with our comprehensive list of top 30 exercises. Dive into coding challenges that improve your understanding and proficiency in CSS, setting a solid foundation for advanced challenges. Start your journey to CSS mastery today!

Learning Objectives:

Exercise Instructions:

Start with the first exercise and attempt to solve it before checking the hint or solution.
Ensure you understand the logic behind each solution, as this will help you in more complex problems.
Use these exercises to reinforce your learning and identify areas that may require further study.

1. Create a sticky header that remains at the top when scrolling.

Expected Output:

The header stays visible at the top of the page while the rest of the content scrolls.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create a sticky header */ </style> </head> <body> <header>Sticky Header</header> <div><p>Content goes here...</p></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.

2. Style a button with a hover effect to change its size and color.

Expected Output:

The button changes size and color when hovered.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the button */ </style> </head> <body> <button>Hover 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.

3. Create a responsive grid layout with three columns using Flexbox.

Expected Output:

The divs are arranged in three columns on larger screens and adjust to one column on smaller screens.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the Flexbox layout */ </style> </head> <body> <div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</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.

4. Add a hover effect to an image to increase its size (zoom effect).

Expected Output:

The image zooms in slightly when hovered.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the zoom effect */ </style> </head> <body> <img src="example.jpg" alt="Example Image" /> </body> </html>

Document

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

Need help ?

Click on Hint to solve the question.

5. Create a circular profile card with a shadow effect and centered text.

Expected Output:

The profile card appears circular with a shadow and text centered inside it.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the profile card */ </style> </head> <body> <div class="profile-card"> <img src="profile.jpg" alt="Profile Image" /> <p>Name</p> </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.

6. Design a navigation bar with dropdown menus.

Expected Output:

The navigation bar has dropdown menus that appear when hovered.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the navigation bar with dropdowns */ </style> </head> <body> <nav> <ul class="menu"> <li>Home</li> <li> About <ul class="dropdown"> <li>Team</li> <li>Company</li> </ul> </li> <li>Contact</li> </ul> </nav> </body> </html>

Document

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

Need help ?

Click on Hint to solve the question.

7. Create a card layout with a hover effect to elevate the card (shadow grows).

Expected Output:

The card shows an elevated shadow when hovered.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the card layout */ </style> </head> <body> <div class="card"> <h3>Card Title</h3> <p>Card content goes here.</p> </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.

8. Use media queries to change the font size for screens smaller than 768px.

Expected Output:

The font size changes for smaller screens.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to use media queries */ </style> </head> <body> <p>Your content here</p> </body> </html>

Document

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

Need help ?

Click on Hint to solve the question.

9. Create a text box with a placeholder and a focus effect (change border color).

Expected Output:

The text box shows a placeholder and changes its border color when focused.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the text box */ </style> </head> <body> <input type="text" placeholder="Enter your name" /> </body> </html>

Document

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

Need help ?

Click on Hint to solve the question.

10. Add an animation to rotate a square continuously.

Expected Output:

The square rotates continuously.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the rotation animation */ </style> </head> <body> <div class="square"></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.

1 of 3