Web Tutorials

</>   CSS Tutorial

CSS

Cascading Style Sheet

Chess

Source Code HTML + CSS

HTML Code of the above Diagram

Click for download images Images Zip

  • <html>
  • <head>
  • <meta charset = "UTF-8">
  • <title>Chessboard using Pure CSS and HTML</title>
  • <style type = "text/css">
  • .chessboard
    • {
  • width : 640px;
  • height : 640px;
  • margin : 20px;
  • border : 25px solid #333;
    •
  • }
  • .black
    • {
  • float : left;
  • width : 80px;
  • height : 80px;
  • background-color : #999;
  • 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"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white1.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white2.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white3.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white4.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white5.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white6.png"> </div>
  • <div class= "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white7.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white8.png"> </div>
    •
  • <!-- 2nd -->
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white9.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white9.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white9.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white9.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white9.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white9.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white9.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/white9.png"> </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>
    •
  • <!-- 5st -->
  • <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"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black9.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black9.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black9.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black9.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black9.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black9.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black9.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black9.png"> </div>
    •
  • <!-- 8th -->
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black1.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black2.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black3.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black4.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black5.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black6.png"> </div>
  • <div class = "black"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black7.png"> </div>
  • <div class = "white"><img src="http://skillpundit.com/cascading-stylesheet/img/chess/black8.png"> </div>
    •
  • </div>
  • </body>
  • </html>