Only Chessboard using HTML and CSS Code Example


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

Advertisements
Try Out Code2care Dev Tools:

Advertisements

Advertisements
Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and software developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include learnings, tutorials, trouble-shooting steps, video tutorials, code snippets, how-to, blogs, articles, etc.

🎉 We are celebrating the 10th years of Code2care! Thank you for all your support!

We strongly support Gender Equality & Diversity.