So let's now continue by styling
this configuration area and the overlay here.
And for that, I'll actually start with that overlay.
So with that aside element here, and for that,
I want to make sure that we can select
and style it with CSS,
and we could go for an ID here.
And that, that would be perfectly fine.
We could also select it by the element type by aside,
but we could have multiple aside elements on our page
and maybe not all of them should be overlays.
So I don't want to use the aside element itself
to select it in CSS and using an ID would be fine.
But on the other hand,
whilst we might have multiple asides,
which should not all be overlays,
we might have multiple overlays in general on our page.
Simply different HTML elements,
which are styled as overlays,
and, therefore, to define a generic reusable CSS style,
which we can attach to different HTML elements
with different element types and different ID's,
I'll go for a class here so that even though here,
we only have one overlay,
we could easily reuse that style
for different overlays as well.
And I'll name this class modal
because such an overlay is typically called a modal.
And I didn't want to target this modal in my CSS file to
apply the appropriate styling.
Now for that, I'll, first of all, add another CSS file.
And I'll name this overlays dot CSS,
where I want to define my general overlay styles.
Now that CSS file needs to be imported
if we need to link to it.
So an index HTML, after linking to styles CSS,
I will add another link where I link to overlays CSS
so that these styles are loaded.
And with that, we can style this class here
by going to overlay CSS
and selecting this modal class with the class selector.
And here I'll start by setting the position to fixed.
And I'm doing this so that the overlay
is always on top of the content and above everything else.
And if we would scroll,
it stays in the middle of the screen
or wherever we position it.
And we can't scroll away from that overlay.
It should be placed in the middle of the screen,
and it should be visible until we close it.
That's why it's fixed. So to be can't scroll away.
Now, when we use position fixed or absolute,
we typically should use top and left and so on
to tell CSS where the items should not be positioned.
And here I'll set this to 20% so that we moved
that modal 20% down from the top of the screen.
And then I also said left and here,
I want to move it 5% into the screen.
Though, I will say that these are my mobile styles.
I want to have different styles on bigger screens.
And for this I'll add a media query.
We can simply do this by adding at media here.
And then I want to check if we have a min width
on our screen of at least 48 rem.
You can of course play around with that value.
That is a value that used to work fine
for me here for this page.
And then I want to select modals
and apply different styles if we are on a screen
that has at least that with.
And here, I want to set left to a different value.
And to be very precise here on such screens,
I want to set left to a calculated value.
For this, I'll use this calc function,
which is built into CSS,
which allows me to calculate a dimension.
And we can calculate by, for example,
using the middle of the screen.
So 50% from the left, and then we can deduct 20 rem,
to have a left border of our modal,
which is in the middle of the screen minus 20 rem.
And I'm using 20 rem here as a value which I deduct
from 50% because I want to
give my model a fixed width of 40 rem here,
which ensures that this is the width of my modal
and half that width is what I want to deduct
from the middle so that the modal overall is centered,
because we start 20 rem from the middle on the left,
and then plus 40 rem ends at 50% plus 20 rem.
So the center of the modal will be exactly in the middle
of the screen if we use these values.
Now on a mobile screen on the other hand,
I'll set the width to 90%,
which will also center it since we have left 5%.
So we have 90% width of the modal,
5% on the left, and then automatically 5% on the right.
And these values should lead to
a nicely centered and positioned modal.
Now, I also will set a background color here of white
for my modal container, and I'll add a padding
of 1 rem so that the content inside
of that overlaid doesn't sit directly on the edges.
I also want to have rounded corners.
So I'll add a border radius of, let's say, 6 pixels.
And I want to have a slight drop shadow
by adding a box shadow here
and setting this to 0, 2 pixels
so these are the X and Y values
for the shadow and then a blur radius
for the shadow of 8 pixels.
And then I'll use RGBA as a color value.
RGBA so that we can add some transparency of 0, 0, 0, 0.2.
Last but not least, and very important,
I'll set display to none, though,
so that it's not visible out of the box.
Why am I doing that?
Because it should be made visible via JavaScript later.
So initially it should not be visible.
Though, for the moment, I'll remove that
so that we can see it and so that we can check
whether it looks all right.
And that does look good.
Here's the modal.
And as you see, because I have position fixed,
it scrolls with my page and is always visible.
Now, the content in the modal
is not looking the way it should,
but we'll work on that soon,
but the modal itself looks fine.
However, I want to have a little bit
of a background behind that modal.
The content of the page,
which is not in the Modal,
should be overlaid by some black, transparent background,
also so that we can't interact with the other content.
And for this we'll add a so-called backdrop.
That's another HTML element which we'll add,
which only serves the purpose of hiding
the rest of the page whilst the modal is open.
And I'll add that backdrop right here
in the body at the beginning of the body.
And it's just a div without any content,
but with an ID of backdrop
by which I will select it in my CSS code.
And that div is only there for styling purposes.
That's also why I'm using a div.
It is not holding any content
that needs to be described or shown.
Instead, it's only there for styling purposes
in conjunction with that modal.
And I want to target backdrop in overlays CSS,
since it belongs to my modal in the end.
In here, also like backdrop by the ID
with help of the ID selector.
And then here on the backdrop,
I also want to have a position of fixed
so that this also scrolls along with the page.
And I'll set top to 0 and left to 0,
because that should start in the top left corner.
And then I'll set width to 100% and height to 100%
so that this takes the full width and height of the screen.
And now I'll add a background color here of RGBA.
And then I'll add a black color with 0, 0, 0, .7,
so that it's a transparent black,
but less transparent than the shadow
I had on the modal, for example.
And with that, if I save this,
I got this nice backdrop, this grayish background.
And now I, for example,
can't click Start New Game anymore
because that background is in between.
And now that is looking the way it should.
Soon, I will hide both the backdrop and the modal
with display none as I showed to you.
But before we do that,
I actually want to continue
with styling the configuration items,
the content of the modal and all of this list
that summarizes to configuration and only thereafter,
once all of that is finished,
I'll hide the modal and the backdrop.
So let's continue with that overall configuration, then.
For that, I'll start with the content here in the modal.
And there I'll start with that title.
So with that h2 element that I have in here.
And I want to get rid of some margin here,
so that we have less space above the title.
And a for this I'll add an ID here to this aside
to my modal here and name this config overlay.
Name is up to you though.
And I'll add a new CSS file,
which I'll name configuration dot CSS,
which holds the CSS code that is related
to the configuration, but not to just the overlay.
Overlays CSS really holds the code
that only deals with styling the overlay
so that we could reuse the modal class on other overlays.
Configuration CSS is now specifically
for the configuration part of this page.
And therefore here in configuration CSS,
I'll target config overlay, this ID, which I added.
And then the h2 element, which is in there
with this CSS selector.
And then there, I want to use a margin,
where I want to set margin and set this to .5 rem,
so that we have less spacing here.
And to see this effect, of course,
we have to go to index HTML and not just import
and link to overlaying CSS, but also to configuration CSS.
With that, if you reload, that should look a bit better.
Now, of course,
I did not want to add a margin to the left though.
So I'll set left and right values to 0 here
by adding a 0 to the margin.
And now it looks better.
Now I want to have some spacing around this input.
And for that, I added this div around my labeling input,
and I'll give this a class of form-control,
which we also could reuse
if we had other a form controls,
other label input combinations.
And we can now target this form control class
here in our CSS code.
And then here's simply add a little bit of margin
of the .5 rem top and bottom
and 0 left and right, so that, that looks like this.
Now, I also want to change the look of the label
and the input element, and for that,
I'll target form control.
And then, let's say the label in there.
And I'll set this display to block,
which will force a line break.
And I want to add a margin to the bottom.
Margin bottom here on the label of .5 rem.
So that there's a little bit of spacing
between the label and the input field.
And I'll set the font weight to bold for the label.
So did we have this look.
Now for the input field,
I also want to change the styling.
So here we can target form control input,
the input element in there.
And first of all, inherit the font,
because, just like the bottom, by default,
we don't inherit our font by default.
It has some custom font family applied by the browser.
Now I tell it to use the font family
and the font styles to find on
the parent elements on the containers.
And I'll also change the border to 1 pixel solid.
And then I prepared a grayish color,
which is 2-0-4, 2-0-4, 2-0-4 RGB.
And I'll give this a width of, let's say,
15 rem, which should look decent,
and some padding of .35 rem
for some spacing inside of the input.
So did it look like this.
Of course you could also reduce the width of the modal
since this is not really a bit too big
for this kind of input
but I will rather solve this in a different way.
And instead go to my config overlay overall,
which is my modal in this case here,
and set text-align to center here.
And by setting this,
this is not all nicely centered
and that's now looking quite decent here.
And that's now my finished input box here.
And therefore, to now focus on the upper parts
that make up the configuration,
the summary of our configuration options to be precise,
I want to get rid of the modal and the overlay,
and therefore in overlays CSS on the modal,
we'll add display none and do the same on the backdrop.
And then again, we'll change this
with help of JavaScript later,
but for the moment we'll set display to none on both.
And with that, that is gone.
Now let's focus on this part now.
Now, for this part, of course, an index HTML,
we have this section with the game configuration ID,
and hence, it's this ID,
which I want to target to style these elements.
And I'll just add these styles below
the other styles and configuration CSS.
You could group and sort your styles differently,
but I'm basically going through these styles
as they are applied on the page.
Alternatively, we could sort by ID selectors
and class selectors, but I think this approach
also makes it quite easy to follow along.
So here, I'll target this game configuration ID,
which we have here on this section
with the ID selector, of course.
And then, there, I, first of all,
will apply a width of 90%, but a max width 40 rem
to get some responsive behavior without any media query,
simply by restricting the max width.
And then I'll add a margin of 3 rem top and bottom
and auto left and right to center this container.
And then we can add text-align center here
to also align content, the text content,
or any inline element content in there.
With that, we've got this look.
It's not the final look, but a first step.
As a next step, I want to style the items
in the ordered list and the ordered list overall.
So for this I'll target game-configuration,
and then the ordered list,
which we find in there with this CSS selector.
And first of all, get rid of the list-style
with list-style none
so that these numbers here, 1 and 2 are removed.
And also get rid of any default margin
and padding that we'll have on there
and set display to flex.
And with that, automatically ,
the two items are next to each other,
because the default configuration for flex box is
that the items sit in the same line.
And now we can style the items
by targeting game-configuration.
And then the list items we find in there,
which are the list items in our ordered list here.
We could also specifically target list items
in the ordered list, but since we only have one list
in the game configuration targeting list items,
anywhere inside of game configuration,
like this, also works.
And then here, I'll add a margin
of 1 rem in all directions, and a padding
of 1 rem in all directions on all these lists items.
And give both list items, a width of 50%,
so that we split the space evenly.
And then I'll apply a background color here,
which I also selected in advance,
which is RGB color of 2-4-3, 2-2-7, 2-5-5, like that.
And add a border radius of 4 pixels.
Last but not least, I'll also add a box shadow,
And here I'll just copy the box shadow from my overlay,
which I have here and apply this down there.
I'll just reduce the radius to 4 pixels
and change the Y value to 1 pixel.
And with that, we've got these boxes
with the configuration summary.
Now I also want to slightly change my titles in there,
specifically the player name, which will later be shown.
And for this, of course,
in my game configuration, whoops game configuration,
I will target the h3 elements because the only
h3 elements which I have in a section
with this ID are in my list items.
And therefore, here I'll target h3 elements in there,
and then change the font size a little bit, to 1.5 rem,
and the margin to .5 rem and 0 left and right,
and the color to RGB color, which I prepared in advance,
which is 9-4, 4, 1-6-8.
And for that to really look good,
I'll also target the h2 element,
which sits right above the h3 element here,
which sets player one or player two,
and I'll shrink that a little bit,
even though it's an h2 element,
and the other one is an h3 element,
I will now use CSS to make
this one smaller than the h3 element.
And I'll set this h2 element to 1 rem
as a font size and the margin
to .5 rem 0 as well.
With that, this looks quite decent, I would say.
Last but not least, I want to change the style
of these symbols that are being used.
And that's just a regular paragraph, which I have here.
And we could give this paragraph a class,
and, actually, that's what I'll do
so that if we had other paragraphs in there,
we would not clash with our styles.
And I'll just give this a class of player-symbol,
and apply that here on the upper paragraph, as well.
And then in configuration CSS,
we can target player-symbol like that,
and now it changed the font-size to 2 rem,
so make it really big, change the font weight
to bold so that it really stands out
and give it a color of RGB.
And then here I prepared 4-7, 4, 8-2.
And with that, that doesn't look too bad.
I want to reduce the margin a little bit, though.
So set the margin here, to .5 rem 0, as well.
Save that.
And now that looks quite good.
So now I have that summary and now the last part,
yet, of course, a very important part,
will be to style that game area, the actual game field.