5.4 Style the Chess Board

In the previous lesson, we were finally able to display our chessboard to the user. However, it doesn't look quite what you would expect the chessboard to look like. So in this lesson, we're going to add a little bit of styling. So it doesn't really matter where we put the CSS file, so I'm just gonna make a new style.css file right in the root of the directory. Okay so this is going to be quick and easy. Let's add some styling to our table element. Let's give it a border. And one pixel solid CCC so just maybe a light shade of gray. And we want to make the piece of bit bigger so let's make the font size up to 25 pixels. And finally lets do margin auto just to kind of center it in the grid space that we've given it. Okay, already that is starting to look a little bit better. Let's work with the individual table data elements which are our individual cells. So let's give them a width of 40 pixels and let's give them a height of 40 pixels as well. And then why don't we set text-align to center. So that they'll be centered in the cell and finally let's set the cursor to pointer. Because these cells will be clickable, right?. Let's give them a cursor that lets them know that. Well that certainly looks much better. Although you may notice the one obvious thing we're missing. And that is the actual chessboard pattern or checkerboard pattern if you will. You can do this with some fancy CSS selectors. So for our table row let's use the nth child selector. And we will say 2n+1, which means every second row using the odd rows. So this is going to be the first row, the third row, etc. And inside of this we want to look for table data cells that are the nth-child(2n), so all the even cells in the odd rows. And those should all have a background of that grey color we're using CCC. Now this is only half of it right. Because if you look at this we have the odd numbered rows right so row one three. Five and seven, and we have even numbered cells. Cells two, four, six and eight, and those are colored gray. However, we also need to do the reverse of that, right? So we need to look at the even numbered rows, and all the odd numbered cells within those rows. So let's add a second selector here. And I'll just space this out a bit. And this is going to be the table row where the nth child is 2n. And then inside that the table data cell where nth child is 2n plus 1. All right, so let's see. There we go, that is exactly right, and as you can see we now have a properly set up a chessboard. We know that the board is oriented the right way because the bottom right should always be white and it is, and so we're good. So now we have a chessboard displaying to our users. The next step is to allow them to actually make some moves. So we'll look at that in the next lesson.