Now, that you learned about the basics of CSS,
I want to apply what we learned to this paragraph,
and I want to style this paragraph as well.
Therefore, we can also add the style attribute here,
because as I mentioned before,
the style attribute is an attribute,
which you can add to basically every HTML element,
because basically every HTML element can be styled.
I'm saying basically because we will later learn
about a few elements that actually can't be styled
because they're not visible,
but I'll come back to that later.
So to this paragraph,
we can add this style attribute.
And now here, I also want to set a font family
of Sans Serif,
and I also want to set text alignment to center here.
So I'll repeat the styles from before.
And I also want to give this paragraph a color,
and here I'll now choose red as a color.
I'll actually not keep red as a color on the H-1 tag,
either in the near future,
but I want to use a different color here.
And now that's the topic of this lecture, colors.
For the H-1 element, we chose red as a color.
Now here, I want to use a dark grayish color
and conveniently, there is a dark gray color we can assign.
Now, if we do that and save this,
if we have a look at our page,
we can see that this paragraph now is centered,
has a font family of Sans Serif,
there are no serifs on the characters anymore,
and we can see that it's grayish,
but what if that's not exactly the color we want?
What if I want a little bit of a darker gray?
The problem is that if we have a look
at those prebuilt colors,
there are a couple of colors,
and there also is a gray color,
which ironically is a bit darker than dark gray.
Yeah, it is what it is.
But what if even that is not exactly the color I want?
Now, the good thing is that, in web development,
you can mix any color you want.
You can create any color you want
because there are over 16 million of supported colors.
They're just not all prebuilt and stored under a name,
because imagine what would happen
if you had 16 million prebuilt colors.
Yeah, that list would be quite long.
Instead, there are different ways of creating a color.
And one of the most common forms of creating a color,
which still can look strange when you first learn about it,
is using a hex code,
but you might have seen that in our tools,
for example, in Adobe Photoshop already.
And hence, I'm showing it here as well.
You can create a color with a hex code
by adding a hash symbol here.
And then you use a hexadecimal number,
for example, five, three, four, B, four, B.
If you use that, that is a dark gray color.
And with a hexadecimal number,
we simply point at one of those over 16 million colors.
If we would be using the decimal system here,
instead of the hexadecimal system,
we simply would start typing
very long color identifiers here.
That's why we use the hexadecimal system instead.
So that we have shorter codes here.
And in the hexadecimal system,
every color is expressed with six digits.
And actually we can split these six digits
into three pairs of two digits.
And then they represent the red, green, and blue portion
of a color because in web development,
we can describe all those colors which we want to use
with a mixture of red, green, and blue,
and the hexadecimal value, which we have here,
simply describes three individual parts,
red, green, and blue, which together form one color,
which has one unique identifier.
Now this might be a bit overwhelming right now.
And you might wonder,
"How do you know which hexadecimal value represents
the color you want to use?"
Well, the great thing is, there are tools for that.
If you Google for a color picker,
you should find such a color picker right away,
which is actually built into Google.
Alternatively, you find some websites
which also should offer you color pickers.
And here you can play around with them
and pick some colors here.
And what you'll see in this Google color picker is
that you automatically get the hex code
and also a couple of other representations of that color,
which you chose here.
And you can always copy that hex code
and use it in your web development code,
in your CSS code,
once you chose the color you want to use.
Now, what's interesting is that you also see a couple
of other representations of one and the same color here.
All these values, which you see down there,
describe the same color, for example, this orange color,
which I picked here.
And in web development,
you are also not limited to just this hexadecimal notation
if you don't like it.
You can use it,
but you can also describe the same color differently
in web development as well.
And here, the great thing is that in visual studio code,
we actually got great support built-in
that helps us with picking a color.
If we hover over this color code, which we used here,
then this built-in color picker overlay window
should open up in a visual studio code.
And here you can not only pick a color
with that built color picker,
but in addition, if you click on that picked color up there,
you can also cycle between different notations,
which you can use in web development for describing a color.
You can switch to this RGB notation where you, again,
describe a color as a mixture of red, green, and blue,
but now actually using the decimal system and using values
between zero and 255 for every color tone,
or you can switch to the HSL notation,
which stands for hue, saturation, lightness,
which has a slightly different, more advanced approach,
but which also allows you
to describe one and the same color.
And again, you can always use a color picker
like you find here on Google to find out
how those different values change if you change colors.
And you can use either of these three ways
of describing a color,
a hexadecimal code, RGB, or HSL in web development.
And attached to this lecture,
you'll also find some extra resources
that summarize these color concepts
and ensure that you fully understand
how you can define your colors.
Now it is up to you which approach you prefer.
In this course, we'll typically use this RGB notation,
which you see here, but it is up to you,
which one you prefer.
And that's it for our colors right now.
We will use a lot of colors throughout this course
because most things look better
if they're not just black and white.
And therefore it is important to be aware
of the different ways of setting colors in web development,
that you have a lot of options when it comes to colors,
a lot of colors you can use,
and that you've got different ways of defining those colors.
And here I'll now take this RGB color,
this gray color,
and also assign it as a color for this H-1 tag.
And with that, if we save this,
if I go back and reload,
now we've got this grayish color
for both the heading and the paragraph.