previous

page 12

next
Colouring In

My plan is to assign the different colours to different classes as shown.

Note the leading c. To affect a web page using CSS, class names AND id names must NOT start with a digit.
So how come I've ignored this with the cell ids?
This is because (as you will see) we only use the ids in our JavaScript code and JavaScript doesn't have this restriction.

Next question is how do we assign an element to a second class?
Let me show you:

<div class='cell c1' id='0'></div>

Go ahead and carefully add the correct class to each cell.

Next create your styles.css file and I'll show you how we achieve the result we want.

.cell {
width:10vmin;
height:10vmin;
margin:1vmin;
border:thick solid lightgrey;
}
.c0 {
visibility:hidden;
}
.c1 {
background-color:pink;
}
.c2 {
background-color:lightgreen;
}
.c3 {
background-color:lightblue;
}
previous
next