CSS Shapes Lab

43.9% Acceptance

In this lab exercise, you will learn how to create a Sqaure and a Circle using CSS.


1. Creating a Square:

  • Add a new element in your index.html file with an id 'square'
  • In your CSS file, set the width and height properties for this id to be equal. For instance, use 100px for a square of dimensions 100x100px

2. Creating a Circle:

  • Create a new div element in your index.html file with an id 'circle'
  • Set the width and height of the #circle to 100px
  • Set the border-radius property to 50% to create a circle

3. Add Background Colors

The created elements are not visible to you unless you've given them a background color. You have to add a background color to both #circle and #square elements. You can add your favourite colors as the background color.

By default the background-color of the elements is transparent, therefore not visible to us.