Now that we added this link here,
we might want to style this link in our own way and not
stick to the default styles we got here.
But before we do that,
let's revisit the styles we have on the other elements.
Up to this point,
we always added styles by setting that style attribute.
And now already we can see
a huge disadvantage of using this approach.
It worked fine if we only had one or two elements,
but now that we have more and more elements,
we have a lot of CSS code right in our HTML code,
which leads to very long HTML elements.
And in addition, we have code duplication.
These two paragraphs have exactly the same style values,
and we need to duplicate this because every style affects
just the element on which you added it.
Now, of course, it's very realistic
that we're building a website with
dozens or maybe hundreds of paragraphs.
And if we then have to copy and paste the styles
to all those paragraphs,
that can quickly become very annoying.
And it's not just annoying,
if we ever decide to change something,
let's say we want to pick a slightly different color here.
If we ever decide to do that,
we then need to copy that change
onto all the other paragraphs.
And that's just not realistic.
I'll undo it here,
but that is something which we could be doing.
And that's just not something we want to do,
that makes our website very difficult
to develop and maintain.
And therefore, adding styles like this,
through this style attribute and approach,
which is called inline styles
because you add the style definitions
inline with the element on which you're adding them.
That is something you can do,
but it's not the most common way of adding styles.
Instead, you typically define styles globally,
and you define on which elements, on which kind of elements,
certain styles should be applied,
so that you don't have to add them individually
to multiple elements.
And for that, we can add a new HTML element
here at the top of our index HTML file.
And that's the style element.
And that's not a special element.
Up to this point,
all the elements we used H1 paragraph and anchor element,
rendered something on the screen,
which we could see.
So all these elements output something visible.
In the case of the elements we used thus far,
they output text.
Now the style element is different.
It's invisible.
It doesn't render or show anything on the screen.
If I add style here and I add a S in there and I reload,
we don't see that on the screen.
But adding an S in there is also not correct.
Instead the style element is there
to allow us as a developer,
to define some CSS code between the style text.
So what we added on the style attribute,
on the individual elements,
can now be defined here between the style text,
just in a slightly different way.
Because now with that style element,
we can define global CSS styles
and to be precise in this style element,
we define so-called CSS rules,
which look like this.
CSS rules are more than the property value assignments
we got in our style attribute.
Here we just said,
which properties should be set
to which values for the element
on which we added the style attribute.
With CSS rules
we can now define global rules,
which affect multiple elements at once.
And for this, we need to add some extra information.
We do still have our property value assignment,
but in addition,
we also got a so-called selector and then some curly braces,
and then the property value payers
between those curly braces.
And this selector is important.
This selector tells the browser
for which elements on our page, these styles should be set.
And in this case, we have a so-called type selector,
this P selector,
which would say that all paragraph elements,
So we have the element name here without the angle brackets
that all paragraph elements should receive the styling
defined between the curly braces.
And we can now apply this here as well.
We could say that we want to target all paragraph elements
by writing P here, and then opening and closing curly brace.
And then between the curly braces,
we set our different CSS styles.
So we can cut the styles from down there,
from the style attribute and add them here.
And now it's just common to split them
across multiple lines,
every line ending with a semi-colon
to make it more readable.
So that's how our CSS code should look like.
Multiple property value pairs for one selector,
and every line ends with a semi-colon
and all the lines are between curly braces.
And then we can remove this style attribute here
and also on this second paragraph.
And now, even though I removed those style attributes,
if we saved this file and we reload,
we see that nothing changes there visually
and that simply proves
that our styles are still being applied.
But if we inspect our content here with the dev tools,
we indeed can spot a difference here.
We see that for the two paragraph text,
the styling actually comes from this rule here,
and it even tells us where this rule is defined
that it's in the index HTML file in line two.
And if we have a look at our file, that's correct.
The rule that affects these elements
starts here in line two.
It's this paragraph selector rule.
And of course we can not just do this for the paragraph,
we can also do this for the H1 element
and target the H1 element here,
and then copy our styles or cut our styles
add them here,
split them across multiple lines,
and then set it like this,
and remove the style attribute down there.
And with that we're targeting, all H1 elements,
even though we only have one element here
and we're setting our styles for those elements.
And now of course,
we still have to same styles for these two different rules,
but we don't have the duplication for the same elements
as we had it before with the same style attribute
being set for all the paragraphs.
And of course, we still have some style duplication here
between the H1 of the paragraph tag,
and there would be ways of reducing this as well,
but we're not going to do this right now
because I'm soon going to change those styles a little bit.
And in addition,
it's also something which will lead us deeper
down into the CSS rabbit hole.
And we're going to take that path
a little bit later in the course.
But adding styles like this is a major step forward because
that will help us get our CSS code
out of the HTML code down there,
which makes this HTML code way more readable,
it leads to shorter lines, for example.
And in addition,
we don't have that unnecessary duplication across elements
and the error proneness that is related to that.