Style Placement

[00:00:00]
>> Jen Kramer: All right, so we've talked a lot about properties and values. I'm going to scroll back to the top of my CSS document here, frontendmasters@github.io/bootcamp. Go to the CSS page. And I wanted to talk just a little bit, again, about some of this terminologies and ways to include CSS in your document.

[00:00:19]
Some quick little things you're gonna need to know to complete your exercises today. So we've done a lot and talked about the terminology in terms of properties and values. We talked about a declaration, okay? So that would be like font-weight, bold, font-family, sans-serif. Those are a single property value pair, that's a declaration.

[00:00:40]
And then a series of a whole bunch of declarations together is called the Declaration Block, okay? You want to know all the fancy terminology. This is helpful when you're looking something up and they start throwing around words like this and you don't know what they are. [LAUGH] You refer back to this.

[00:00:57]
That's where all those words are coming from. Okay, second thing I wanna talk about, ways to include CSS in your document. We only put CSS in our document one way so far, we did the first thing, which is with the external stylesheet. Okay, so we created a separate document, which we've made it up for CSS.

[00:01:17]
We linked it to our HTML, we stuffed in full of styles, right? Good stuff. But there's other ways we can put styles in as well, and you may have seen some of these out there, depending on what you've been doing. So we also have what's called an internal or embedded stylesheet.

[00:01:37]
And so this is something that occurs in the head of your document, okay? And there's also this inline style, so we'll go ahead and we'll try both of these out here in just a second. But I wanted to point out to you, which should you use? 99.999% of the time the external stylesheet is the correct solution, okay?

[00:01:58]
It's one you'll see all the pros using. But on occasion, these things will come in handy as well. It's helpful to know that they exist. Make sense? Okay, so why is the external stylesheet preferred by professionals? Can anyone take a guess? Yeah?
>> off screen: They have a lot of Web pages to deal with

[00:02:19]
>> Jen Kramer: If we have lots of Web pages, right? We have hundreds of pages on our website, how many stylesheets do we need?
>> off screen: A lot.
>> Jen Kramer: One, one stylesheet. We data one stylesheet and we link it up to our 100 pages and it's a beautiful thing. Okay, if I'm putting my styles in the head of my document in my 100 page website, and I need to change something, how many times do I need to change things?

[00:02:49]
>> off screen: 100.
>> Jen Kramer: 100 times, once for each page that is a pain in the neck, okay? But it gets worse. What if I was doing an inline style? Say coloring my paragraphs on all those pages. How many times now, when the boss said I don't want purple paragraphs anymore, I want green ones.

[00:03:07]
How many changes do I have to make now? A bijillion, right? All 100 pages, all individual times that we talked about these inline styles. So for maintenance purposes, it's way better to be using the external stylesheet. Make sense? But it's helpful to know that there's other ways to include styles in your document because you'll see them used especially in documentation online.

[00:03:31]
In fact, you see them used here in this very documentation that you're reading, okay? So let's go ahead and just try them out so that you know what they are. So when you encounter them, they don't scare you, right? So to make an embedded or an internal stylesheet, in your HTML scrolling up to the head of your document.

[00:03:54]
And just before your slash head tag and again anywhere in in the head is fine. This is where I'm putting mine, we'll put in a style tag. So that's a style tag. And this is where we can put in whatever style we want to do. But we can say all paragraphs will now be something.

[00:04:24]
Color blue, okay? And you can list up here as many styles as you want. Just it's just like regular old CSS. Once you put that style tag in place in the head of the document you can put as many styles in here as you want. So when you refresh your Web page,

[00:04:48]
>> Jen Kramer: There we go, we have lots of blue paragraphs. Everything is blue, everything is blue. Okay, the other thing you might have noticed is I blew up all of my other colors for my paragraphs. With this one style, okay? Notice how this style to that declaration comes later than my actual stylesheet, doesn't it?

[00:05:12]
So what does that mean? What styles win? If I have a paragraph over here in my external stylesheet that's red, says I'll make all paragraphs red. In fact, I'll just put it in, p color red, okay? So over here in my external stylesheet, it says make the paragraphs red.

[00:05:33]
And over here in my embedded stylesheet, it says make them blue, which one is gonna win? And how many say we have red paragraphs? How many say we have blue paragraphs? Good job, everybody. The blue paragraphs win, okay? Because this is later in your document once again.
>> Jen Kramer: Sweet.

[00:05:53]
Okay, so that's how you would do an embedded style, and then let's do an inline style as well. So-
>> off screen: Sorry, can I ask real quick? If you move that embedded style above the reference to the CSS stylesheet, then is it reversed?
>> Jen Kramer: Great question.
>> Jen Kramer: Actually, before we go there, let's test this.

[00:06:18]
And make sure that we, in fact, did win. So I have red in the external, blue in the internal or embedded stylesheet, we decided that blue paragraphs were gonna win. And when we refresh the Web page, sure enough blue paragraphs win, okay, cool. So now we're gonna do exactly what Dave suggests.

[00:06:40]
We're gonna take our style or embedded stylesheet here and we're gonna put it before our external stylesheet, okay? So we still have our red style over here on the external stylesheet. We have our blue over here on the embedded stylesheet. Now which ones gonna win? How many say all paragraphs are red?

[00:07:04]
How many say all the paragraphs are blue, still blue. That was a lot of people not voting, okay. Which is later in the document?
>> off screen: The external sheet.
>> Jen Kramer: The external stylesheet is later in the document, right? So these styles are going to win.
>> off screen: One of my classes stayed right even when I had the the paragraph color below the stylesheet.

[00:07:33]
>> Jen Kramer: Yeah.
>> off screen: It was only one of them now from that style.
>> Jen Kramer: If we have a style, in a class like that, it's gonna take priority over just a plain old HTML tag. It's getting into the cascade, and we can go deep, we'll trying not to. [LAUGH] Yes, classes will be regular old HTML elements.

[00:07:54]
Last thing, let me show you how to do an inline style. So since we're coloring paragraphs here, we still have our red here in the external stylesheet. We have our blue here and the internal stylesheet. Here, this first paragraph, let's go ahead and say p style = color:purple.

[00:08:18]
>> Jen Kramer: Okay, so an inline style goes right inside of the HTML tag. You can line up as many styles here as you want. Font weight, bold, right?
>> Jen Kramer: So we can just line up one style after the other. Right inside of the style attribute. That style attribute can be applied to any of the HTML tags.

[00:08:44]
So once you've got that in place, what color are our paragraphs now? What color is this first paragraph now? We have it red in the external stylesheet, blue in the embedded stylesheet and purple in this one paragraph. So what color is this one paragraph going to be? How many say red?

[00:09:04]
It's totally red. Good, how many say it's blue? It's totally blue. How many say it's purple? It's totally purple. Awesome, yes, it's purple. So and why is it purple?
>> off screen: Comes last
>> Jen Kramer: It comes last in document once again. It's the last thing in the document.
>> Jen Kramer: So we refresh, there's my purple paragraph right there.

[00:09:33]
>> Jen Kramer: Okay and once again if you write code like this. If you're writing, your paragraph is red here and blue here and purple here, you're a terrible programmer. Don't do this, okay. For explanation only. As you can tell, it gets very confusing trying to figure out how things are supposed to be when you junk it up with lots of stuff that doesn't need to be here.