So let's finish that page content,
by adding the footer content.
And for this in the index HTML file,
I'll scroll here, to my footer,
and now in that footer,
I want to have two pieces of content.
I want to have another anchor tag, another link,
which will look like a button,
but which technically will still be a link,
and I'll have a paragraph with some text.
And the text here is simply, a little copyright symbol,
and then my company name, of course,
you can plug your name in there,
because you created your page.
Now, for the link, the text will be "Download PDF summary".
And that is now a link,
which we haven't created like this before,
but which you maybe were able to figure out,
if not, it's no problem, but you can add links,
which don't just point at other pages,
but you can also instead, point at a file,
which lives in your project folder
or in general point at a URL that loads a file
instead of an HTML page.
And here, I want to point that this PDF document,
so the "href" attribute just takes this,
PDF document file name, including the extension as a value,
and that now points at this PDF file
instead of a HTML file.
And that is perfectly fine, you can point at anything
and a link to that file will be created.
And if you point at a HTML file
or a page that loads a HTML file, ultimately,
the browser will navigate there
and display that page.
If you point at some other file, like a PDF file,
then the browser will simply download that file,
for you open the download window, or if it's able,
just preview that file in the browser.
And for PDF files, it turns out that,
modern browsers typically can preview this,
so if we save this and we go back,
if I click on download PDF summary,
that file is opened and previewed in that browser here.
So that's how we can construct such a link to a file here.
Now, here's one new thing, which we haven't used before.
If I want to create a link that actually is opened in a new,
browser window, in a new tab,
then we can tell the browser to open that link in a new tab,
by also adding the target attribute.
And, the default value here is underscore self,
which would instruct a browser to open that,
file in the existing tab.
And that's the default, so we don't need to set this,
but if we want to open the content in a new tab,
we set targets to underscore blank,
and that will then open a new blank tab,
into which that content is loaded.
So, if I add this attribute here and save this,
if I click on this link again,
now you see the existing pages kept open
and that document was opened in a new page, in a new tab.
And that's a little addition, which is worth knowing,
which is why I also wanted to show it here.
Now with that, we got the content in place
and I pressed this auto format shortcuts to format it,
such that it's a bit more readable,
but now I also want to style that content, of course.
And for example, the footer content also should be centered,
But in addition, I also want to style the link
in there differently, and also change the text color,
off this copyright text a little bit.
And to achieve all of that, We need to go back,
to the styles' CSS file.
Here, I now will scroll up to my type selectors here
and also target the footer tag like this.
Now to align the content we can use "text-align center",
text-align center instead of margin auto,
because it's text content, which I want to center,
I want to center this link text and this paragraph text.
So, I'm not interested in centering the footer overall.
I don't care about that, I just want to center the content,
of the footer, and since that is all inline content,
I can work with text-align center.
Now I also want to target the paragraph in there
and change the text color of the paragraph,
And actually also add a little bit of margin to the top.
Now for this icon to use the piece selector like this,
because that would select all paragraphs on the page,
and I only want to select the paragraph here in the footer.
And therefore, we can again use the Combinator,
We saw an action before,
where I write "footer white space p",
to select all P elements inside of footer elements
and only style those, with the styles I'm defining here.
And then here I can set a text color with the color property
and I'll set it to RGB, 131, 113, 149,
which is one of the colors I came up with,
as always, you can of course use your colors
and I'll set margin top to 30 pixels.
And here I'm only targeting the top margin
because since it will be centered,
I'm not caring about left and right margin anyways,
and since there won't be any content below this paragraph,
I also don't care about bottom margin.
I only want to have more distance to that link.
So the top margin is the only thing I want to set here.
With that if that's all saved, it's centered,
we have that changed color, and we have more spacing,
between the link and the text.
Now, if you want to be able to see this a bit better,
if you want to have more room to scroll down,
you can, of course, also give this a margin to the bottom,
or give the overall footer a margin to the bottom,
doesn't really matter here of 100 pixels maybe,
and by doing that, I can scroll down a bit further,
these extra 100 pixels.
Okay, so now we got that.
Now, let's work on the link styling,
and I want to style this link such that,
it looks a bit more like a button,
but I'm not using any other HTML element here,
I will use the anchor element,
I just want to change the styles.
And I only want to select this link,
to look like a button, not the other links.
Therefore, I only want to select this link in the footer,
and now we got different options here.
I can of course now use "footer a",
to select only links in the footer,
and that would work here and it would be perfectly fine.
I could also give this anchor tag a class of "BTN" maybe,
or button, whatever you want,
and then give this class a certain look.
This could be useful if we have more links or more elements,
on this page that should share one of the same style.
It's not the case here,
but it would not be unrealistic,
that you are building a webpage,
which has multiple links that should look like buttons,
and then such a class here could be useful.
Since it's here, however,
the only link that should look like this,
we could also give it an "ID" and, select this.
And all those options would be fine and viable,
as so often in web development,
you will have more than one way of solving a certain problem
and achieving a certain look.
Here, I will however, simply select with footer a,
so with this Combinator to select all links in a footer,
since that's the only footer and the only link,
I have in there that will only select that link,
and therefore, I will use that here,
and then I'll write my styles for that link here.
And now to achieve this button look,
I'll just set some padding here of 12 pixels and 20 pixels,
so 12 pixels top and bottom, 20 pixels left and right,
and then, give it a border radius of 8 pixels maybe,
and then some,
background color of RGB, 250, 201, 39,
and a text color of RGB, 66, 51, 4.
And of course, feel free to experiment with those styles,
use different values, or style more things,
it's your code, so definitely play around with it
and experiment,
that is just a styling I will use here.
Now, I also want to have certain extra styles,
which are applied when we're hovering over it
or when it's active, so when we keep it pressed
and therefore I'll add another rule,
where I select anchor elements in a footer,
which are hovered with help of the Hover Pseudo Selector,
or anchor elements in a footer,
which are active with the Active Pseudo Selector.
And here, I just want to change the background color
and change it to RGB 255, 186, 58.
With all that, if we saved this,
now I got this button look and this hover effect here.
And if we inspect this button,
we also again see inheritance and specificity in action,
so just to refresh this again, I will show it again here,
this anchor tag and the footer actually is affected
by the browser default styles,
Well, first of all, it's affected by the body,
from which it inherits the font-family, for example,
then it's affected by the footer,
from which it gets the center, text alignment.
Margin bottom and background color,
are not inheritable properties,
so they aren't inherited.
Then we got the browser default styles,
which except for cursor pointer are all not applied,
because we overwrote them,
because we have our own anchor text selector,
where we overwrite text decoration
and then set a color background, color padding
and border radius.
And that's this, anchor selector, which we defined up here.
That's the anchor selector,
which is responsible for the styles of these other,
anchor elements.
Here, this button and element in the footer,
should have a very different style,
So we added another, CSS rule,
which overwrites most of those properties,
from the default anchor tag rule,
because of higher specificity.
Footer a has higher specificity, for example,
for the color, because footer a is more specific,
because selecting anchor tags, which are in a footer,
is a more specific way of selecting things than just,
all anchor tags.
If I say, "The guy in the blue shirt",
it's more specific than saying,
"The guy over there" or "All guys",
I'm targeting a specific guy by the color of his shirt,
so that's the idea of specificity here,
and hence, we now got this specific button look here,
on this footer anchor tag.
And that's just again, a refresher,
which I wanted to add here,
to make these concepts off inheritance and specificity,
super clear.
And therefore now, all the styles are done,
that's the final look of this page, which I want to have,
That's the final look I showed you at the beginning,
but, that's not the final state of this project.
Instead, now I want to introduce a few selected
special HTML elements, and when you might want to use them.