CSS Shapes Lab
Easy
3180
104
44.5% Acceptance
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
andheight
properties for this id to be equal. For instance, use100px
for a square of dimensions 100x100px
2. Creating a Circle:
- Create a new
div
element in yourindex.html
file with an id 'circle' - Set the
width
andheight
of the#circle
to100px
- 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.