Now that we completed this exercise
and built the second page,
if we take a closer look at our code,
then of course it's fairly easy to see
that the full week CSS file has a lot
in common with the daily challenge CSS file.
There are some extra styles in
the daily challenge CSS file,
but there also are a lot of similarities.
And just as we, for example, reduced
code duplication by moving the color to body,
instead of having it on individual elements,
we can also reduce the overall amount of CSS code
by creating a shared CSS file,
which is used by both HTML files
and then just file specific files,
which can add more styles which
might not be needed on other pages.
And that's what I'll do here.
I'll add a third CSS file and I'll name it
shared CSS, the name is up to you though.
The goal is to move all the shared CSS code into that file.
So for this, we can, for example,
take all the code in full week
CSS and move it into shared CSS.
And now let's see if there is something in here
which shouldn't affect the first page.
We definitely want to have our body styles here,
we want to have more body styles in the first page,
but we can add more in a separate CSS file.
So having this shared styling
here definitely makes sense.
I want to have these H1 and paragraph styles
here in the first page, and I'm also
fine with those link styles here.
Therefore, we can actually remove
all the code in full week CSS.
We could also delete that file,
but I'll keep it around since we will
use it later again in the next course module.
So keep it around and then full week HTML.
We can now add a second link in front of
the full week CSS file link,
where we import shared CSS as a style sheet.
Now why in front of full week CSS,
because the order will matter if we start
overriding some of these shared styles.
If we want to add more styles,
then this one has to be imported first
so that the second file can override
some of those styles if needed.
At the moment it's not needed,
but still importing shared files first and more specific
files there after is a good practice.
Now I'll copy that link and also
add it on index HTML, in front of
this daily challenge CSS link.
And now we can remove unnecessary code
from daily challenge.
From body, I removed the background color
and text alignment and the text color,
but I'll keep the margin.
And the beautiful thing about CSS is
that now the body here from daily challenge
will overwrite the body from shared CSS,
but only if we have clashes in CSS properties.
That's not the case here, and in that case,
it will be merged in stat.
So the margin will simply be added to those
base styles which we have in the shared CSS file.
So now this margin from daily challenge
CSS will be applied to the body in addition
to those base styles defined in shared CSS.
Now I want to keep the image here
because that's exclusive to this first page.
We can get rid of H1 and P, because we have data
in their shared CSS file already.
For the link, I want to get rid of that as well,
because we have everything we need here
in the shared CSS file as well.
And I want to keep my today's challenge ID selector here,
because that's specific for this page.
And with that, if we save this and reload
this first page, it looks the same as before.
The same is true for the second page, but now
we share some common CSS code across pages.
And that's a very common thing to do,
because whichever website you are building,
the chance is very high, that the different pages
that make up your website will have some shared styles.
And using such a shared CSS file has done
a nice way of only defining and working
on those styles in one place,
and still using them in multiple pages.