/

HTML & CSS

Lesson 4

In Chrome browser, let's open CodeZing Editor

codezing.in

Click on the Editor and
save the project as HC4

                      < ?? > 
                      

                      < /?? >

How do we start
a html code?

How many circle
do we have?

Five or Six

                  <html>
                      <head>
                      </head>
                      <body>
                          ??
                          ??
                          ??
                          ??
                      </body>
                  </html>

Let's type the div
sets and its units

Click the CSS editor

                      #unit1{
                          background-color:??;
                      }

What background color
do we have for unit1?

                      #unit1{
                          background-color:red;
                          width:??;
                          height:??;
                      }

What is the width and
height for unit1?

                      #unit1{
                          background-color:red;
                          width:25px;
                          height:25px;
                          ??
                      }

What property will we use
to make unit1 into a circle?

                      #unit1{
                          background-color:red;
                          width:25px;
                          height:25px;
                          border-radius:??;
                      }

Border-radius property will have
the same width and height
to make a circle

                      #unit2{
                           background-color:??;
                      }

What background color
do we have for unit2?

What is 25px +25px?

This is the width and height for unit2

                      #unit2{
                          background-color:blue;
                          width:??;
                          height:??;
                      }

What is the width and
height for unit2?

                      #unit2{
                          background-color:blue;
                          width:50px;
                          height:50px;
                          ??
                      }

What property will we use
to make unit2 into a circle?

                      #unit1{
                          background-color:red;
                          width:25px;
                          height:25px;
                          border-radius:25px;
                      }
                      #unit2 {
                          background-color: blue;
                          width:50px;
                          height:50px;
                          border-radius:50px;
                      }

For a perfect circle,
border-radius property will have
the same width and height 

                      #unit1{
                          background-color:red;
                          width:25px;
                          height:25px;
                          border-radius:25px;
                          ??
                      }
                      #unit2 {
                          background-color: blue;
                          width:50px;
                          height:50px;
                          border-radius:50px;
                          ??
                      }

What property will give
space between the circles?

The width and height for unit3 is 50+25

                      #unit_{
                          background-color:??;
                          width:??;
                          height:??;
                          margin:??;
                          border-radius:??;
                      }

Let's type the CSS code
for #unit3

How about unit4 & unit5?

                      #unit_{
                          background-color:??;
                          width:??;
                          height:??;
                          margin:??;
                          border-radius:??;
                      }

Type the CSS code
for unit4 & unit5

Does your output
look similar?

Yes / No

Good!
Now let's learn some new CSS properties

                      #unit1{
                          background-color:red;
                          width:25px;
                          height:25px;
                          border-radius:25px;
                          position:absolute;
                      }

In unit1 CSS,
type the position property

What is the top value
for unit1?

                      #unit1{
                          background-color:red;
                          width:25px;
                          height:25px;
                          border-radius:25px;
                          position:absolute;
                          top:20px;
                      }

Type the top property
for unit1

"Top" positions the child element relative
to the top edge of its parent element

What is the left value
for unit1?

                      #unit1{
                          background-color:red;
                          width:25px;
                          height:25px;
                          border-radius:25px;
                          position:absolute;
                          top:20px;
                          left:20px;
                      }

Type the left value for unit1

"Left" positions the child element relative
to the left edge of its parent element

                      #unit2{
                          background-color:blue;
                          width:50px;
                          height:50px;
                          border-radius:50px;
                          position:??;
                      }

What position do we
type for unit2?

"position: absolute" will place
the element in a given top and left value

What is the top and
left value for unit2

                      #unit2{
                          background-color:blue;
                          width:50px;
                          height:50px;
                          border-radius:50px;
                          position:absolute;
                          top:??px;
                          left:??px;
                      }

Type top and left property in unit2

What about unit3 to unit5?

                      #unit_{
                          background-color:green;
                          width:75px;
                          height:75px;
                          border-radius:75px;
                          position:??;
                      }

What position do we have
for unit3 to unit5?

                      #unit_{
                          background-color:green;
                          width:75px;
                          height:75px;
                          border-radius:75px;
                          position:absolute;
                          top:??px;
                          left:??px;
                      }

What is the top and left
value for unit3 to unit5?

Does your output look similar?

Yes / No

Good Job! Save your project