Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy, and in today's clients, I'm gonna show you a little bit on how to use colors with CSS in order to make your HTML documents and your Web applications just just a little bit better.

Just is just we better write eso If you're dealing with old I t.

Professionals like like me.

You may be used to seeing the color schemes that we create in our HTML documents and being slightly horrified again.

We like our blacks.

We like our reds.

We like our yellows and greens and and maybe if we're gonna go out on the edge a little bit, maybe every once in a while, we'll throw in a light gray.

One of the things is especially for old timers when they start start coding Web applications or HTML documents.

We know that colors exist, and so we use those colors and the mess that could be that that can come out on the Web.

Application of the HTML document can be a little bit hard on the eyes again if you're using just the basic, bold colors that most people are used.

Thio in the HTML world, you're using colors, but they could be a bit harsh on the eyes.

One of the nice things about C.

S S is, if you use CSS for your colors.

You have a whole range of options in colors that you can use for your Web applications in a female documents to make the Web application and document a lot easier on the eyes and be able to do things such as matching the color scheme for the organization that you're building the HTML document or Web application for again.

This is one of those valuable things as a consultant, as an employee, where you can have something that technically works 100% correctly, and it's so horrible to look at the same time.

Nobody wants to use it right.

One of things that you can do with colors is if you can come up with a color scheme that matches what the organization already has that's going to make everybody a lot happier, right?

So if you if you work for a company, that company already has a specific type of color scheme when you create your application or your HTML document.

If that document our application matches the color scheme that the organization already has, it's just going to make people a lot happier.

And so, by using CSS colors, this is a way you can go in.

You can tweak a lot of things with CSS to create an overall color scheme that's gonna make the end users a lot happier, eh?

So today I'm going to should be showing you a little bit more about how to use colors and CSS.

So let's go over to the demonstration computer, and I can show you how this works.

So here we are, back at my demonstration machine again, I am using a Mac book, so I used text at it in order to create these two documents.

But all you need is a basic asking text editor, So if you're in the Windows world, you can use no pad in the Mac world.

You can use text edit in the Lenox world.

Accused yet?

Nah, novem whatever you want.

But basically, we just simply have to documents.

Today we have the style sheet.

As always, this is gonna be color style.

The CSS and then we have the HTML document is what actually gets opened up in the Web browser.

And this is simply called color dot html s.

So if we go here, let's take a look at the style sheet first, and I will show you the three different ways that you can associate a color within CSS.

So the first way have created a class simply called named.

And basically what you can simply do is in just human, readable text.

You can print out a name eso You will notice that I do this most of the time for our projects where I simply put blue or red or gray or black or a light gray right?

The nice part about simply being able to type out a human readable name is, frankly that it is human readable again.

If the if you don't have to be that worried about specific colors?

Simply having a human readable name is makes life easier for somebody that has to go and actually read the code because they can go.

Okay, this color is blue, and then they can move on.

They know what this color is.

So this is the first way that you can name colors.

But one of the issues here is that you don't get all of the possible colors that are available within CSS.

The next way that you can assign a color is by a hex code.

So you will probably have seen this in a lot of HTML against CSS is basically you can have a hex code for a color.

This gives you a lot more options.

Crap, Metric crap.

Ton of options realistically on.

So you simply say the color like you normally D'oh.

Then you put the hash and then whatever the code is and this this is associated with a specific color and that is what will show up.

Uh, you can also do rgb so red, green, blue.

So basically, this is the different amounts of red green blue in order to create any specific color so for this.

You do color colon a CZ you normally do.

Then you do rgb.

Then you do parentheses.

And this is how much red and this is how much green and this is how much of blue.

Now the thing is for this, when you have a simple, unnamed color, you can probably pull this out of your butt.

You could probably say, um, I don't want this to be yellow.

You can type in yellow, and it'll probably yellow for the hex or for the RGB.

You will most likely be getting knees from different sources.

And I'll show you that in a second just to show you how these colors show up in an HTML document.

If we go to the web browser weaken, simply see, this is how they show up.

S O.

This is the 1st 1 This is the H one with the name color.

And again, this is a blue, and that's a blood that's a blue that you would know.

You think if you type blue if you type the color blue, that's probably what you're expecting to get.

You just get a nice, big, bold blue.

This may be very useful for you because it is a blue color.

But again, look at how kind of harsh that is.

It's kind of harsh.

It's a little bit hard on the eyes that may not fit in with the color scheme.

So what you might want is again some toned down colors, some prettier colors s.

So this is where we simply use that hex code s o that color.

So this color is hash F f a 94 d d.

That's what this color is and for the RGB.

So this color RGB this is 25113 to 99 And what you can see here is that that just gives you kind of nice, prettier colors.

Now, when you're trying to figure out what colors you should use and again what you should put in either for a name color for a hex before an RGB, there are a lot of tools out there that available for you.

One of the tools I tell everybody about because it is a good tool.

