Change the play.css file

From Progzoo
Jump to: navigation, search

Change the appearance of the grid:

BeforeAfter
The original grid
Should look like

You need to change the file play.css. It has a section that looks like this:

td{
  border:solid;
  height:3em;
  width:3em;
  font-size:xx-large;
  text-align:center;
}
td#i02{
  border-right-color:white;
}

The file play.html that uses this is originally:

<table id='board'>
  <tr><td id='i00'/><td id='i01'/><td id='i02'/></tr>
  <tr><td id='i10'/><td id='i11'/><td id='i12'/></tr>
  <tr><td id='i20'/><td id='i21'/><td id='i22'/></tr>
</table>

Notice that the right border of the top right square cannot be seen - it has color:white. You can remove the top border of this square by changing the css rule to:

td#i02{
  border-right-color:white;
  border-top-color:white;
}
  • Notice that top right cell has id i02 and the css rule that effects it starts #i02
  • You can introduce new rules for the other squares until your grid looks as it should.

Do it better

You will need 8 rules if you use the method above.

You can get away with just four rules with :first-child and :last-child selectors

  • The following rule selects all td elements in the first tr
tr:first-child td{
  border-top-color:blue;
}