Chessboard in CSS

Posted on March 12th, 2013 by Richard

I enjoy coding chessboards in all types of programming languages eg C / C++ /C# /VisC/C++ HTML/ HTML5 and CSS.

I have done some work on creating a browser based HTML5 dragndrop chessboard and one day will revisit the folder it is in and post it here online. Googling for browser based chessboards the most popular type I find are table based chessboards and I can code these. Less common are CSS based chessboards using divs and classes. Tonight I have just made a simple CSS chessboard using the following code:

CSS Chessboard

CSS for a chessboard I made using divs & classes eg.dksq & .ltsq & div id =”row” & float:left;

<style type=”text/css”>
.dksq{

height:20px;
width:20px;
background-color:blue;
}

.ltsq{
height:20px;
width:20px;
background-color:white;
}
#cboard{
height:160px;
width:160px;
border: solid 1px;
}
#col1{
height:160px;
width:20px;
float: left;

}
#col2{
height:160px;
width:20px;
float: left;

}
#col3{
height:160px;
width:20px;
float: left;

}
#col4{
height:160px;
width:20px;
float: left;

}
#col5{
height:160px;
width:20px;
float: left;

}
#col6{
height:160px;
width:20px;
float: left;

}
#col7{
height:160px;
width:20px;
float: left;

}
#col8{
height:160px;
width:20px;
float: left;

}
</style>

<div id=”cboard”>

<div id=”col1″>
<div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div>
</div>
<div id=”col2″>
<div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div>
</div>
<div id=”col3″>
<div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div>
</div>
<div id=”col4″>
<div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div>
</div>
<div id=”col5″>
<div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div>
</div>
<div id=”col6″>
<div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div>
</div>
<div id=”col7″>
<div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div>
</div>
<div id=”col8″>
<div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div><div class=”dksq”></div><div class=”ltsq”></div>
</div>
</div>

ENJOY!!!

Posted in Chess Programming • Comment on this post »