Now that we're adding more and more styles,
this style element here
is getting bigger and bigger
in this HTML document.
Of course, I'm also zoomed in quite a bit here
to make the code more readable,
but even if I zoom out a bit temporarily,
you see this is getting longer and longer.
And especially this style part is growing and growing.
And that's not bad; that's totally normal.
But it's also therefore totally normal
that we want to outsource this into a separate file.
That we want to put our style definitions
into a separate file, which we then just add and merge
into this file, so to say.
And that is something which is officially supported
by browsers and by HTML.
We can create a new file here
by clicking on this icon
or using the new file shortcut,
and then give this file a name of our choice.
For example, daily-challenge.css.
We could also name it, styles.css,
or site.css, whatever we want.
But I'll stick to daily challenge CSS.
And now this fall has to end with .css.
And when it ends like that,
you can put your CSS code right into that file.
So we can go to index HTML
and grab all that CSS code here
between the style tags,
without the style tags, though.
So just the code itself, the CSS code itself.
Cut it and add it here in daily challenge CSS.
Now, if we do this and I save all files,
if I reload, the styles are lost.
Because just because we added an extra file,
does not mean that this file gets used by the browser.
The browser still only loads the HTML file.
And in this file, we have no reference
to that extra CSS file.
Just because it lives in the same directory,
does not mean that the browser
automatically applies it.
Instead, we explicitly have to state
that we want to use this CSS file
for styling the elements in this HTML file.
And we do this with help of another meta HTML element,
not the style element,
but instead, the link element.
The link element is added like this.
And the special thing about the link element
is that it has no closing element,
no closing tag.
Instead, this is a so-called "white" element
because it actually has no content
between the opening and closing tag.
And hence, there is no closing tag.
Instead, such white elements,
like the link element is,
are configured with attributes only.
And we don't have a lot of white elements,
but there are a few and they are always white
because they just don't need any content
between the tags.
Instead, here link is configured
with attributes only,
and the attribute which it needs
is the href attribute,
just like the anchor tag had a href attribute.
But link does something different.
And it can be easy to confuse those two
because link also sounds like it would create a link,
which we could click,
but that's not what happens.
Instead it creates a link to another file,
which will then be included,
or which will be used,
when this file is being parsed by the browser as well.
So it links this HTML file to another file
and then both files together will be evaluated
and parsed by the browser.
It does not create a clickable link.
So it's really just some random fact
that link also has a attribute called href
for defining a path to file this HTML file
should be linked to.
And to be precise, it can be a relative path.
So seen relative from this HTML file,
and therefore since daily challenge CSS
is a sibling file to this index HTML file,
we can just specify this daily challenge.CSS file name
as a value for href here,
and that will then link this HTML file
to this CSS file.
Now, there's just one other extra attribute
which we have to add,
and that's the rel attribute.
That defines the kind of relationship
we're creating here with this link.
And here we should set the value to style sheet,
telling the browser that what we import here
will be a file full of CSS style definitions.
You could argue that this is clear
because of the file extension,
but the browser doesn't look at the extension
and then guess what should be in the file.
Instead you have to explicitly set this kind of relation.
Though I will say right away that
this is the most common type of link you'll create:
a link to another style sheet.
But we'll see other ways of importing our files
into this HTML file a little bit later in the course.
So this now creates a link to this style sheet
and ensures that those styles will be used
when this HTML file is being parsed by the browser.
So if we now save this and reload,
we got our styles back.
But now they live in a separate file
and therefore we're back to a more readable
and more manageable HTML file.
And as a developer, that's always our goal.
We want to keep our code maintainable and manageable.
And of course, for bigger websites,
it will grow automatically.
It will become bigger and bigger,
but especially outsourcing non-HTML content,
like CSS rules, into a separate file
is a good and common practice,
which you should consider using for your websites
and your styles on your websites, as well.