- [Instructor] Aside from controlling the formatting
of typography, controlling the color of elements
on the page is probably the most common part
of basic page styling.
Let's take a look at ways that we can control color
through using CSS.
To do that, we will use the aptly named color dot htm file
found in the zero seven underscore zero five directory,
and if I scroll down I can see that it's pretty much
the same page that we just left, so we're kind of
picking up right where we left off.
There is a new rule up top, it's the HTML rule,
and that showcases one of the really interesting things
that I find about CSS, there really isn't an element
that you can't style.
So remember, the HTML is sort of the large parent tag.
Well, some browsers recognize that as having intrinsic
properties, so it's not a bad idea to go ahead and strip
out things like margin and padding so that your spacing
is consistent throughout all sites.
Well, we're gonna use this to apply some color.
So if I go up to HTML, and I choose background dash color,
and for that color I'm gonna do pound seven seven seven
and then a semicolon.
Now, most people when they see this for color
they're like, huh?
What are you talking about?
This is what we call hexadecimal notation.
Essentially, color is defined on the screen as RGB,
red, green, and blue, and you can go from zero to 255
for each of those values, and mixtures of those gives you
all the colors that we can see on the screen
which are into the millions.
What hexadecimal notation does for us is it basically
breaks those values, red, green, and blue,
into three separate values and allows us to express that
based upon a hex value, and the hex value can be resolved
into a number, and that number is between zero and 255.
So in the case of this one, we're using shorthand notation.
So this is the same as us saying seven seven,
seven seven, seven seven.
So anytime you have three pairs of the same,
so for example even if I had something like three three,
six six, seven seven, that could be represented as
three six seven.
I'm gonna do seven seven seven, save that,
and now if I preview the page, I can see that the entire
background for my site is now that gray color
that we just asked for.
Now remember, our body element is only 70 percent
of the width of the entire page, which would be HTML.
So if I come into my body, and I give it a background
color as well, and if I want I can just do the shorthand
notation of background, I don't have to be specific
as background dash color, that's very specific,
I can just say hey, for my background,
let's make my background white, because
you can do a lot of different things with your background.
You can apply an image for example, instead of a color.
So if I wanted a graphic to appear behind everything,
I could do that.
So I'm gonna save background as white,
and now, when I switch back over to the browser,
I can see that what it's done is it's taken all the visual
elements contained within body and it's given a background
of white to that, so that gives us sort of this two-toned
look that we're seeing now.
Now in addition to the backgrounds of elements,
you can apply color to things like borders as well.
So if I'm still in the body selector, I can come in
and do something like border dash bottom,
so apply a border to the bottom of the body element,
and here I can do something like ten pixels,
a really thick border, solid, so the style of it
should be solid, and for color, I'm gonna choose gold.
Solid gold, baby.
If I save this, and preview it, notice that we now
get a solid gold border, ten pixels wide,
at the bottom of the body tag, cool.
Alright, so for border bottom, again, this is a shorthand
notation, ten pixels is the width, solid is the style,
gold, of course, would be the color.
Now in the case of the gold border and the white background,
we're using what's known as reserved keywords,
and you can go into the CSS specification
and check out some of those reserve keywords.
There are a lot of them because recently,
they also supported the SVG reserved color notation too,
so there's literally dozens of those reserved words.
Now I would like to point out, it's not gonna be consistent
everywhere, so gold for example, one browser might make that
more yellow than another browser.
You're basically just saying hey, whatever color you
normally reserve for gold, give me that.
Although, they are supposed to have reserve text values,
but it's not always honored.
Last thing we're gonna do, let's go down to the heading one
and apply a background color to it as well.
So, if I go down to the heading one, I can set a background
on it, and you know what, so far we've done hex values,
and we've done reserve colors, but we haven't done an RGB
notation, so let's do that.
RGB and then in parentheses, we're gonna do 44 comma,
45 comma, 140.
So what this does for us is it allows us to specify
a specific RGB value.
In this case, this is red, this is green,
and this is the blue value, and Brackets is being
oh so helpful in showing me that that is going to be
a blue color, so one of the things that is a little tricky
about defining color in CSS, if you're gonna use RGB
notation, if you're gonna use hexadecimal notation,
or some of the other notations available like
hue, saturation, and brightness, you really have to know
what the values are before you get here.
This isn't something that you play around with
that often, usually use in another program or a chart
somewhere, and pick the colors off of that.
So if I save this, preview that in the background,
now I can see that headline has a dark blue background.
I also get to see how big the headline actually is.
Headings are treated like block level elements
so they expand to fill their apparent container.
In this case, it's expanding to fill the width
of my apparent container, which is the body tag.
Now the last thing we're gonna do is set the foreground
color for the heading, so that black text on the
blue background is a little hard to read,
so I'm gonna go right down and set one more property.
I'm gonna do color and the color is going to be
pound D, D, D.
So that's again, hexadecimal notation
and that's sort of a lighter gray, so if I save that,
go into the browser, I can see that I have the lighter gray
foreground color on the blue background.
Now again, this isn't the best looking page in the world
now, but at least you get an idea
of kind of how color works.
Now the color property, a lot of people get confused
by this, you can see the difference between
color and background, so much so that a lot of people
actually refer to this property as foreground color
instead of just color.
As you can imagine, there's a lot more to applying color
than what we've discussed here.
For now, just focus on the fact that you can set color
for most elements on their backgrounds, borders,
and foreground content.