What do we have to style?
Well, we created that main part and that photo part,
and therefore, I first want to focus onto the main part here
and therefore onto our image
and the other elements it contains.
For that, we'll go to our daily challenge CSS file.
And up here,
I first want to move the margin that we add to the body here
into our shared CSS file.
Right here.
Because, for actually both our pages,
we can remove this here in the daily challenge CSS file.
If we go back,
you'll see this margin we added doesn't hurt here.
And same thing is true for the full week page.
I think this looks good.
So we can use this as a shared CSS style.
By the way,
talking about the looks,
I'm using a zoom level of 125% here.
So in case the page looks a bit different,
that's the reason for this here.
I just use it to make it better readable for you.
However, let's now focus onto the main part.
And here, I want to add our main selector.
And there, I first want to work
on the width of this main section.
At the moment, if we go back and scroll down a bit,
we have a width of more than 1000 pixels.
And I think this doesn't look too good.
So I want to reduce this width a bit.
Therefore, let's maybe add a width of only 800 pixels here,
to make this look better.
Let's see.
Yeah, but now the, well
centering of our domain element is a bit off,
but thankfully, we learned how to fix this quickly.
Do you remember how can we center such block elements?
Well, we can do this with our margin,
because we actually only have to use a margin of auto here.
If we do that, everything is centered.
However, that's not the full truth.
Because whilst I like the horizontal centering,
I think that the distance to the top here and to the footer,
so basically, top and bottom here, is not sufficient.
Therefore, I want to add some more margin here,
Specifically,
I want to add a margin of 200 pixels to the top,
and 72 pixels to the bottom.
How can we do this now?
Well, instead of our shortcut here,
which adds this margin automatically,
we can simply say that for the top,
we used 200 pixel margin.
For the right, we used auto margin.
For the bottom, we used 72 pixels,
and for the left, we used auto again.
With this in place, now our page looks a lot better already.
But still, the main part doesn't stand out enough.
It's kind of a mix of text here,
so I want to make it a bit clearer
that this is the main part of the page.
And for this, we use our good old background color property,
this one here.
And as always, I prepared color and RGB color,
which is 219,
108,
and 94.
With this in place, the main part,
well, is a lot more visible now,
but, now we are missing some other things.
First thing is the padding.
As you see, we don't have any padding in our main part.
Let's add this quickly to give the text a bit more distance
to the border of our element here.
So we use a padding of 24 pixels all around,
and now this looks better immediately.
So we broke down the width on the padding and on the margin.
What is missing now is our border.
So let's add a border here and for this we'll take,
oops, we'll take a bigger border of 5 pixels here,
and a solid one with an RGB code of
44, 44, and 44.
Let's see. Yeah, better.
And then we take our border radius of eight pixels,
to give it these rounded corners all around,
which gives it a nicer look in my opinion.
That's it almost with the main element.
What is missing though here is a box shadow.
So a property which we have learned about,
so let's also add the box shadow here.
We move it from the left to the right by only 1 pixel,
we move it top to bottom by 2 pixels,
and maybe 8 pixels for the blur radius, and we also give it
a color and RGBA color to be more precise.
So we changed the opacity, and the color is 0,
0, 0,
so, black in the end,
but now the opacity can be changed to 0.3, for example.
Let's inspect this.
Yeah, this row.
Perfectly, I forgot the P here. Sorry.
My bad.
Now it's working.
And now you see this slight box shadow here,
around our main element.
So this was step one of the styling.
Let's now continue with the children of our main element.