A good place to go is W three schools dot com, so w three schools dot com is again.

It's a great reference, especially for basic Web app development, and they have some different tools for you here.

One of the first tools that they have is actually give you all the HTML color names.

So apparently there are 100 and 40 color names, and so you can actually just plug in these names.

So aqua as your beige blue violet, coral cayenne, all of these different names here.

If you don't want to put a hex or you don't want to put an RGB in, you could simply type out these names.

So let's say for color, let's say Cayenne.

So instead of being blue, which might be a little harsh, let me call this Cayenne.

I can do file.

I could do save.

Then we go back to our Web browser, and when I do refresh now I get the color Kaya again.

The nice thing about this is that when I am looking at that CSS, I'm not trying to have to guess what that color might be asking.

OK, I am OK.

I have an idea what Kai am.

I might look like C M C and kind of horrible pronouncing things anyways, so that's basically what they have here and for the names you also Notre asunder here.

They give you the hex.

So for whatever reason, you don't want to use the name.

You want to use the hex.

This is actually the hex that you can plug in if you're using Hex.

The other thing that they have were like That's really cool here again.

Four Hex is that they actually have a color pickers on HTML color picker.

So let's say you're trying to You're trying to fit.

Find the perfect color again.

Let's say let's say you're gonna be tryingto create a Web application for me And so you're trying to find the colors that will fit with my color scheme.

Wanna cool things here is you can simply go over here.

So this is a pic of color.

And so it's like, Okay, we'll realize kind of orange.

Okay, so that's probably close.

And so look at this.

So once I click on this over here, they give you a lighter and darker, and so they give you the hex code.

And so this is This is one of the reasons that hex code could be very nice is I Can I can start trying to figure out the overall color scheme I might be interested in.

Ooh, that's nice.

Okay, so I like that.

But I want it to be I don't know what, 55%.

So one of things I can do is I think, in simply, copy and paste this hex code.

And so over here for this, this hex co color, I can simply paste.

I do file.

I do save I go back to the web browser, I go back to my document, and now I can simply refresh and see.

Now, now we get the color just a little bit, A little bit change.

And so again, that could be a nice thing.

If you're creating classes again, when your thinking about creating text, that's all within the same style, the H one might be a darker version of the color.

The H two might be a little bit later.

Maybe you put a box, Maybe the box that you put things in the background color is gonna be this 95% here.

So that's one of the cool things that you can do with these hex colors.

Is you really can't adjust in Dia Linn the colors that you want to be a display on the screen.

Now the final thing that I'll show you here is the RG bees.

Rgb again is red, Green blue tells you how much red, how much green, How much blue?

One of the ways that this could be valuable is Imagine if you have a picture, eh?

So I brought this up here and so this is a picture from when I was at Web summit, basically the same picture that I always used.

So let's say I'm creating HTML document and I want that document to be in the same color scheme as this particular picture.

One of things I can do is you see this little eyedropper up here is where this little eyedropper icon So you can select that eyedropper icon and you can go through and you can look for the color that you want a Mac.

Right?

So, uh, so we're going through here and I don't know, Let's say again.

Let's say with the blue, I want to match the color of my titles to the blue.

It's what I can do is I can actually click on this.

And now this gives me the red, the green and the blue.

So if I go back to my C s s So I go back that style sheep.

And so for this RGB here.

So the RGB it for this would be 60 are 1 27 green and two tips to 47 blue.

I can then do file.

I could do save.

We could go back to my Web browser began go back to the html document and then I hit refresh.

And now that color, right that color is going to look very similar to the blue in this particular picture.

And so maybe that's what I want to do with the color scheme again.

Imagine Imagine I have an image.

I want the color of my texts or my border, my background or whatever else to be within the same color scheme of that image.

All I have to do is again I can go through.

I can figure out what color I want to match with.

I want to match with, like this orange you click on that.

That gives me the RG blew the rgb maybe the blue Maybe this so on and so forth And so that's an easy way that you can figure out what colors that you want to use for your color scheme.

S O.

This is a basic idea of how to use colors within CSS again.

You can You can either do name color ups.

Where is it?

Oh, I lost it.

I could lose it.

Where are you?

Ah, um it's all the way down there.

Sorry.

S O again.

You could do a name.

Color eso Basically, with this again, you can do red, green, blue into 140 of those name colors that makes life easier because people have an idea of the color that you're gonna be presenting.

You could do the hex again.

This could be used good for, like, those color wheel types.

Things actually spinning out the hex.

Or if you're using some kind of design software again, some kind of paint software, you can use an eyedropper that may give you an RGB color, and you can use the RGB color here.

So this is a basic idea of how you can use colors in CSS and why it's important.

And that's also an example of why you need to keep track of all of your windows on your desktop when you're trying to do a screen share again is a little bit more complicated doing these classes that you that you may think, just trying to keep track of all of these pictures on one little window and they have the flip between them all.