The Chess Journal

Chess Tutorials For Beginners

  • Home
  • Start Here
    • How To Set Up a Chess Board
    • How To Solve Chess Puzzles
    • How To Read Chess Notation
    • Complete List of Official Rules of Chess
    • Chess Terminology
  • Strategy
    • Openings
    • Checkmates Patterns
    • Tactics
  • Players
  • Resources
    • Best Chess Books By Rating Bracket
    • Books Mentioned In The Queen’s Gambit on Netflix (Real and Fake Books)
    • 7 Best Chess Books For Beginners To Cut The Learning Curve
  • About Us
  • Editor
  • Sign Up
No Result
View All Result
The Chess Journal
  • Home
  • Start Here
    • How To Set Up a Chess Board
    • How To Solve Chess Puzzles
    • How To Read Chess Notation
    • Complete List of Official Rules of Chess
    • Chess Terminology
  • Strategy
    • Openings
    • Checkmates Patterns
    • Tactics
  • Players
  • Resources
    • Best Chess Books By Rating Bracket
    • Books Mentioned In The Queen’s Gambit on Netflix (Real and Fake Books)
    • 7 Best Chess Books For Beginners To Cut The Learning Curve
  • About Us
  • Editor
  • Sign Up
No Result
View All Result
The Chess Journal
No Result
View All Result

Home » Chess Programming » How To Create A Chess Board Using HTML and CSS (In Only 2 Steps)

How To Create A Chess Board Using HTML and CSS (In Only 2 Steps)

William Steele by William Steele
in Chess Programming

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.

Page Navigation

  • Preparing To Write The Code
  • Step-By-Step Instructions
    • Step 1. Write Unique Classes For Divs
    • Step 1.  Write Outer Div For The Board
  • Step 2. Write Squares of Board

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.

Previous Post

10 Best Moroccan Chess Players From Morocco (FIDE Ranked)

Next Post

10 Best Montenegrin Chess Players From Montenegro (FIDE Ranked)

William Steele

William Steele

William is relatively new to Chess, but in just 3 short months achieved a rating of over 1000. Not saying it's very good, but it does prove a slight obsession with the game after playing his first game.

Related Posts

10 Best Chess Games of Stockfish (Chess Engine)

by Editorial Staff
January 20, 2023
Chess Engines

...

Read more

How To Make a Chess Board In JavaScript (Step-By-Step)

by William Steele
October 12, 2022
Chess Programming

...

Read more
Must Read Chess Guides
Checkmate PatternsChess PiecesChess EnginesChess GambitsChess LibraryChess Openings

Chess Guides

  • 7 Tips on How To Get Better at Chess
  • 7 Tips on How To Stop Blundering in Chess
  • Does Chess Make You Smarter?
  • How Does Age Affect Chess Abilities

About The Chess Journal

The Chess Journal is a free resource for chess players to learn and master the ultimate game.

Support

  • About The Chess Journal
  • Terms of Use and Policies
  • Cookies
  • Privacy Policy
  • Terms

Categories

  • Chess Strategy
  • Chess Players
  • Chess Programming
  • Chess Resources and Tools

© 2022 - The Chess Journal - All Rights Reserved

No Result
View All Result
  • Home
  • Start Here
    • How To Set Up a Chess Board
    • How To Solve Chess Puzzles
    • How To Read Chess Notation
    • Complete List of Official Rules of Chess
    • Chess Terminology
  • Strategy
    • Openings
    • Checkmates Patterns
    • Tactics
  • Players
  • Resources
    • Best Chess Books By Rating Bracket
    • Books Mentioned In The Queen’s Gambit on Netflix (Real and Fake Books)
    • 7 Best Chess Books For Beginners To Cut The Learning Curve
  • About Us
  • Editor
  • Sign Up

© 2022 - The Chess Journal - All Rights Reserved