Let's now work on the style of our full week page.
And we could start from top,
so, with our H1 element up here,
then with the anchor tag and afterwards with our order list.
For this, I'll first comment out the list items here,
we'll keep the list then on rule for the order list.
Because as explained earlier,
this rule will be inherited to the children.
So, the list items, therefore, this is all right.
So, let's get started with our H1 element.
So, the headline in the full week HTML file,
we have a font family already.
This is defined in our shared CSS file.
So, we could get started with changing the font size of it.
I think this current default font size is not perfect.
We could make this maybe,
a bit bigger here.
So let's go for a font size of 48 pixels.
Let's see.
Yeah, now it looks better already.
And besides our font size,
I would like to have a
slightly different color at the moment.
We have the same color that we find in the body.
So we inherited this
and I prepared a slightly different grayish tone here,
just to bring a bit more life into this page.
And this is 71,
62,
and 62.
And yeah, with that,
we have changed the color slightly and increase the size.
So I think our H1 element looks all right,
let's now continue with the next element
here in our project.
And this would be our anchor tag.
As for the H1 element,
we have defined some styles already
here in our shared CSS file.
So, font, family,
and text decoration is nothing we have to define.
We might think about the color
and some other properties, though.
Let's get started with adding some background color.
We added some background color to the body here,
but for the anchor tag,
I want to have a different background color
to give this more,
this wall pattern-like, look.
As background color,
we choose the background color property,
and then I prepared another color already, again, RGB.
And here, this is 167,
1,
and 78.
This is kind of a reddish tone.
So to say, you might remember this color
from the shell CSS file as the actual color
for the text in this anchor tag.
Therefore at the moment, we cannot see a lot.
So we should change the color property here to white.
Maybe here, I don't use RGB,
but just the white predefined color here.
Yeah, it looks better.
Some issues still, but it's improved already.
What we could then add,
as we also did it already in our shell CSS file,
is some border radius
of four pixels to get these slightly rounded corners.
I think this looks better.
Besides that, we could also work on the font size of it.
Let's maybe give it 24 pixels.
Yeah.
Now this looks a bit more prominent, so to say.
What doesn't look good though,
is if we hover here,
we still get this text decoration.
So we define texts decoration non for the default case.
But once we hover it's back here,
I'm not a big fan of that.
So let's also add the hover pseudo selector
for our anchor tag here,
and there.
We'll say text decoration should be set to none.
So this should look better.
Yeah. Now we don't have this effect,
but now the problem is that we don't get any feedback
once we hover here besides the change in cursor.
So what we could also do is we could add a background color
for the hover case.
And here, well, big surprise.
I prepared another color.
This has the RGB code of 180,
12,
and 90.
So with that, if we hover here, yeah, you see,
it's just a slight feedback here,
but looks a lot better already.
With this, I'm happy with our H1 element
and the anchor tag not finished yet.
Of course, this looks a bit tight here,
for example, we'll cover this in a few minutes,
but we can now continue actually with our list here.
I'll skip the order list for the moment now
and directly tackle the specific list items.
We can, of course delete our,
the style here not needed at this stage.
For the list items I would like to get started
with some background color, again,
big fan of colors to make things look a bit more beautiful.
And again,
the color I prepared here has the RGB code of 223,
136,
and,
124.
Then another property we know already is maybe
some border radius to give it this front,
look here, maybe with six pixels.
And yeah, if we go back,
we see that we now have some color in here.
You see that we have these rounded corners.
We don't have any space between our list items here,
but we can quickly add some space with the margin property
that we used already here in our head.
This adds the space between our elements.
So let's maybe use a margin here of 32 pixels, for example,
let's see if this looks better. Yeah.
Now we have these three elements separated a bit.
Still, this page doesn't look to be fancy.
If you're honest,
we have some issues here when it comes to the space,
this text needs in this box.
So we need some additional space in here.
Actually, the width of these items is awkward.
The space between these is also strange.
So yeah, we are not there yet.
To dive deeper here,
we need to understand another core concept of CSS, though.
The so-called CSS box model.