please remember that the complete
information for the class that you are
about to view is at Eli the computer guy
comm not only do we have our videos
there but we have parts 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 comm welcome back
as you know I am Eli the computer guy
and in today's class 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 as just we're
better right so if you're dealing with
old IT professionals like like me you
may be used to seeing that the color
schemes that we create in our HTML
documents and being slightly horrified
again we like our blacks we like our
Reds we'd like our yellows and our
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 uh start
coding web applications or HTML
documents we know that colors exist and
so we use those colors and the mess that
can be that can come out in the web
application or the HTML document can be
a little bit hard on the eyes again if
you're using just though the basic bold
colors that most people are used to in
the HTML world you're using colors but
but they can be a bit harsh on the eyes
one of the nice things about CSS 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
and HTML documents to make the web
application and document a lot easier on
the eyes and be able to do things such
as match the color scheme for the
organization that you're build in 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 a hundred percent
correctly and it's so horrible to look
at at the same time nobody wants to use
their right one of the things that you
can do with colors is if you can come up
with a color scheme and that match is
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 or 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 got to make the end users a lot
happier so today I'm going to 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 MacBook so I use TextEdit in
order to create these two documents but
all you need is a basic ASCII text
editor so if you're in the windows world
you can use notepad and the Mac world
you can use TextEdit in the Linux world
you can use gedit nano vim whatever you
want but basically we just simply have
two documents today we have the style
sheet as always this is gonna be color
style dot CSS and then we have the HTML
document this is what actually gets
opened up in the web browser and this is
simply called color dot HTML 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 a color within CSS so the
first way I have created a class simply
called named and basically what you can
simply do is and just human readable
text you can print out a name so 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
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 paw
of all 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
again 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 and so you simply
say the color like you normally do 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 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 : as 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 and named color you can
probably pull this out of your button
you can probably say I want this to be
yellow you can type in yellow and it'll
probably be yellow for the hex or for
the RGB you will most likely be getting
these 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 we can simply see this is
how they show up so this is the first
one this is the h1 with a named color
and again this is a blue and that's a
blast 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 so 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 how kind of
harsh that is it's kind of harsh that's
a little bit hard on the eyes that may
not fit in with a color scheme so what
you might want is again some toned down
colors some prettier colors so this is
where we simply use that hex code so
that color so this color is hash FFA 9 4
D that's where this color is and for the
RGB so this color RGB this is 251 132 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 or for an RGB there are
a lot of tools out there that are
available for you one of the tools I
tell everybody about because it is a
good tool a good place to go is w3
schools com2 w3 schools comm 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 they actually give you all
the HTML color names so apparently there
are 140 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 a 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 can do save then we go
back to our web browser and when I do
refresh now I get the color Cayenne
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 I can go cayenne okay I have an
idea what Cayenne might might look like
cien cien Cayenne horrible pronouncing
things anyways so that's basically what
they have here and for the names you'll
also notice under 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 or like
that's really cool here again for hex is
that they actually have a color picker
so an HTML color picker so let's say
you're trying to you're trying to fit
find the perfect color again let's say
you let's say you're gonna be trying to
to create a web application for me and
so you're trying to find the colors that
will fit with my color scheme so one of
the cool things here is you can simply
go over here so this is a pick of color
and so it's like okay well Eli's 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 can be very nice
is I can I can start
trying to figure out the overall color
scheme I might be interested and ooh
that's nice
okay so I like that but I want it to be
I don't know at 55% so one of the things
I can do is I sent can simply copy and
paste this hex code and so over here for
this this hex code 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 can
be a nice thing if you're creating
classes again when you're thinking about
creating text that's all within the same
style the h1 might be a darker version
of the color the h2 might be a little
bit lighter maybe you put a box maybe
the box that you put things in the
background color is gonna be this 95
percent here so that's one of the cool
things that you can do with these hex
colors is you really can adjust and dial
in the colors that you want to be able
to display on the screen now the final
thing that I'll show you here is the RGB
so RGB again is red green blue tells you
how much red how much green how much
blue one of the ways that this can be
valuable is imagine if you have a
picture 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 use so let's say I'm creating an
HTML document and I want that document
to be in the same color scheme as this
particular picture one of the things I
can do is you see this little eyedropper
up here so way 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 to
match right so 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 so
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
CSS so I go back to that stylesheet and
so for this RGB here so the RGB if for
this will be 60 are 127
and tips 247 blue I can then do file I
can do save we can go back to my web
browser again 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 text or my board or
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 I could click on that
that gives me the RG blue there are 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 so
this is a basic idea of how to use
colors within CSS again you can you can
either do named Color Oops where is it
oh I lost it oops where are ya no it's
all the way down there
sorry so again you can do a name color
so basically with this again you can do
red green blue you can do a hundred and
forty of those name colors that makes
life easier because people have an idea
of the color that you're gonna be
presenting you can do the hex again this
can be used good for like those color
wheel types things actually spitting out
the hex or if you're using some kind of
design software against 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 and
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 it's a little bit
more complicated doing these classes
than you then you may think just trying
to keep track of all of these pictures
on one little window and be able to flip
between them all that's that's a bit bit
more of a pain in the butt that you may
realize so a big thing to be thinking
about though again if you're a standard
IT professional
you know you may be one of those people
that think colors don't matter
just give them blue just give them red I
gave these people a color they should be
happy but again when you're dealing with
end users especially when you're dealing
with bosses taking an extra hour to come
up with a color scheme for your
application that actually is easy on the
eyes is one of those things that will
get you called back right you can be a
hundred percent right and have a product
that's 100% horrible to use all at the
same time so if you just drop a web
application on your clients desk or onto
their computer and again it's red and
it's yellow and it's green in this blue
again it may it may technically be
correct
you may have put a hundreds of hours of
work into the back end to make that
application work but when the user goes
to use it it looks ugly as hell and
frankly they're not going to be
impressed there they don't see your PHP
they don't see your Python they don't
see the database what they see is
whatever interface you've given them to
use and if it is ugly as hell they're
not gonna be impressed
so simply like literally simply spending
one to two hours out of a project that
may have taken you hundreds of hours to
complete simply to come up with a basic
color scheme so all the text everything
basically more or less looks like it
should go together and especially if you
do it so that it matches whatever the
organization's color scheme is that's
the type of thing that will get you
called back again as a real professional
if you're if you are going to be an
entrepreneur as a real contractor as an
entrepreneur it's the tiny little things
it's that extra one to two hours just to
make everything look a little bit nicer
and that's what's going to get you
called back the difference between the
people that do get a call back and don't
get called back sadly enough it's not
the back end python it's not the back
end PHP it's not it's not the
infrastructure that gets built the end
users your boss has no idea what that
looks like has no idea what it should
look like so the fact of the matter is
the person who creates a really crappy
back-end but makes the
and pretty versus somebody that makes a
really good back-end but makes it front
end ugly the front end that's pretty and
they're the ones that are gonna get
called back and that's how the real
world actually operates so really think
about going in again just tweak in the
color scheme just a little bit you know
instead of red maybe go in and find
something a little bit more subtle or
magenta or something like that right
doing those a little bit of improvements
those little bit of tweaks really will
just mean in the world when you're
creating your web application so as
always I enjoy doing this class and with
Corte see on the next one if you like
the content that I create please think
about going to Eli the computer guy comm
and becoming a member or donating please
understand that all the educational
videos are in front of the paywall that
includes the videos that includes the
notes the diagrams and the code example
all of that is freely available and in
front of the paywall but if you want to
watch opinion videos or if you want to
be able to comment you do need to become
a member
membership is five dollars a month or
$60 a year and gives you access to those
opinion videos and the ability to
comment if you don't want to become a
member you just want to give a one-time
donation there's also a donate button
where you can do that please understand
in order to provide the education that I
am it does cost money the servers cost
money equipment cost money
travel cost money all of these things
cost a reasonable amount of money and
the fact of the matter is is YouTube's
advertising program no longer supports
creators the way that it used to so if
you want to these classes to continue to
stick around and you find them to be
valuable please think about either
becoming a monthly member or donating a
few dollars for this project