So let's add some styling
and I'll start with the overall main styles
for the entire page
with things like the overall font.
For this, I'll visit Google Fonts,
and you can, of course, pick any fonts you want
for your project.
I will use Open Sans here.
That's the font I wanna use.
So I'll click on that.
And then choose the regular version,
and also add the bold version.
So 400 and 700.
These two weights.
And then I'll just grab these links here,
and of course, add them here in my HTML file,
maybe below the title and then reformat this.
Now, that's the fonts.
With the fonts added,
I'll go to the styles folder
and add a styles.css file,
which will be my main styles file.
I'll then add a couple of other files
for specific areas of the page as well
but here I wanna have my general page-wide styles so to say.
And I will start by adding that body selector here.
And here I'll first of all remove that default margin
which we actually have by many browsers for the body
by setting margin to zero
so that the body itself has no margin.
And of course, I'll add the font-family and set this
to my brand new Open-Sans style that I added
and add sans-serif as a fallback.
I also wanna set the overall main text color,
by default, it's black,
and I'll now add that color CSS property
to change it to a dark gray color.
The difference, of course, will be subtle
and yet it's always about differences like that
to get a pleasant style in the end.
And here I prepared a little color offscreen,
which is rgb, and then 44, 41, 44
but, of course, just as always,
I probably don't need to emphasize
that you can always pick your own colors
and play around with all the colors
and values I chose here for this project.
Now, last but not least,
I also wanna set a background-color
for the overall page.
And here I have a light gray color
with rgb, and then 247,
239,
and 247.
And if I save this and go to index.html,
and add that styles file with a link,
which you, of course, have to do,
then we should see these styles.
So therefore here in index.html,
I'll add my link here
by typing link and hitting Tab.
And I then wanna import from styles/styles.css.
If we save that, and go back to our page,
now we have the light gray background
with a slight purple note
and we have a different font
and also a slightly different font color,
though of course, that's hard to see.
So that's now my body style.
I also wanna style my main-header already
and for that, I'll actually give it an id,
main-header, so that I can easily target it.
It actually is the only header I have
on this entire page
but we could easily have a couple of other headers.
For example, we could wrap this h2 element in the aside
with a header for semantic reasons.
We don't necessarily need to do that here
since we only have that main title here
and just having that like this in aside is absolutely fine
but it could easily be the case
that we have multiple headers on the page.
And therefore, it is not a bad idea
to assign a unique ID to that main-header
so that we then use that ID
to add the main-header styling.
And therefore, in styles.css,
I'll add the ID selector for the main header ID,
and then actually give that a purple background-color,
which I prepared in advance,
and that is 140, 0, 255.
And the text color, therefore,
should be white so that we have some contrast.
I'll also add some padding to that main-header
and now for that padding,
I wanna have 2rem top and bottom,
using this rem unit here
so that we base the actual spacing on the font size
that was chosen so that we have the extra adaption here
in case users do change their default font size
so that our spacing between text and the borders
of the box still look good in such scenarios.
And for left and right,
I will actually use a percentage value of 5%
so that the gap between the left border
of our screen and the start of our content
in the main-header and the same on the right side
gets bigger on bigger screens
so that our header content doesn't sit directly
on the edges of large screens
but that instead, we always have a nice gap
to the left and right,
no matter how large the screen is.
And then as a last step, I'll add text-align
and set this to center here in main-header
so that all our content here is centered.
And if we save that,
and reload, we've got this main header
where our content is centered.
And of course, again as always,
you can fine tune this.
You could also add a linear gradient
instead of a single background color
but since this isn't primarily about CSS,
I wanna keep it simpler
and instead just add some basic styling that looks good,
and then move on to JavaScript in the next step.
Now, the next thing I wanna add here
in the styles.css file therefore
is some styling for my buttons.
And that's now important.
We've got a couple of buttons on this page.
Here the buttons that will later be in our modal,
in our overlay, the edit buttons
and the Start New Game button.
And the buttons actually should have a similar style.
Now, since they should have a similar style,
we could just select the button element itself
with that tag type selector here
and style all buttons in the same way.
We could do that and it wouldn't be bad
but I actually wanna have some buttons that look different.
Specifically here in that overlay where have the Cancel
and the Confirm buttons sitting next to each other.
It doesn't look that great
if those buttons have exactly the same style.
Instead, the Cancel button should look slightly different
than the Confirm button.
And therefore, not all buttons will look the same.
Instead, I wanna add a base button look
that can be applied to all buttons
and then define a slight variation
that builds up on that base look
that we can add to some buttons.
And to achieve this,
I will go for CSS classes here.
Hence, in the CSS file, we add a dot
and then the class name.
And the class name is up to you.
We then just have to add it to our HTML elements later.
And I'll go for btn, short for button
as a CSS class name.
And I'll then also add another class, btn-alt,
to define an alternative look for my buttons later.
Now, in the main btn class,
I wanna add some base styles,
which then will only be overwritten
by that alternative class selector here.
Now, the main style for my button
should be that the font is inherited.
That means that the font family
and so on should be inherited
from the surrounding container
and therefore, ultimately, from the body
instead of using the browser defaults,
which would be a different font family.
Buttons have a different font family.
So that's the first thing which I wanna do here.
I also wanna change the padding
and add a padding to top and bottom of 0.5rem
and left and right of 1.5rem.
And these are just some values,
which I found to look good.
That's why I'm using them.
Of course, we could also use the longer form of padding
and explicitly set padding-top and so on
but I'll use the short form,
which allows me to set top, bottom, left, right
in one go, as we did it multiple times in this course.
Now, I also will set a background-color here to my buttons,
and here I wanna have the same background-color
as for the main-header, this purple color.
So I'll just copy that.
And I'll also add a border of one pixel solid
and that same color
so that we technically don't see that border.
The text color, which we set with just the color property,
therefore should be white
so that we have a nice contrast to the background.
And I wanna have slightly rounded corners,
so I'll set the border-radius here to four pixels.
Last but not least, the cursor
should be set to pointer
so that when we hover over the buttons,
we get that pointer look for our cursor
to make it clearer that this can be clicked.
Now for the alternative buttons.
I plan on adding that class in addition
to this btn class onto the buttons
that should have this alternative look.
Therefore, we just need to override some
of these CSS properties defined in the btn class
with new values here.
And specifically, I wanna get rid
of the background-color and the border,
and just have a color text instead
to have a look that is sometimes called flat
where the button just is some text with space around it.
And for that, I'll set background-color
to the special transparent class,
which does what the name implies.
And set border-color to transparent
so that we technically still have a border of one pixel
but we won't see it.
And then I'll set the text color to this purple color here.
And these are now my button styles.
Now, before we start adding these CSS classes,
I wanna also apply my hover styles.
So for this, I wanna target btn
if we're hovering over it with the hover pseudo selector,
and do the same for btn-alt
when we hover over such a button.
In case of the regular button of the base button so to say,
I wanna change the background-color slightly,
and for that, I'll start at that purple
and then just select a slightly different color.
Maybe a darker purple
or maybe we also go a little bit more
into that bluish area
and then pick such a purple here.
So that's my background-color.
And the same should happen for the border-color.
The border-color should be set
to that same darker purple here.
That's what I wanna do for this button
and for the alt button,
there I also wanna change the background-color
but here, it should be a very light purple
since we otherwise have no background here.
Then I really just wanna have a very, very light purple.
So something like that maybe.
We'll have to see if that looks good.
Now with that, we added all these definitions
for these CSS classes.
Now we can go to index.html
and start adding those classes to the buttons
that should have these looks
or the elements in general that should have these looks
but here I only wanna have that look on buttons.
And hence, I'll start with Cancel and Confirm here.
The Cancel button will have that btn base class.
All buttons will get that.
But in addition, it will get the btn-alt class,
which we defined to have this alternative look
where we override some of the CSS properties.
The Confirm button will just get btn.
Now, here the Edit buttons that we have here,
these buttons should also have this alternative look again
so they get the base btn class and then btn-alt.
That's the case for the first Edit button
and also for the second button.
And then for Start New Game,
I'll again just use the btn class itself.
With that, if we save and possibly reload,
we should have that look.
We can hover over these buttons.
And for the alt button,
you'll notice that if you hover over them,
you also get a little border.
You see that border here,
and I don't wanna have that border.
Instead, maybe a slightly darker background color
would be nice.
But why am I getting the border
when I hover over this?
Because after all, in styles.css,
for hovering over btn-alt,
I haven't defined a border-color.
Well, but I have defined it for the base button
if we hover over it.
And keep in mind that this base button class
is added to all these alt buttons as well.
Therefore, of course, the hover effect defined
on the base button also applies here.
So to not get that border-color,
which we have on the hover effect on the base button,
we should explicitly set border-color
to transparent here again
when we hover over a alt button
to again override the value
that would be set otherwise.
That's how this concept of specificity works in CSS.
That's why we need to do that.
With that, if we save,
that hovering over such a button
doesn't give us that border
but instead as I said,
I'll pick a slightly darker background color
so that we can see this hover effect a bit clearer here.
And with that, I get my base styles.
Now, of course, that's not all.
Instead, now as a next step,
I wanna work on the general configuration styles
that we'll need here.