Now, for styling the game field,
if we have a look at our HTML file,
we have that id, active-game on the section,
and hence, we can use that
but, of course, I'll add a brand new CSS file
so that we really have a nice split between our files
and our CSS styles,
and it is easy to find the styles for different sections
of this page.
And I'll name this new style file game.css.
And, of course, then also link it in index.html
to that this file is loaded as well
when the page is loaded.
So here it's styles/game.css.
And now in game.css here,
I wanna target my active-game,
so the element with the ID active-game.
And first of all, set text-align to center,
set the margin to 2rem top, zero right,
5rem and zero left
because here in CSS,
that is top right bottom left.
That's how we can target different margins or paddings
with this longer shortcut.
And set display: none initially,
so that initially we don't see the game area if I reload
because I only wanna show it once we click Start New Game.
Now, we will implement this later with JavaScript.
At the moment, we don't have it,
and therefore, at the moment,
I'll comment this out with my shortcut
so that we do see the game area
because at the moment, of course,
I wanna make sure that we can work on it.
Now, in there, we then have the game over part
and the actual game board where we have the different boxes
that should be clickable.
Now, I'll start with that game over area,
and in the HTML file,
we can simply add an extra ID to this article here,
an id of game-over so that we can easily target this.
Alternatively, we could, of course,
select the first article in active-game
or anything like that.
But here I'll use a standalone ID.
And then target game-over
and there I wanna set a max-width of 40rem,
a margin of auto,
and in general, a width of 90%.
So similar to what I did
in the configuration.css file earlier here.
And I'll add a padding of 1rem top and bottom
and 2rem left and right.
And add a background, not color, not origin, but color.
Background-color of rgb 50, 5, 87,
which is a dark purple.
And a box-shadow, which I will copy
from the overlay.css file.
This box-shadow, which I had on the modal.
I'll use that here.
Give it a border-radius of four pixels
and set the text color to white.
And I'll move that next to background-color,
not because we have to
but so that we can easily see all the colors in one place.
And we'll also set display: none here,
though for the moment, I'll comment it out
so we can see if that looks the way it should.
It almost does but later, I will set display to none
so that we can again also show this with help of JavaScript.
For the moment, I wanna change the look
of this title here a little bit.
And therefore, I'll target game-over h2, is it, I guess?
No, our h3 element in here.
Actually, we could make this a h2 element.
So I'll change this to h2.
And target h2 here.
Game-over h2.
And then set the font-size here to 3rem,
make it really big, and a margin of 0.5rem and 0.
And now if I reload, it should be fairly easy
to see who won.
And maybe we actually use 2.5rem here instead of 3rem.
Yeah, I think that's better.
And that's now the game-over box,
which I will now hide by setting display to none.
So now it's gone.
Now for the other parts of this game part.
And here we have this paragraph
with the active-player-name.
And I wanna style this active-player-name
and for this, we can, of course,
conveniently use this ID again.
So add another ID selector
and select active-player-name.
And then here set maybe the font-weight to bold,
and add a color of rgb,
and then again 50, 5, 87
so that this player name is highlighted a little bit.
Now for the game board itself though.
And for that, we have that ordered list,
and we could target the ordered list in active-game
and that would work
or we give it a standalone id
to have an even easier time of selecting it
and that's what I'll do here.
And I'll give it an id of game-board,
which I'll use in my CSS code.
So for this in game.css,
we can now target game-board like this.
And then what I do I wanna do here?
Well, as I said, I want to have all these boxes,
the list items, organized as a grid.
And therefore, it makes a lot of sense
to set display to grid,
and use CSS grid for styling this.
Before we do that though,
I'll set list-style to none
to get rid of the one, two, three, four bullet points
so to say, and I'll overwrite the default margin
and set it to 1rem 0 here,
and overwrite the browser default padding
and set it to zero.
Then I'll set display: grid
and this should now be a grid with three columns
and three rows
because we have nine items overall.
And therefore, we can set the grid-template-columns
to 6rem 6rem 6rem
to add three columns, which are each 6rem wide.
Alternatively, we can also use a little shortcut here
and use the built-in repeat function
and write it like this.
This tells CSS to add three columns,
which are each 6rem wide.
So it's the same as manually writing 6rem 6rem 6rem,
what we had before.
This is just a shorter form.
And that's what I'll do here,
and I'll do exactly the same
for my grid-template-rows.
In this case, the rows should have the same height
as the columns have a width,
and therefore, I'll set my grid-template-rows like this
to add three rows with this height.
I'll also add justify-content: center
to ensure that everything is centered nicely
so that the grid items are centered.
And I'll add a gap between the boxes
of 0.5rem with the gap CSS property,
which will add a row and column gap
between the different items in the grid.
Alternatively, we could add a margin
around the list items.
Now, I will also target the list items themselves
with game-board li to target the list items
that we find in there.
And here I wanna give each list item a background-color
of rgb 215, 187, and 247.
And a border-radius of two pixels, like this.
And I'll also add a cursor of pointer
to indicate that the items are clickable.
They aren't by default
since they are list items,
not buttons or links
but we will make them clickable
with help of JavaScript.
I also wanna turn them into flex boxes
with display: flex
and then add justify-content: center
and align-items: center
to horizontally and vertically center any content in there.
And the content in the boxes,
which will soon show up
will be the symbols the players have.
And these symbols should be centered in the middle
of the boxes, both on the x and y-axis,
and that's what we can achieve by turning the boxes
into flex boxes
and adding justify-content: center
and align-items: center.
And then I'll also add a font-size of 2.5rem
for these symbols
and a font-weight of bold
so that we can see those symbols once they were added.
I also wanna have a slight hover effect
once we hover over a box
since well, we wanna be able to select them,
and for this, I'll add a game-board li:hover,
add a hover style to a list item,
and you can add the hover pseudo selector
to any HTML elements,
not just to links and buttons but to any element
because you can also make any element clickable
with JavaScript, as you will see in this section.
And then here, I'll add a background-color
of rgb 112, 13, 204
once we hover over such a box.
With that, this is the board I get here
and I can hover over these items as you can see.
And with that, we have this result,
which doesn't look too bad.
Now, one thing I wanna do
is I wanna simulate that we have some items selected,
so I'll add a couple of Xs and Os in some of these items,
in some of these list items,
and this also looks good
but I now also wanna make sure
that items that are selected get a special CSS class
that will ensure that when we hover over them,
we don't get the hover effect anymore
because in JavaScript,
I will also make sure later
that we can't select items
that already were selected before,
and I also wanna reflect this
with appropriate hover styles.
Therefore, I wanna add another class,
disabled, which we can add to all these elements
that have been selected later,
and of course, we will, therefore add this class dynamically
with help of JavaScript later on.
And every element that has this class
should have a different hover effect.
So for this here in my game.css file,
I will now target game-board list items
that do have the disabled effect,
and here in the end, I wanna set the background-color
to this background-color,
which I otherwise use for hovering.
And I'll set the cursor to default,
so not to pointer anymore
so that we don't give the illusion
of this being a clickable item.
And I will also add a text color of white
to make it easier to see that symbol.
With that, if I now reload,
these items are clearly marked
as disabled or has have been selected,
and when I hover over them,
I don't think that I can click them again.
And later in JavaScript,
we will make sure that we can't click them again
so that nothing happens when we click them.
Other items, on the other hand,
are clearly marked as clickable.
And that's now the finished styling.
It was definitely a lot of work
but with that, we now got the styling which we need
to now continue with the actual star
of this section, which will be JavaScript.