Using CSS

[00:00:00]
>> Kevin Powell: Now we have a couple of HTML pages, but this begs the question, where do we write our CSS? For those of you who've been doing this for a while, you already know, but very quickly, a lot of early content or beginner content talks about inline styles, internal style sheets, and external style sheets. I'm going to quickly touch on them, but we're just going to move directly to using an external style sheet.

[00:00:21]
But just to show you, if we come back to here, and let's just move that back on the side. If we're here and I decide I want to change the color of my paragraph, I can do what's called an inline style. So I can write style, oops, is equal to and color is red. Sorry for the autocomplete showing up, we'll fix that in a second. You can see that paragraph down here has now become red. The problem with inline styles is if I want another paragraph to be red, then I have to copy paste this onto this one, and then if you add another paragraph, you have to put the same styles and you're probably not going to have one declaration on there, and so you end up repeating yourself over and over and over and over again.

[00:01:02]
So I'm not going to suggest that we use inline styles. Another place that we can write CSS is coming up inside of our head, and we can have a style tag up here. If we have a style tag there, inside of here we actually get to write some CSS. I'm going to cover this quickly and then we're going to look at what the actual syntax and how all of this is, but you're probably a little bit familiar. But here I can say, let's just save that, we have black text again.

[00:01:32]
If I say the color is red, now all of my paragraphs are becoming red, except if we go over to my second page. On the second page, this hasn't happened, so then I'd have to take this style tag, copy paste it over to this page. Any time I make a change, I have to do it in two places. It gets a little bit frustrating, it gets a little bit annoying. If you add another page, then you have three pages to maintain, four pages, and so on.

[00:02:02]
So what we generally encourage is to use an external style sheet. To do that in my project here, I'm going to make a new folder, styles. It doesn't have to be in its own folder, you could just have a style sheet that's floating around, but I'm going to do a styles and just call mine style.css. You'll also see main.css and a few other names as well, but nice and simple right there. Now, let's say I do the same thing I said before, p, color, red.

[00:02:34]
Save. Nothing's happened. Why haven't my paragraphs changed to red? Yes, you haven't included the style sheet in your HTML. Exactly. So this style sheet exists. My HTML pages don't know that this exists. So we have to go over to both of my pages, and in those, all the way at the top, once again in the head of the document, we can include a link to our style sheets. So I can come in with a link. The link has two attributes that we have to have.

[00:03:13]
One of them is an href, and the second one is a rel, just like that. So the href will point to the location of our style sheet. So in this case it's inside my styles, it's a relative path, and then I can write style.css or wherever you saved yours, we follow the path. If I do this, it's still not working. I just saved my file. It hasn't changed yet because I haven't told the browser that this is a style.

[00:03:38]
Now, by putting the style sheet there, we can see that it's actually working because it knows that this is a CSS file now. One thing, whenever I'm creating a link, I always forget whether this is an href or an src. The amount of times I've put source cause I'm used to writing images and I mixed it up. The trick I use now to remember is if you have regular just links, which I have one. There's a link in here somewhere, but you know that if you have a regular link, the a tag, a tags use href, so the same thing, whether it's a link or an anchor link, they both use href.

[00:04:13]
But if you put the wrong one, you switch it for the correct one. I'm just going to copy this. Oops, not cut, I want to copy that, bring that over to my index page, paste the same thing over there. So now those styles are working. If I go back to this page, they're working. Go back to my CSS file, change this to, we'll just say blue for now, and we should see, there we go, it's working in both pages, and we can go back over and my styles have all changed there.

[00:04:45]
So in general, I'd always recommend using an external style sheet. You might use inline CSS for JavaScript sometimes when you're inserting some styles, and there's some very advanced use cases for critical CSS and other things that are way outside the scope of this course for actually having an inline style at the top of your page. But generally speaking, one CSS file linked as an external style sheet is the way to go.