HTML & CSS

Lesson 3

In the Chrome browser, let's open the CodeZing Editor

codezing.in

Type the title as HC3.1 and click save

How do we start the html
code?

How many boxes
do we have?

One / Two

How many div sets
do we need?

Click the CSS editor

                        #unit1{

                        }

Type #unit1 in CSS

                        #unit1{
                            background-color:??;
                        }

What background color
do you want for unit1?

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

What is the width
and height?

Is this side top or bottom?
left or right?

Top-Left / Top-Right

                        #unit1{
                            background-color:blue;
                            width:400px;
                            height:400px;
                            margin:10px;
                            border-top-right-radius:100px;
                        }

Let's type the border-radius
property in CSS

border-top-right-radius
makes the side?

Curved / No Change

With border-radius property,
you can specify which corner to curve

Is this side top or bottom?
left or right?

Top-Right / Bottom-Right

                        #unit1{
                            background-color:blue;
                            width:400px;
                            height:400px;
                            margin:10px;
                            border-top-right-radius:100px;
                            border-??-??-radius:100px;
                        }

What border-radius property
do we type?

                        #unit1{
                            background-color:blue;
                            width:400px;
                            height:400px;
                            margin:10px;
                            border-top-right-radius:100px;
                            border-bottom-right-radius:100px;
                        }

Does your unit1
look similar?

Yes / No

Is this side top or bottom?
left or right?

Bottom-Left / Bottom-Right

                        #unit1{
                            background-color:blue;
                            width:400px;
                            height:400px;
                            margin:10px;
                            border-top-right-radius:100px;
                            border-bottom-right-radius:100px;
                            border-??-??-radius:100px;
                        }

What border-radius property
do we type?

Is this side top or bottom?
left or right?

Top-Left / Top-Right

                        #unit1{
                            background-color:blue;
                            width:400px;
                            height:400px;
                            margin:10px;
                            border-top-right-radius:100px;
                            border-bottom-right-radius:100px;
                            border-bottom-left-radius:100px;
                            border-??-??-radius:100px;
                        }

Let's type the border-radius
property in CSS

Does your unit1
look similar?

Yes / No

Let's save the project

Great!
Let's create a new project
with border-radius property

Open a new Editor and
save the project as HC3.2

How do we start
a html code?

How many units
do we have?

Ten / Eight

How many div sets
do we need?

                        <html>
                            <head>
                            </head>
                            <body>
                                <div id="unit?"></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </body>
                        </html>

What unit do we have
for the 1st shape?

                        <html>
                            <head>
                            </head>
                            <body>
                                <div id="unit1"></div>
                                <div id="unit??"></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </body>
                        </html>

What unit do we have
for the 2nd shape?

                        <html>
                            <head>
                            </head>
                            <body>
                                <div id="unit1"></div>
                                <div id="unit2"></div>
                                <div id="unit??"></div>
                                <div id="unit??"></div>
                                <div id="unit??"></div>
                                <div id="unit??"></div>
                                <div id="unit??"></div>
                                <div id="unit??"></div>
                            </body>
                        </html>

What about the other units?

Click the CSS editor

                        #unit1{

                        }

Type #unit1 in CSS

                        #unit1{
                            background-color:??;
                        }

What background color
do we have for unit1?

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

What is the width & height
for unit1?

Which side is
curved in unit1?

                        #unit1{
                            background-color:pink;
                            width:50px;
                            height:50px;
                            border-top-right-radius:50px;
                        }

Let's type border-radius
property for unit1

                        #unit1{
                            background-color:pink;
                            width:50px;
                            height:50px;
                            border-top-right-radius:50px;
                        }
                        #unit2{
                            background-color:??;
                         }

What background color
do we have for unit2?

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

What is the width & height
for unit2?

Which side is curved in unit2?

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

Type border-radius property
for unit2

For unit3 we will have the same
background color and size as unit2

Copy unit2 and paste
it as unit3

What border-radius property
do we have for unit3?

                        #unit3{
                            background-color:orange;
                            width:50px;
                            height:50px;
                            border-??-??-radius:50px;
                         }

Type border-radius
property for unit3

Unit4 will have the same
background color and size as unit_?

Unit1 / Unit2

                        #unit4{
                            background-color:pink;
                            width:50px;
                            height:50px;
                            border-??-??-radius:50px;
                        }

What border-radius
property do we have for unit4?

What about the
other units?

Does your output
look similar?

Yes / No

Good job! Save your project