CSS Backgrounds & Borders

[00:00:00]
>> Jen Kramer: Okay, so other things that we can do here for our body of our web page. Maybe we're kinda bored with the fact that this is a white background with black text, maybe we'd like to have a different color, and maybe we want a different background color for our web page, sound good?

[00:00:15]
All right, so we can go ahead and continue to add properties and values here for the body tag. So let's go ahead and add one then for a background color, anyone wanna guess what the property name might be?
>> Speaker 2: Background color.
>> Jen Kramer: Have a background color, background-color. All right, so after that, we can put in color names, and you can type in color names and you'll get colors, they may not be the ones you want or the ones you expect but you can type in names.

[00:00:47]
So we could type in a name like yellow.
>> Jen Kramer: And it will probably pick a really, ugly yellow for you, okay? So that's one way of doing it. That's a pretty bright yellow.
>> Jen Kramer: Okay.
>> Jen Kramer: If you don't want to have colors like that, there are other choices.

[00:01:14]
>> Jen Kramer: You can go ahead and type in color values for this. And the way color values work on the web is that they are six digits long. A number that's in so called base 16. Maybe you had this somewhere in school we talked about base ten numbers, one, two, three, four, five, six, seven, eight, nine, ten.

[00:01:33]
In base 16, we count one, two, three, four, five, six, seven, eight, nine, A, B, C, D, E, F.
>> Jen Kramer: And then we're at one followed by zero, okay? So that's the way this works, it has to do with binary numbers, and that's all you need to know about it, it's just kind of magic.

[00:01:54]
So the actual color number will look something like this ffffcc.
>> Jen Kramer: Which is a much nicer shade of yellow. So this is actually a six digit number, I know it looks like letters, but it's out there, they're actually digits. The first two stand for the value of red, the second two stand for the value of green, and the last two stand for the value of blue, all right?

[00:02:20]
And that's how you form a color on your web page, and why I know that this is a lovely shade of yellow is because I've been using it and teaching for years, okay?
>> Jen Kramer: So to all those people who are out there on the Internet, you're right, there are like five or six other ways we can write color on the web.

[00:02:39]
We're gonna stick with these ones for right now. We'll probably come back to some of the other ways, we can write color on the web, maybe later on, maybe we won't get to it in this course. But these this way of writing color in the six digit format, works everywhere, and it's a great way to manage color, all right?

[00:02:58]
So if you go ahead and save that, let's take a look at our web page one more time. Much better, not quite so glaring. All right, so I'm gonna refer back to our document for today. Remember, this is at frontendmasters.github.io/bootcamp, click on the link for CSS, this is our reference document for today.

[00:03:22]
And we have tons of things that we're gonna look at today. I wanted to point out to you that these are all listed in here, so scroll on down to the CSS properties and values section. This is where you can start looking into font families, font sizes, font styles, all kinds of interesting things that we can do with fonts for the most part for today.

[00:03:47]
And some background colors, all right? So that document is here for you to refer to anywhere along the way, if you happen to get lost.
>> Jen Kramer: Okay.
>> Jen Kramer: All right, anybody have any suggestions for what you'd like to style in this document? What would you like to change in order to make it look better?

[00:04:16]
>> Jen Kramer: Have any suggestions? Yes?
>> Speaker 2: A frame around the picture of the cat.
>> Jen Kramer: A frame around the picture of the cat. All right, let's think about putting a frame around the picture of a cat. That would be kind of fun, wouldn't it? So we have that lovely kitty cat there.

[00:04:31]
Somehow, we need to select the picture on the web page, okay? And then we can write the actual code to make it do a frame around that. So one way of doing that would be what? First of all, we need to select the thing, so what is the thing?

[00:04:47]
What is the HTML that we can call to select the thing?
>> Speaker 3: The image.
>> Jen Kramer: img, right? This is the img tag, the image tag, so all we need to do is just go ahead and put img.
>> Jen Kramer: Now, to put a frame around this, there's a property that's called border that we can use to take advantage of this.

[00:05:14]
Border does a whole bunch of different things. But we can just write it this way, border.
>> Jen Kramer: What color would you like your frame?
>> Speaker 2: Neon green.
>> Jen Kramer: Neon green. Okay, so neon green, so let's say it's a 10 px solid green border.
>> Jen Kramer: Okay? So that's going to put a 10 pixel wide line on all four sides of that particular image, solid and green, which will be neon enough.

[00:05:48]
[LAUGH] All right, and if you go ahead and save that,
>> Jen Kramer: And refresh the page, did you get it?
>> Jen Kramer: Sweet.
>> Jen Kramer: Okay?
>> Jen Kramer: Other suggestions? Yeah?
>> Speaker 4: What about creating a box around our header?
>> Jen Kramer: Create a box around our header? Sure, how do you think we might do that?

[00:06:15]
Based on what you know.
>> Jen Kramer: Go ahead and tell me.
>> Speaker 4: Would we be able to select this here, and just use the same sort of border name.
>> Jen Kramer: Yeah, we certainly could, so what would we select?
>> Speaker 4: h1.
>> Jen Kramer: h1, exactly.
>> Jen Kramer: And then what would we say here inside of h1?

[00:06:39]
>> Speaker 4: Border.
>> Jen Kramer: Border, once again. And then, what do you think?
>> Speaker 4: Five pixels.
>> Jen Kramer: Five pixels. Okay, we have solid, that's an option. We also have dotted, that might be kind of fun. What color would you like?
>> Speaker 4: Pink.
>> Jen Kramer: Pink.
>> Jen Kramer: Okay, so go ahead and save that.

[00:07:08]
>> Jen Kramer: And let's look at the web page again.
>> Jen Kramer: I'm gonna change mine to red, just so that it projects a little bit better.
>> Jen Kramer: Okay? It's kinda all about me, your name in lights, isn't it?