Hello friends, This is the tutorial of how can you make the box with HTML and CSS in Notepad in easy way.
Step-1:- First make the boiler plate of Html.
Like this-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Step-2:- Then, Under the Body tag make four div with same class and different id.
Like this-
<body>
<Div class="box" id="box1"></Div>
<Div class="box" id="box2"></Div>
<Div class="box" id="box3"></Div>
<Div class="box" id="box4"></Div>
<Div class="box" id="box5"></Div>
</body>
Step-3:- Then, under the head tag make th internal css of style tag and customize your box as you want.
Like this-
style>
.box{
width: 10rem;
height:10rem;
flex-direction: row;
}
#box1{
background-color: blue;
}
#box2{
background-color: red;
}
#box3{
background-color: yellow;
}
#box4{
background-color: green;
}
</style>
</head>
and Your code is ready.You can run it in Chrome or any other browser.
I make it in Visual Studio. You can make it in any software. But, Visual Studio is very much better and it's size is very low of something 52 Mb. So you can download it and program like a proffesional coder.
Here is the full code of the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box</title>
<style>
.box{
width: 10rem;
height:10rem;
flex-direction: row;
}
#box1{
background-color: blue;
}
#box2{
background-color: red;
}
#box3{
background-color: yellow;
}
#box4{
background-color: green;
}
</style>
</head>
<body>
<Div class="box" id="box1"></Div>
<Div class="box" id="box2"></Div>
<Div class="box" id="box3"></Div>
<Div class="box" id="box4"></Div>
<Div class="box" id="box5"></Div>
</body>
</html>
Here is the download link of Visual Studio.
0 Comments