30 CSS Basic Exercises for Beginners with Solutions

Master beginner 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 intermediate 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 webpage with a solid red background color.

Required Input:

A webpage with a body element.

Expected Output:

The entire background of the webpage is solid red.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to set the background color */ </style> </head> <body> </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 paragraph with a font size of 18px and font color blue.

Required Input:

A webpage with a <p> tag.

Expected Output:

The paragraph text appears in blue and has a font size of 18px.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the paragraph */ </style> </head> <body> <p>Your text 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.

3. Center a heading using text alignment.

Required Input:

A webpage with a <h1> tag.

Expected Output:

The heading appears centered horizontally on the page.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to center the heading */ </style> </head> <body> <h1>Your Heading</h1> </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 border of 2px solid black to a div.

Required Input:

A webpage with a <div> tag.

Expected Output:

The div has a black border with a thickness of 2px.

Code In Css

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

5. Set the width and height of an image to 200px.

Required Input:

A webpage with an <img> tag.

Expected Output:

The image appears with dimensions of 200px by 200px.

Code In Css

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

6. Create a button with a background color of green and white text.

Required Input:

A webpage with a <button> tag.

Expected Output:

The button appears with a green background and white text.

Code In Css

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

7. Add padding of 10px to a paragraph.

Required Input:

A webpage with a <p> tag.

Expected Output:

The paragraph text appears with padding of 10px around it.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the paragraph */ </style> </head> <body> <p>Your text 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.

8. Set the margin of a div to 20px on all sides.

Required Input:

A webpage with a <div> tag.

Expected Output:

The div appears with a 20px margin on all sides.

Code In Css

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

9. Create a list with circle-style bullets.

Required Input:

A webpage with an unordered list <ul> tag.

Expected Output:

The list items appear with circle-style bullets.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the list */ </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </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. Make a text bold using CSS.

Required Input:

A webpage with a <p> tag.

Expected Output:

The text in the paragraph appears bold.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the paragraph */ </style> </head> <body> <p>Your text 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.

1 of 3