I recently made a chess board for the chess board editor tool and wanted to share exactly how to do it, the right way. In this tutorial, you’ll learn how to create chess board using html and css.
Preparing To Write The Code
Before getting into the instructions, let’s prepare by making the correct structure for the code. There’s only two files you need.
- index.html
- styles.css
Most code editors have an index.html by default. So you’ll just have to make a css file and call it “styles.css”. After these two files are made, we’re ready to start writing the code.
Step-By-Step Instructions
Step 1. Write Unique Classes For Divs
First, determine the names of the classes you will use for each div. Each part of the board will be its own unique category of class. This is so we can add CSS styles for each part of the board. For the outer div of the board, I’ll use “board”. For each square of the board, I’ll use “piece-square”, and so on.
Board = “board”
Squares = “piece-square”
Step 1. Write Outer Div For The Board
Now that we have the classes we’ll use for each div, we can start writing the HTML of the board. To get a visual of what we’re making, let’s make the <div> that’s going to be the outer, or parent, div of the chess board.
This will be the parent div for the entire board. This is written in the index.html file in the <body>.
<div class="board"></div>Now the HTML exists on the page, nothing is displayed until we add styling to the div with css.
Now go the styles.css file and to add styling to the board.
.board {
border: 2px solid black;
}Now the border of the board will be displayed on the page.
See Step 1 in this codesandbox.
Step 2. Write Squares of Board
Now we just have to make the squares for the board. The squares are going to have two classes. This is so we can easily separate styles of the squares, since each square will have the same css, with the exception of light squares and dark squares.
Since there are 64 squares on a chess board, we need 64 individual divs. 32 of them being light squares and 32 being dark squares. These divs will be written in between the outer board div. We’ll write them like this.
<div class="piece-square light-square"></div>
<div class="piece-square dark-square"></div>
You can copy and past that code in between the outer board div until you have 64 divs.
After the html is written, you just have to add styling to the squares so they are properly aligned inside the board and also colored.
In the styles.css file, write the following.
.piece-square {
width: 50px;
height: 50px;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
.light-square {
background: blue;
}
.dark-square {
background: red;
}Now you see why we made two classes for each square. You can make the squares any color you wish of course by changing the red and blue to purple and black for example. You can also write a color code to display by writing # following by the code for the color, #000 for example.
See Step 2 in this codesandbox
That’s all you have to write to display a chess board on a web page with html and css. You can make this is simple or as complex as you want. I prefer to write as much as it takes for every part of the board has it’s own unique HTML and/or CSS class.
I hope this tutorial on how to make a chess board using html and css helped you.