Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So far, we've seen how to embed styles directly into pages. That's great for controlling styling for a specific page, but it's still inefficient in terms of styling an entire site. So in this exercise we're going to focus on externalizing our styles and then applying them to multiple pages. In the 06_06 directory, I've opened up two files there: the external.htm and the page2.htm. And I'm going to go ahead and turn Word Wrap on for both of those.
Currently, right now the only one of these two pages that has any styles applied to it at all is the external.htm. You can see it has styles up in the head; Page 2 has no styles whatsoever. If I wanted to control an entire site this way, I would have to copy the styles from the head of one document and paste them into the head of another. And again, I'm right back to where I started. If I have 500 pages in the site, that means I have to do that 500 times. And if I edit the styles, I'd have to edit them 500 times, so that's not very efficient.
What I'm going to do is I'm going to go up and create a brand-new page. So depending on which code editor you're using, this process might be a little bit different. I'm just going to go up to File and say New. I'm going to say New File, and it's going to open up a new file for me now. It's going to save this file as an HTML file, so I'm initially just going to go and do Save As here. I want to put this in the same folder that we're working with, the 06_06. And what I'm going to do here is just call it a CSS file, and I'm just going to call this styles.css. At the end of the day, they're all just text files anyway so I just changing the extension should be enough to convert that over.
Some programs you can explicitly say, I want to create new CSS file. So it really kind of just depends on what you're doing. So now I'm going to go back to my external styles and what I'm going to do here is I'm going to copy all of these styles. I'm not even going to copy; I'm going to cut them, and then in the styles.css I'm going to paste them. And I'm going to save this file. Now, if I go back into the external, this style element, I don't need that anymore. I can go ahead and get the rid of that. That's great, but currently these styles are not applying to either of these pages.
As a matter of fact, if I were to preview this page, you can see there's no styling whatsoever, and there is no styling on Page 2 either. We link to these external style sheets--and that's exactly what we do-- we link to them through the use of the link tag. This is done up in ahead of your document, and I'm going to create a new link tag. So the first thing I want to do with link is I'm going to do the href attribute. So just like the anchor tag, we have an href attribute, but unlike the anchor tag that creates a hyperlink that allows you to jump to a different resource, with the href attribute with a link tag, you're telling it to go fetch a resource, that you want it to get something.
In this case we want it to go get styles.css, and that's the file of course that we just created right there. Since it's in the same directory, it's very easy to resolve. I don't have to point it to a different folder. Now we're not quite done yet because we have to explain the relationship between that style sheet and this file, and to do that we use the rel or relationship attribute, and we're just going to say stylesheet, which is one of the preset values for that. You're telling the browser or the user agent, yes, the relationship between this file and this is that this is a style sheet for me.
So the browser says, oh okay, since this is a style sheet, I'll use it to go ahead and apply style, so the relationship or the rel attribute is also very important. So if I go ahead and save this and then preview this back in my browser again, you can see we are getting our styling, but only on this page and not Page 2. Well, we can remedy that by simply using the same link tag. So I can go ahead and copy this line of code, go over to Page 2, and simply paste that in the head of the document. So now if I save this and I go back to Page 2, now both pages are getting the styling--excellent!-- without having to do a lot of extra work. It's one document driving two pages.
You can see the links are not styled very well. I don't like that. So I'm going to go back into my styles.css, and at the bottom of my styles I'm just going to add style for links here. I'm just going to tell it to do text decoration of none, which is going to remove that default underline, and then I'm going to change its color to red. I'm also going to apply nifty other thing that we can do with CSS called a hover, which is basically saying when somebody hovers over the link, let's change its color. We'll change its color back to black.
Now, when I go into my browser and I refresh these pages, here's the new styling, but what's awesome about that is it is applied automatically all the way across my site. So you can see the advantage of taking the styles, externalizing them, and using the link tag to link out to them. You can control every however many pages as you want with just one external style, which is nice. As you begin to learn CSS, pay close attention to how an external and embedded styles--and what we're doing previously with the style element and ahead of document, that's referred to as an embedded style-- take a look at how those two types of styles work together. Avoiding styling conflicts and writing efficient styles are very important aspects of authoring CSS, so it's important to understand how those styles work together.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.