Now that we got this correct HTML skeleton,
as it's also called,
this correct HTML structure,
let's continue working on our content
and on styling this content.
And what about this link?
This link still has its default style.
We can, of course, also apply some styling to that link.
And you might be able to guess how that could work.
We could add the style attribute here,
but I don't really wanna do this anymore
for the reasons mentioned before.
Instead, we can add a new CSS role here.
We got one for h1 elements.
We got one for paragraphs.
Now, we can add one for anchor elements
simply by using the element name here.
And that's always how CSS rules work.
When we use this type selector
where we select by HTML element type,
we always just repeat the name of the HTML element
without those angle brackets.
So here a,
and with that,
we target all the anchor elements on our page,
and we can give them a certain look, a certain styling.
Now, which styling do we want here?
We might wanna change the color.
And I also wanna get rid of that underlining,
and not because it's bad, just because I don't want it here.
Now, let's start with the color
because we learned how that worked.
And we learned that we've got different ways
of defining a color,
and it's up to you which approach you prefer,
rgb, hsl or hex codes.
And I will stick to rgb here
and define a color with the rgb function
as it's actually called.
And then here I picked a color in advance,
which has a red value of 167,
the green value to one and the blue value to 78.
And that gives me this plum red color here.
And if we saved this and reload,
it might be a bit hard to see,
but now I have this more reddish color here.
Now, to get rid of the underlining,
we can inspect this and see why it has an underlining.
And if we inspect this
we see it's probably this line of code here,
text decoration underline.
This sounds very much like it's responsible
for the, well, underline.
So if you wanna override this with our own style,
just as we overrode the color,
which is why we have this strike through effect here
for the default color.
If we wanna override it,
we just need to repeat this property
and give it a different value.
So here we can now also set text decoration
and now set this to non to remove the underline effect.
And if we do that and reload,
the underline is gone
and now we just have this colored text.
Now, it would be quite common
that links should change their look
if we hover over them though,
and currently that link always looks the same.
Now, for this we need to dig into another CSS feature.
We don't just have the type selectors here,
we also have so-called pseudo selectors,
which allow us to select an element
when it has a different state, you could say.
And for this, we can add a new rule
where we still type a,
but then also :hover, and then our curly braces.
This applies the hover pseudo selector
on the anchor element,
which means whenever any anchor element on the page
is hovered on.
So if the mouse is hovering over that element,
then we wanna apply the styles defined here.
And here we could set text decoration
to underline, for example, to bring back that underlining,
but only if we're hovering over the link.
So then the link will still have these styles,
but in addition, this style here, if we hover over it.
So then we, again,
override the text decoration and set it back to underline
if we're hovering over the link.
So if we now save this and reload.
If I hover over this link, you see it's now underlined.
And especially the hover pseudo selector
is a super important type of selector,
which you will use all the time when writing CSS code,
because it's very common for links and for buttons
that you wanna change the styling
when the mouse pointer hovers over them.
And that's how you can implement this.