So we are using two different HTML elements now, age one,
and P, and that leads to dis output.
Now, I don't know about you,
but that output can definitely be improved visually.
It is worth noting though,
that we do have some default styling here.
The heading the H one tag definitely looks different than
our regular text.
And the reason for that is that the browser by default
assigns some styling to some, but not all HTML elements.
And for example,
the H one element receives some default styling.
Now it is important that that default styling is a nice to
have feature, but not something you should rely on.
It differs between operating systems and browsers,
and it can be overwritten with CSS, cascading style sheets,
that second programming language, which I mentioned earlier.
And therefore, typically as a developer,
we want to add our own styles also because those default
styles are not dead beautiful and are rarely what we want.
And hence,
we'll now dive into CSS and we're going to start writing
some CSS code to change that styling.
And I want to start with that H one element it's okay,
but I want to change the font type.
I want to switch to a different text font,
and we also might want to center this text and maybe also
change the color of this text slightly,
and all that can be done with CSS.
Now,
how do we then add this CSS code and how does it look like
adding it? Isn't too difficult.
We just need to go to the element which we want to style.
And then on this opening tack,
before that greater than sign,
we add a so-called HTML attribute.
We do that by adding a white space here,
and then add one of the support that attributes in this
case, the style attribute.
Now that's something we haven't done before though.
HTML attributes are not something we used before now.
Attributes are extra pieces of information you can add to
your HTML elements and different HTML elements supports
different attributes. For example,
basically all HTML elements support the style attribute,
and these attributes are always added on the opening tag.
And then we can add extra pieces of information or change to
behavior off that element on which we add them with those
attributes.
You can also learn more about the attributes if you hover
over them individuals to do code,
and you also get some helpful auto completion.
If I start typing an S for example,
I see all the attributes I can add to this age,
one element and the fervor I type the more does this
narrowed down until just the style is left,
and then you can always hit tap to auto,
complete this and have it added for you here.
You also see now how you then complete such an attribute,
how you assign a value because the attribute name as it's
called here on the left side of this equal sign,
just tells the browser,
which attribute you want to set you then assign a value
between double quotes, opening,
and closing double quotes to well set the value for this
attribute and which value you can set depends on which
attribute you are setting in case of the style attribute.
For example,
we'll be able to set some CSS code as a value between those
quotes and attributes are typically always set like this
attribute name den no white space. That's important,
no white space, equal sign, no white space, double quotes,
opening, and closing.
That's how you should set your attributes in HTML.
Then that's how you can then change the behavior of HTML
elements.
So what is now the value we want to set for this style
attribute here?