-: Welcome back.
In this lecture,
we will learn how to work with colors in CSS.
However, before we can actually go back to our CSS
we first need to learn a little bit
about the theory of how to represent colors using code.
Now, there are many ways of representing colors
in computers and basically in writing code
but one of the more traditional models is the RGB model.
So in the RGB model, every single color can be represented
by any combination of red, green and blue colors.
So that looks something like this
and maybe you have already seen a diagram
like this somewhere in school or something like that.
So anyway, in order to actually represent a certain color
we need to give each
of the three base colors any value between zero and 255.
And so with that, we can define a total
of 16.8 million different colors.
So let's understand this a little bit using our diagram here
and starting with the pure red color.
Of course, in this channel, red is at the complete maximum
which is 255 and the other two channels.
So the other two base colors are at zero.
So there's no green whatsoever and no blue whatsoever.
And so this is why this is pure red.
So again, the red channel is
at the maximum value and all the other ones
are at zero and the same of course for blue and for green.
So in blue, the blue channel is
at the maximum of 255 and the other ones at zero.
And in green, basically the same happens for green.
Next up we have white, and
in white we have all the three colors at the maximum of 255.
So basically having all the colors
at maximum gives us a complete white,
while at the other end of the spectrum
when we have all the colors at zero
we get a complete black color.
Finally, the other three colors that we have here are a mix
of the other two colors that they are made of.
So you see that this magenta here is red
and blue at the maximum and no green at all.
Then we have this, I think it's called cyan or cian color
which has a red at zero and G and B at its maximum.
And finally, yellow has blue
at zero and the other two at 255.
Great. So I hope that this makes sense.
And now that we have a very basic understanding
of how the RGB model works,
let's actually see how we can represent
or how we can define colors in CSS.
So in CSS, we have two ways
of writing colors using the RGB model
and those are the RGB notation
and the hexadecimal notation.
So by using the RGB notation,
all we do is to use this RGB function in CSS.
And then we simply specify the values
for each of the three color channels, red, green, and blue.
So for example, if we set green and blue
to the maximum values, then we get this cyan color
just as we saw in the last slide.
Another example, which is a lot more real world
is this orange color right here.
So here the numbers
for each channel look a little bit more random.
And so, this is how we get a real looking color using CSS
and using the RGB notation.
Then besides the normal RGB function, there is also RGB
with transparency, and transparency is also called alpha.
And so that's why this function is called RGBA.
So here we can specify a fourth value
which in this case is the 0.3
and this will then give this color a transparency
as we can see here.
Looking at this other example
if we for example, define an alpha value of 0.7,
then we see that this color is actually transparent
as visible when we put it
on top of another color like this green square.
Now, of course, we don't have to manually come
up with these numbers for these colors, okay?
So we don't have to like manually write 244, 179, 63
in order to get this orange.
So usually we just copy a certain color from somewhere
or we can also generate it with a color picker in VS Code.
And so that will then automatically give us these numbers.
But all this is still very important
so that you know what these numbers actually mean.
Okay, but moving on,
let's now talk about the hexadecimal notation
which is actually a bit more used in CSS.
So here in the hexadecimal notation, we don't
use a scale from zero to 255, but instead we use a scale
from zero to ff and ff is basically the same as 255
but in a hexadecimal scale.
And we don't need to go into what that actually means.
But basically hexadecimal numbers do not go
from zero to nine, but from zero to 15
so there are 16 different numbers and not just 10.
And the last one is the f.
And so that's why ff here means 255.
Now, translating that to CSS
we write hexadecimal notation like this with the hash
then the value for red, green, and blue
just as I have it here on the screen.
And so this then gives us, of course
the exact same number as with the RGB notation.
And the same can of course be done
with this orange example color that I have down here.
So we can represent this using f4 b3 3f.
And again, this looks kind of random, and so
we usually just copy this from the color picker in VS Code.
Now in hexadecimal notation
there's also something called the shorthand
which we can use when all the colors are identical pairs.
So in our cyan color here
we have two zeros, two f's, and again two f's.
And so we can abbreviate
that into our shorthand writing zero f f.
All right.
And now a little bit about how we actually do things
in practice in the real world.
So in practice, we mostly use the hexadecimal notation
and then if we need transparency
we use the RGBA function.
So as you see here on the left side with the alpha value.
Finally just something about greys, which are a special kind
of color that we need all the time in CSS.
So basically in the RGB model, when the three colors
in the three channels are exactly the same
what we get is a grey color.
So at both extremes of the spectrum
when all of the values are zero, we get complete black
and when all of them are at maximum
so at 205 or at ff, then we get white.
But of course there are many other gray colors
in between that we can use.
And to be precise,
there are exactly 256 pure grays to choose from.
And one of them is this one, for example.
So where red, green and blue are all at 69.
So this gives us this nice gray color which has
hexadecimal code of 4, 4, 4, 4, 4, 4
which in the shorthand notation can be written
as just 4, 4, 4.
So this one I like to use a lot for text color.
And of course, let's take a look at another example.
And this one has all the values at 183
and it can be represented as b7b7b7.
So in the hexadecimal notation, you will see once again
that the three pairs here are exactly the same.
And so this is the signal that we have,
in fact a gray color.
Now okay, so now that we know a little bit
about the theory of color
in code and in CSS code in particular,
let's now quickly learn a couple of CSS properties where
we can actually use colors in practice.
And the most simple CSS property that requires
a color value is simply the color property,
which we actually already used before.
So let's say
that we want this H1 here to have a different color.
So let's say color
and then I will just specify some blue color here
1098 and ad.
And so this gives us this nice blue color.
So as we just learned
we have 10 or one zero in the red channel,
nine eight in the green channel and ad in the blue channel.
Now, as I mentioned before
we usually use the VS code color picker.
So we get that by simply hovering over a color.
And then from here we can choose
like any color that we want, right?
So we can change the color here to something else.
So this shade of gray.
And then in there we can basically define how dark
that gray should be.
Also, if we click here at the top
so in this value here, that will change the notation.
So now we have this hsl
which we actually didn't talk about,
but then if we click again, we got the rgb.
And so this is exactly the same color as before
but using the RGB function, right?
So let me save it.
And now you see that we have this green color.
So if we hover it again, we get back to the color picker.
And now this one here is actually the slider
for the alpha value.
So if we start dragging it down
then you see that automatically it gets changed to our RGBA.
Okay? And then here we can, as I mentioned
define the alpha value.
So it actually already got saved.
And you see
that now the color is kind of transparent, right?
And if we put it even down close to zero,
then now it's almost completely faded out.
All right?
So this is how we work with the color picker
but now let's actually go back to the color that we had.
So 1098 ad.
All right?
Actually, another nice trick that I wanted to show you.
So if you just want the color picker
you can just specify any color first, for example
white by using fff, and then you just hover the color
and then you get to the color picker.
All right?
So if you want it, for example, this pink
you can choose that here maybe with some alpha.
And there you go.
And now it applied this pink color
because when we have two same definitions
it will simply use the last one,
but again more about that a bit later.
So let's get rid of that.
And now we actually also want DH two
and DH three with the exact same color.
So this one and this one.
So how should we do that?
Should we simply copy this property here?
So this declaration, and then paste it here and here?
Well, not really, right?
Because then we would have the exact same code
in multiple places.
And that is never a good idea
because imagine that then we wanted to change the color
for example, to orange.
Then we would have to go through all the three
color definitions and change them there.
So change them one by one.
And of course, that is not what we want.
So instead, we can define a list
of selectors just like we did here, but now only
with the ones that we want the blue color to apply to.
So that's H1, H2, H3.
And now let's simply grab that
and paste it here, give it a save.
And there you go.
So now the H1 H2 and H3 have this blue color.
And now as you also might have noticed one more time,
we have now yet another selector that is applying
to the H1.
So we have this one and this one and this one.
And in fact, all the styles
of all of them are now applying to this element.
Next up, let's also define a color for the rest of the text.
So right now, the rest of the text is completely black
but let's use that gray color that I showed you
in one of the slides.
And actually let's do that here.
So we want this text to apply
to everything basically even this here
and the color will then get overwritten later.
And again, we will learn about why
and how that works in a separate lecture.
So remember, for a gray color
it needs to have the same values in all three channels.
And so let's say 4, 4, 4, 4, 4, 4 like this.
And if you remember the shorthand
then we can abbreviate this even more
because each of the pairs is the same value.
It's always just 4 4.
And so we can make this even shorter just like this
give it a save.
And now indeed, all of this text here is this gray color
except for the H1 2 and 3
which are overwritten here a little bit later.
Great.
So let's now talk
about another CSS property that can accept a color value
and that is the background color property.
So let's now give our main page header a slight gray
background color to distinguish it a bit
from the rest of the content.
So how could we do that?
Let's come all the way down here.
And the first thing that comes
to mind is to simply select header like this, right?
And so here is that new property called background color.
And here let's use another nice gray color
which is F7 F7 F7.
So again, you can see that the colors in the three colors
so the three main RGB channels are exactly the same.
And by the way, here in the color picker
no matter what color you're in
here in this color slider, here on the left
there is always this shade of gray.
So if you start here from the top
you see the white that I showed you in the slide
and at the very top you get then to black.
Okay? So you can always get a gray color
if you move the slider here
at the very extreme of this left side here.
But now let's go to F7 F7
which is a color which is nice to memorize and nice to use.
So a very subtle gray, maybe you cannot even see it here
but hopefully you will see it on your screen.
Now the problem here is
that not only our page header got the gray color
but also this other header.
So maybe you could see that coming.
And so the solution to that is to give this header a name
and then style only this header.
Now, there's only this one header that we want to style
and so we could use an ID here, but given what I explained
in the last lecture, let's not do that.
And let's simply use a class,
let's call it main header.
Let me copy it
and replace this header with the main header class.
And indeed, now only this one here got this gray color.
Let's just get rid of this test.
And here we go.
Nice. And if you can't really see this background color
then just use your color picker
to just use some other shade of gray.
All right, and this video is already running quite long
but let's still talk about another property here
which is about borders.
So what I want to do next is to add some border
to these related posts here.
So basically to make them now look something like this.
All right, so we have
at the bottom and at the top here, this blue border.
So that's not hard to do at all.
So let's just see what's the element here.
And it is this aside.
So let's just select it here
using this element selector.
So element selector is basically when we simply use the name
of the element to select it.
Okay? So this here is the class selector with the dot.
This is the ID selector with the hash.
And when we simply use the name of the element,
we call that the element selector.
Now let's start
by actually giving it the same background color.
So background color
and then we use the one that we used before.
And VS code is actually very helpful here
because it's scans the CSS document
for the files that we're already using
so that we can very easily use the same ones.
And then here, let's now talk about the border.
So border.
And now this property is actually a special property
because it accepts multiple values.
So let's define the width of the border as five pixels,
the style of the border as solid,
and then the color of the border as that color
that we already used before.
So this blue, okay?
Let's just give it a save
and then I will explain a little bit more
why it works this way.
And indeed here is our blue border.
Beautiful.
So going back here to this border property
this is actually a special kind of property.
So it's called a shorthand property
because we can just use one property
for defining three different properties.
So we could also individually style the border width,
border style and border color properties.
But usually we do it all in one run
and simply define everything at the same time.
Now here you can define a lot of different keywords.
For example, dotted is always a possibility.
So this will look something like this.
You can use dashed as well,
which will look like this,
but usually I never use those.
I always go for solid.
Okay? So this gives us the entire border
around the entire element.
However, we only want the border at the top and the bottom.
And so instead of defining the border property like this,
there are also special variants of this property.
So we can also say border top.
And so this, as you might expect
will only style the border at the top side of the element.
So just like this, okay?
Then let's select all of this and paste it here
because we also want the border at the bottom.
So easy enough, border bottom
give it a save, and here we go.
And just for the sake of completeness
we can also say border left and border right.
And so then we will be back to square one
where we have the borders on all the four sides.
And so, of course this doesn't make sense.
Then we will simply use the border property.
These ones we don't want anyway.
And so we are back to this result.
All right?
And this is how we work with colors in CSS.
Now let me just quickly mention that we can also
use these predefined color names just as we did
in the very beginning with the color of blue.
So quickly show that to you.
So let's say that we wanted to set a background color
for the entire webpage.
So that's also possible simply by adding a style
to the body.
So we can just do background color like this.
And here we can specify one of these names.
So if I give it a save, then everything has this very
beautiful blue color, as the background,
except of course
the elements that we specifically
gave another background color, right?
Or we could use something else.
So usually if you just start writing some color name,
you will get a lot of suggestions here from VS code.
And then you can select one of them like this.
Okay? But of course we don't want that.
So let's just comment out this code by hitting command
or control slash, and then we are back to normal.
Okay? And now just to consolidate this knowledge
a little bit, I suggest you to experiment
with these three properties that we just learned.
For example, by adding some borders to some more elements,
like some headings or some lists,
and also changing some more text colors.
And especially important would also be to play around
with the color picker a little bit on your own.
So just take 10 or 15 minutes to do that
and then I see you in the next video.