CSS Shapes Lab

Step 1: Creating a Square
In your HTML (index.html) file, add a new element with an id of 'square'. This element will represent your square. Now, in your CSS (styles.css) file, set the width and height properties for the 'square' id to make it a square. For example, you can use 100px for both width and height to create a 100x100px square.

Step 2: Creating a Circle
To create a circle, add another div element with an id of 'circle' in your HTML file. Then, set the width and height of the 'circle' to 100px. To make it a circle, set the border-radius property to 50%.

Step 3: Add Background Colors
By default, HTML elements have a transparent background, so to make your square and circle visible, you need to add background colors. You can choose your favorite colors as the background color. For example, let's give the square a blue background and the circle a green background.

Note: By default the background-color of the elements are transparent, therefore they will not visible to us.

The provided code consists of an HTML document and CSS code. It creates a webpage with two shapes, a square and a circle, and styles them using CSS.

In the HTML part:

It sets the title of the webpage to "CSS Shapes Lab."

It links an external stylesheet called "styles.css."

It contains two empty div elements with unique IDs: one with the ID "square" and another with the ID "circle."

In the CSS part (inside "styles.css"):

It selects the div with the ID "square" and styles it as a black square. The square has a width and height of 100 pixels, making it a perfect square. It has a black background color.

It selects the div with the ID "circle" and styles it as a black circle. The circle has a width and height of 100 pixels, creating a square container. The "border-radius" property with a value of "50%" makes the square div appear as a circle. It also has a black background color.

In summary, the HTML sets up a webpage with two div elements, and the CSS styles one as a square and the other as a circle, both with a black background color.