Before we finish the styling of this page here,
and before we also come closer to finishing this module,
there is one last property I would like to show you,
which is helpful to make your pages
look a lot more beautiful.
It's the box shadow property.
The box shadow simply adds a shadow around
an element's frame, around its borders so to say.
Well, and if you look at our list items here,
some additional shadow here to make these look a bit better.
It's definitely helpful.
Before we applied the box shadow property,
though in our code, let's first get started here
with our list items here, and let's apply this property
directly here in the dev tools.
So you simply click into the area for the CSS rules
of the list item.
And now you add the box shadow property, this one.
And we can define the values for this
box shadow property in many different ways.
I will show you a very common one here,
which consists of four separate values which we define.
The first value here is the so-called offset
along the X axis.
This means we will move the shadow from being directly
behind our element to the right a bit, so to say.
So we could use five pixels here, for example.
Like this.
Then the second value we define, following the offset
along the X axis, is the offset along the Y axis.
So we push the shadow down a bit,
according to our definition here,
which could again be five pixels.
You can now see the shadow immediately on the website
here for our list items.
Now we have a third option which defines
the so-called blur radius because at the moment you see
it's a very strict ending of that box shadow.
And with the radius, we can make this a bit softer.
We could again use a value of five pixels.
Maybe we'll of course define these differently
than in the final code.
If you use five pixels, it's like this,
if you would use 20 pixels, for example,
you see it will look like that.
So feel free to play around here.
We'll go with five pixels for the moment.
And then finally, as a fourth value,
we can define the color of our box shadow.
By default, it's this black tone here.
I'll again use RGB or specifically RGBA,
which allows me to define the color as we know it before.
So we could, for example, say 0, 0, 0 to have a black tone.
And then I have to define the opacity of this color.
An opacity of one, for example here,
would simply well mean a black shadow.
If it would set it to zero dot two,
we see this very light box shadow here,
and zero dot two would actually be a good value here.
And as you've seen with this box shadow,
we can tailor this a bit more.
I think for the X axis, a very slight movement
of one or two pixels maybe should be enough.
Same thing here for our Y axis.
And maybe here we'll also make the radius of it smaller
with four pixels, so it's very subtle so to say.
But it gives the page a very good look.
Maybe even just one pixel here, let's see.
And also one pixel there, and also just one pixel there.
Yeah, I think it's better.
So it gives the page a very good look
and a bit more of this 3d look for our elements.
So this is a very nice thing when it comes to designing
such different elements here.
And also something we often prefer when we compare it
to borders, which don't give our elements this nice look.
However, we still have to add this code to our actual code.
So let's reload this and let's go back to the code
and here for our list items.
We'll now add the box shadow here, box shadow.
And we will use, I think it was one pixel,
let's maybe say one pixel, one pixel, four pixels,
and now RGBA here with a value of 0, 0, 0,
and zero dot two 40 opacity.
With this, we improve the look of our website even more.
So this is the box shadow property.
Before we continue with our today's challenge page here,
where we also apply to concepts you learned about
in this module, I would like to clean up our margins
in the header though.
Because here we have a margin top and bottom
in the h1 element.
We have the margin on the paragraph and here also
on our anchor tag.
And with the new knowledge gains,
it would actually be sufficient to add a margin
just to our paragraph here.
The margins for the anchor tag and the h1 element
are therefore not required.
Let's do this first by the setting,
the margin on the h1 element to zero here.
Then by maybe increasing this margin a bit to 12 pixels,
for the paragraph, this one here.
And now we'll also set the margin of our anchor tag
here to zero like this.
With that, the look didn't change a lot,
but now we don't have a margin on the h1 element,
the top and bottom margin on our paragraph, by the way,
top and bottom margin should be sufficient here like this.
Yeah, it's better.
And no margin here for the anchor tag.
Here, we have the bottom margin on the header,
to define the distance between the header
and the main element.
With this, we finished this page, now as a next step,
we'll have a look at our today's challenge, here.
Here is now the time for you to apply the knowledge
we gained, to change the style of this page significantly.
So in the next lecture, I'll show you what this page
should look like first.
Then you have the chance to try this on your own,
and then we'll add the styling to this page together.