HTML & CSS
Lesson 1
In Chrome browser,
open the following link:
Enter Your username
and password
Click on the editor button
Type the title as HC1 and click save
This is the editor,
where you will type the code
Remember to save your project regularly
Let's learn some HTML tags
Type the code in the editor
<html>
This is open html
<html>
For every open html,
we will have a close html
<html>
</html>
In-between html tags,
type open head
<html>
<head>
</html>
What will we type
after open head?
* Type the answer in the empty tag *
<html>
<head>
</head>
</html>
Did you type
close head?
Yes / No
<html>
<head>
</head>
</html>
Let's type
open body
<html>
<head>
</head>
<body>
</html>
What will we type
after open body?
<html>
<head>
</head>
<body>
</body>
</html>
This is a basic html code
Click on the CSS
body{
}
Type the code in
the CSS-Editor
body{
background-color: ;
}
Let's type the background-color
property in body tag
What is your favorite color?
body{
}
Let's assign your favorite color
to background-color
body{
background-color:green;
}
Did the color change in output?
Click the HTML Editor
<html>
<head>
</head>
<body>
</body>
</html>
In-between the body tag,
let's type open div
<html>
<head>
</head>
<body>
<div>
</body>
</html>
What will we type
after open div?
Click the CSS Editor
body{
background-color:green;
}
{
}
Let's learn CSS properties
for div tag
div{
}
What will the width be?
div{
width:50px;
}
What will the height be?
div{
width:50px;
height:50px;
}
What background color shall
we assign for the div?
div{
width:50px;
height:50px;
background-color:yellow;
}
Is there one box in the output?
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
Let's type an additional
div set
<html>
<head>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
How many div sets
do we have?
Two / Three
How many boxes are there
in the output?
One / Two
div{
width:50px;
height:50px;
background-color:yellow;
}
Type margin: 10px;
in div
div{
width:50px;
height:50px;
background-color:yellow;
margin:10px;
}
Are there two boxes
in the output?
Yes / No
div{
width:50px;
height:50px;
background-color:yellow;
}
Now, change the
margin to 20px
What happens when you change
the margin to 20px?
Space Increased / Space Decreased
Margin property is used to
give space around elements
<html>
<head>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
How many div sets
do we need?
Three / Four
<html>
<head>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
Let's type the additional div
sets in the HTML editor
Are there four boxes
in the output?
Yes / No
<html>
<head>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Now type 1 in-between
the first div set
What you type in div tag
will appear inside the div box
<html>
<head>
</head>
<body>
<div>1</div>
<div></div>
<div></div>
</body>
</html>
What will you type
after 1?
<html>
<head>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>
What will you type
after 2?
Let's find out how to change the
background color for each box
<html>
<head>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
What id do we have for
1st box?
<body>
<div >1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
Let's assign the id for the
1st div tag
<body>
<div id="">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
For 1st box, type the unit
<body>
<div id="unit1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
What id do we type for the
2nd box?
unit1 / unit2
<body>
<div id="unit1">unit1</div>
<div id="unit2">unit2</div>
<div >unit3</div>
<div >unit4</div>
</body>
What id do we have
for the other boxes?
<body>
<div id="unit1">unit1</div>
<div id="unit2">unit2</div>
<div id="unit3">unit3</div>
<div id="unit4">unit4</div>
</body>
Did you type id
for the 3rd and 4th box?
Yes / No
div{
background-color: green;
width:50px;
height:50px;
margin:10px;
}
Now, Let's type #unit1
in CSS
#(hash) is used to define
the ' id ' in CSS
#unit1{
}
What background color do
we have for #unit1?
#unit1{
background-color:pink;
}
What background color do
we have for #unit2?
#unit3{
??
}
#unit4{
??
}
What background color do we have
for #unit3 and #unit4?
Now, let's change the width and
height for each unit
#unit1{
background-color:pink;
}
What is the width and height for unit1?
#unit2{
background-color:blue;
}
What is the width and height for unit2?
#unit2{
background-color:blue;
width:50px;
height:200px;
}
Did you type it
in CSS?
Yes / No
#unit3{
background-color:yellow;
}
#unit4{
background-color:green;
}
What is the width and height
for unit3 and unit4?
#unit1{
background-color:pink;
width:300px;
height:20px;
}
#unit2{
background-color: blue;
width:50px;
height:200px;
}
#unit3{
background-color: yellow;
width:10px;
height:10px;
}
#unit4{
background-color: green;
width:150px;
height:150px;
}
Does your output
look similar?
Good Job!
Click on the Save button to
save your project