This style attribute allows us to
add some CSS styling to the element
on which we're using it.
In this case, on this H1 text,
I want to start by changing the font.
The text font, so the type of text we have here.
So the look of the text.
And we do this by adding font dash family,
colon, and then in this case, sans dash serif here.
Now what is this here?
This is now some CSS code.
That's how CSS code looks like.
There's a bit more to it, which we'll learn later,
but that is the heart of CSS.
We can set different properties
as this part in front of the colon is called
of the HTML element which we're
targeting with our CSS code.
The font family property for example
changes the type of font for this element.
Now just as HTML elements are standardized,
CSS properties are also standardized.
And you can also find a long list of supported
properties on MDN.
Now as with the HTML elements,
you should not learn that list by heart.
There are many properties here which you will rarely use,
and on the other hand, there are a couple of properties
which you'll use all the time,
and therefore you will learn by heart automatically
by using them, and it's needless to say that
throughout this course, we're going to write
tons of CSS code,
and we're going to explain CSS in great depth,
and you're going to learn a lot about CSS.
Now, here,
you would find font family if you search for it,
and then you can learn more about it.
And you'll learn that that allows you to set the font,
so the look of the text,
for a specific HTML element.
And here we have the example I'm using in my code.
Font family sans serif.
This sets the font family of this text in the H1 tag
to a sans serif font.
So to a text type which doesn't have serifs.
Serifs are those little extensions you have
on some characters, like that little bump
at the end of the C here, which goes to the top.
Or that little bar to the left on the H.
And if I reload now, after setting this CSS code
on this first element,
you indeed see that it changes.
Now this text looks different
because now we changed the styling of this text with CSS.
And that is how we can get started with CSS.
We can't add our CSS styles directly on HTML elements.
And we always can assign CSS styles
by targeting a specific property,
one of the standardized and supported properties
from that list of properties here.
And then we have a colon,
and then a value for that property.
And which value you can assign for which property
depends on the property you're using.
But again, we're going to see many properties
and many values, and many different kinds of values
throughout this course.
So that's all something that will come with experience.
Now in this case, I don't just want to set
the font family to sans serif.
I also want to center this text.
We can do this with another property.
Now if you want to add more than one property
on one of the same element, we can simply separate them
with a semi-colon.
So you add a semi-colon after your first property value pair
and then you can add your second pair.
And I'm adding an extra wide space here
which is not needed technically,
but makes it a bit easier to read.
You could also start right after the semi-colon.
And the second property which I want to add here
is the text dash align property.
And you see that I'm getting auto-completion here.
That's another nice feature of this code.
It's not just helping with auto-completion
for attributes and HTML elements,
it also helps with auto-completion for CSS code.
And that means that here,
as soon as I start typing,
it for example, already suggests
that I might want to use text dash align.
So if I hit enter again, this is partially completed,
and now it even helps me pick a value.
So when I said that there are different values
for different kinds of properties,
the good thing is that IVE is like visuals to the code
help you choose the right value
because they give you suggestions.
And if I would try to enter a value here
which is not supported, I don't get an error,
but I see that I don't get any auto-completion
as I continue typing.
And that often is an indicator that something's wrong
about that value.
So here, I'll bring back those auto-suggestions
by hitting Control Space on my keyboard,
and then we can pick Center
as a text alignment.
To center this H1 text, and if we do that
and we go back and reload this page,
now this text indeed is centered.
So that's how we added another piece of CSS here.
And now I've got a challenge for you.
I want to change the color of this text
and we're going to do that together in the next lecture,
but you might want to try this on your own.
Now we haven't learned about the color property yet,
but maybe you can find it in the CSS reference.
Because the name of the property you'll need
is rather straight-forward.
And then try setting a color on your own.
And to keep it simple, set the color to red.
So use red, the text red as a value.
So you will add whatever property you need here.
That's what you need to find out,
and you should set it to a value of red.
That's my challenge for you.
We're going to set the right property together
in the next lecture.