CSS Shapes Lab

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

Steps

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.