Only Chessboard using HTML and CSS Code Example

Created: 26th Jan 26 2 Views
Review needed
Verified
Loading...
Loading...
Comments
Just the chess board using pure HTML css
Just the chess board using pure HTML css

If you want to create the template for the Chessboard consisting of 64 squares, 8 rows by 8 columns of alternate black and white squares, you can achieve it using simple HTML and CSS code as below,

Complete code: 
<html>

<head>
<meta charset="UTF-8"> 
<style type="text/css">

.chessboard {
    width: 640px;
    height: 640px;
    margin: 20px;
    border: 25px solid #111;
}

.black {
    float: left;
    width: 80px;
    height: 80px;
    background-color: #444;
      font-size:50px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
}

.white {
    float: left;
    width: 80px;
    height: 80px;
    background-color: #fff;
    font-size:50px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
}

</style>

</head>

<body>

<div class="chessboard">
<!-- 1st -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 2nd -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 3th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 4st -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 5th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 6th -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 7th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 8th -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
</div>
</body>
</html>

If you want to also have all the pieces on it, you can make use of Unicodes - just follow this link: https://code2care.org/pages/chessboard-with-pieces-using-pure-html-and-css

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!