All language subtitles for 027 Working With Colors.en_US

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 is 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 a maximum of 255,

and the other one's 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'll see that this magenta here is red and blue

at the maximum and no green at all.

Then we have this I think is called cyan or cyan color,

which has a red at zero and GNB 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 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 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 are 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 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 this 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 as using F4B33F.

And again, this looks kind of random

and so we usually just copy us 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 Fs,

and again, two Fs.

And so we can abbreviate debt into our shorthand

writing 0FF.

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 grace,

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 gray 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 the hexadecimal code of 444444

which in the shorthand notation can be written as just 444.

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 that 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 dead we have in fact,

a gray color.

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,

98 in the green channel and ad in the blue channel.

Now, as I mentioned before,

we usually use a 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'll 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 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 1098ad.

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 hovered 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 the h2 and the h3

with the exact same color.

So this one and this one.

So how should we do that?

Should we simply copied this property here

to 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's 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 collar to apply to.

So that's h1, h2, h3

and now let's simply grab that and paste it here,

give it a safe and there you go.

So now the h1, h2, and h3 have this blue color.

And now, as you also might've 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 these 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 444444, like this,

and if you'll remember the shorthand,

then we can abbreviate this even more.

Because each of the pairs is the same value

as always just 44,

and so we can make this even shorter just like this.

Give it a safe,

and now indeed, all of this text here is a this gray color,

except for the h1, two and three,

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 F7F7F7.

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 grays.

So if you start here from the top,

you see the white that I showed you in this 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 F7F7, which is a color,

which is nice to memorize and nice to use.

So 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 that'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 slide.

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 year is the class selector with a 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 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 at 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 use before, so this blue.

Okay?

Let's just give it a safe

and then I will explain a little bit more

why it works this way.

And indeed here is all 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 used those. I always go for solid.

Okay.

So this it 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,

we'll 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 safe, 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 would 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 safe,

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 comment

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 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.