Hi Views today we know how to create a chessboard using html and css
Use html and css we can create a chessboard if we are use class then easily make it.
Code
<html>
<head>
<style>
#outer
{
height:800px;
width:800px;
border:5px solid black;
}
.row
{
height:100px;
width:800px;
}
.w
{
height:100px;
width:100px;
float:left;
background:white;
}
.b
{
height:100px;
width:100px;
float:left;
background:black;
}
</style>
</head>
<body>
<div id="outer">
<div class="row">
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
</div>
<div class="row">
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
</div>
<div class="row">
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
</div>
<div class="row">
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
</div>
<div class="row">
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
</div>
<div class="row">
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
</div>
<div class="row">
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
</div>
<div class="row">
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
<div class="b"></div>
<div class="w"></div>
</div>
</div>
</body>
</html>
Output Image
