Transcript from the "Creating a CSS File" Lesson
[00:00:00]
>> Jen Kramer: So to get started writing CSS, the first thing we need to do is make a CSS document, we need to make a folder for that. So let's go into the day2 folder.
>> Jen Kramer: And let's go on ahead and make a new folder right here. And I'm gonna call it CSS, because it contains CSS.
[00:00:22]
>> Jen Kramer: And then once we have that folder in place, you'll see it here in VS Code. And now we can go ahead and make our CSS file. So go on ahead and say, File, New File.
>> Jen Kramer: And we'll immediately go ahead and save this, so, File, Save.
>> Jen Kramer: And I'm gonna put that in my CSS folder, and we'll call that style.css.
[00:00:56]
>> Jen Kramer: So, this is your basic style sheet, you've made your first one, and we can put a little comment on the top here to tell us this is a style sheet. Commenting in CSS is a little different than comments in HTML. So, the comments in CSS looks like this, it is a / followed by a *, and you can say, my first css
[00:01:20]
>> Jen Kramer: And then you're gonna end it with a */. So that's just the comment. Once again, comments, remember, are little notes to yourself, they're gonna show up anywhere for anybody to see, anywhere on any web page, but, people can view your CSS online, so be nice. Cuz they can read those comments.
[00:01:41]
So, now we have an HTML file, we have a CSS file, that's great. Do you think they're talking to each other?
>> Speaker 2: Not yet.
>> Jen Kramer: Not yet. We just have two documents, they're floating around out there in space, never the two shall meet. So we need to make sure that the HTML is talking to our CSS.
[00:02:00]
So the way we're gonna do that is, we're gonna go back to our HTML, and in the head of our document, anywhere in the head of the document, usually I put mine right after the title, we're gonna go ahead and link to our style sheet. And, shockingly, we're gonna learn a new tag to do this, and it's called the link tag, link, all right?
[00:02:23]
And we'll say, link href= and then quotes, we're gonna put in the path to our CSS document. And VS Code very happily goes ahead and tries to help us with that. So it is going to be in the CSS folder, and it's gonna be style.css. The other thing that we need to add is an attribute called rel="stylesheet".
[00:02:49]
The link tag can be used for a whole bunch of different things in HTML, sometimes it's used for a favicon. Favicon is that little icon that shows up in the tab of your browser window, that little picture up there, or some other things that it's used for, that we establish what this link tag is for, that's why we say rel="stylesheet".
[00:03:10]
And then you can just go ahead and close that tag. This is another one of those self closing tags, this does not require a slash link in order to close the tag.
>> Speaker 2: Does it matter if rel comes before href?
>> Jen Kramer: Nope.
>> Speaker 2: Because I used data combined, and then it did that.
[00:03:27]
>> Jen Kramer: It's fine for rel to come before href, great question. In fact, in all cases in HTML, it really doesn't matter what order your attributes are in, they can be in any order at all. But I think you'll generally see people write their CSS this way. Usually the href comes first.
[00:03:44]
I think it's just like the whole world just kind of agreed on, and that's the way they do it, but you don't have to. So now we have an HTML document, it's linked to our style sheet, we're ready to write some CSS. Make sure you keep up with saving your documents as you go.
[00:04:02]
One of the cues that VS Code will give you that the document isn't saved is this little circle icon up here, you'll see that we go from an X when it's saved to a circle when it's not saved. If you ever see the circle, make sure you save it.
[00:04:21]
>> Jen Kramer: And you'll have to toggle over to your other document. The other thing you can do here that will make this kind of a little bit easier to work with is the following. I'm just gonna close my style.css tab here, just for a moment. And, if you hover over style.css over there in that left bar, and right-click on Windows, or Cmd+click on Mac, you'll notice that we have an option here called Open to the Side.
[00:04:52]
Go ahead and try that, and you'll see that we have now these two documents side by side, so you can see both your HTML and your CSS. And since we're not working with the files anymore on the left, just click that top left explorer button, and that column will go away and give you a little bit more room.
[00:05:12]
Always you can turn on the Word Wrap. So I'm gonna turn on my Word Wrap, Toggle Word Wrap. And I'll do the same over here for my CSS. Toggle Word Wrap. Now that we've got our whole work space all set up, we're ready to go on ahead and write some of our first styles.