HTML & CSS
Lesson 5
In the Chrome browser, let's open the CodeZing Editor
Click on the Editor and save the
project as HC5.1
How do we start
the html code?
How many units
do we have?
How many div sets
do we need?
What unit do we have
for the 1st shape?
<body>
<div id=" "></div>
<div id=" "></div>
<div id=" "></div>
</body>
Let's assign the
id for the div
<body>
<div id=" "></div>
<div id=" "></div>
<div id=" "></div>
</body>
What about the
other units?
Click on the CSS
#unit1{
}
Type #unit1 in CSS
Choose a background color for
unit1 that is similar to yellow
#unit1{
}
Type the background color in unit1
#unit1{
background-color:yellow;
}
What is the width &
height for unit1?
What border-radius do
we have for unit1?
#unit1{
background-color:yellow;
width:100px;
height:100px;
}
Type the border-radius property
and give value as 100px
#unit2{
}
Type #unit2 in CSS
#unit2{
}
Chose a background
color for unit2
#unit2{
background-color:black;
}
What is the width and
height for unit2?
What border-radius do
we have for unit2?
#unit2{
background-color:yellow;
width:100px;
height:100px;
}
Type the border-radius property
and give value as 100px
#unit3{
}
Type #unit3 in CSS
#unit3{
}
Let's choose white as
background color for unit3
#unit3{
background-color:white;
}
What is the width and
height for unit3?
#unit3{
background-color:white;
width:30px;
height:30px;
border:1px solid black;
}
What property will we use
to make unit3 into a circle?
Type the CSS code for unit3
Does your output look similar?
Yes / No
Good job!
#unit1{
background-color:yellow;
width:100px;
height:100px;
border-top-right-radius:100px;
}
What position will
we type for unit1?
#unit1{
background-color:yellow;
width:100px;
height:100px;
border-top-right-radius:100px;
position:absolute;
}
What is the top and left
value for unit1?
What about
unit2?
#unit2{
background-color:black;
width:100px;
height:200px;
border-top-left-radius:100px;
border-bottom-right-radius:100px;
}
What is the top and left
value for unit2?
Can you guess the top &
left value for unit3?
#unit1{
background-color:yellow;
width:100px;
height:100px;
border-top-right-radius:100px;
position:absolute;
top:20px;
left:120px;
}
#unit2{
background-color:black;
width:100px;
height:200px;
border-top-left-radius:100px;
border-bottom-right-radius:100px;
position:absolute;
top:20px;
left:20px;
}
#unit3{
background-color:white;
width:30px;
height:30px;
border-radius:30px;
position:absolute;
top:40px;
left:80px;
}
Does your output look similar?
Yes / No
Good job! Save your project
Open a new Editor and save
the project as HC5.2
How do we start
a html code?
How many units do
we have?
Let's type the div sets with their ids
Click the CSS
#unit1{
}
Type #unit1 in CSS
Choose a background color for
unit1 that is similar to Lightgreen
#unit1{
}
Type the background
color in unit1
#unit1{
background-color:lime;
}
What is the width & height for unit1?
#unit1{
background-color:lime;
width:100px;
height:100px;
}
What border-radius do
we have for unit1?
#unit1{
background-color:lime;
width:100px;
height:100px;
border-top-left-radius:100px;
}
#unit2{
}
Let's choose a background-color similar to Darkgreen for unit2
Choose colors
similar to darkgreen
#unit2{
background-color:darkgreen;
}
What is the width and height?
#unit2{
background-color:darkgreen;
width:200px;
height:100px;
}
What border-radius do we
have for #unit2?
.unit2{
background-color:darkgreen;
width:200px;
height:100px;
}
What type of border do
we have for unit2?
unit3 & unit4 is similar as unit_?
#unit3{
background-color:lime;
width:100px;
height:100px;
}
#unit4{
background-color:lime;
width:100px;
height:100px;
}
Copy unit1 and paste it
as unit3 & unit4
#unit3{
background-color:lime;
width:100px;
height:100px;
}
#unit4{
background-color:lime;
width:100px;
height:100px;
}
What border-radius do we have
for unit3 & unit4?
#unit5{
}
Let's choose white
as background color for unit5
#unit5{
background-color:white;
}
What is the width
and height for unit5?
#unit5{
background-color:white;
width:25px;
height:25px;
border: 1px solid black;
}
What property will we use
to make unit5 into a circle?
Does your output look similar?
Yes / No
Good job!
#unit1{
background-color:lime;
width:100px;
height:100px;
border-top-left-radius:100px;
}
What position will
we type for unit1?
#unit1{
background-color:lime;
width:100px;
height:100px;
border-top-left-radius:100px;
position:absolute;
}
What is the top and
left value for unit1?
#unit1{
background-color:lime;
width:100px;
height:100px;
border-top-left-radius:100px;
position:absolute;
top:20px;
left:220px;
}
#unit2{
background-color:darkgreen;
width:200px;
height:100px;
border-top-left-radius:200px;
border-top-right-radius:200px;
position:absolute;
top:20px;
left:20px;
}
...
#unit5{
??
}
Let's type the position
for unit2 to unit5
..
#unit3{
background-color:lime;
width:100px;
height:100px;
border-bottom-right-radius:100px;
position:absolute;
top:120px;
left:20px;
}
#unit4{
background-color:lime;
width:100px;
height:100px;
border-bottom-left-radius:100px;
position:absolute;
top:120px;
left:120px;
}
#unit5{
background-color:white;
width:30px;
height:30px;
border-radius:30px;
position:absolute;
top:50px;
left:270px;
}
Does your output look similar?
Yes / No
Good job! Save your project