So far we've worked with styles that are embedded directly into the page.
While that's great for controlling styling for a specific page,
it's still rather 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.
So I'm going to be working with the external.htm file found in
the 07_06 directory.
And little later on in this exercise we'll be working with page 2.htm as well.
So currently we're sort of picking up where we left off.
We have some styles supplied in the head of the document.
And we have our fairly simple page with the heading one, couple of paragraphs.
You know you will notice that we have a link on the page to page 2.
And that page 2, if I open that up, has no styles applied to it whatsoever.
It says nothing up in the head.
And that is a link back to page one.
So gives you an idea of kind of the structure that we're working with.
Okay.
So what we would like to have happen.
Is we would like to have the styles that are currently in the head of this document
controlling, say, an entire site.
In this case it's a small site, it's two pages, but it's the concept that counts.
So we want it to control everybody.
To do that we have to externalize these styles,
meaning we can't keep putting them in the head of the document.
Again imagine if you have 50 pages in a site, you would have to take and copy and
paste this styles in all 50 pages.
And then, if you edited one selector, you'd have to open up all the rest of
the pages and edit it in their as well, a very inefficient way of working.
All right, so what I'm going to do is create a brand new page.
So I'm going to go up to File > New.
And I'm going to save this in the 07_06 directory.
And I'm going to save it as styles.css.
Much like HTML, CSS files are just text files with a .css extension.
So you shouldn't have to do anything really special in order to create one.
Just create a brand new text file and name it .css.
Okay.
So now what I'm going to do is go in to the external.html and
I'm going to copy all of these styles.
As a matter of fact, instead of copying them I'm going to cut them.
Now I don't need the style element, that's HTML.
All I needed was the CSS.
So I'm removing everything from inside the style tag.
I'll go back to styles.css.
And I'll paste them.
So that's all I'm really doing.
I'm just cutting them from the embedded styles on the page and
then pasting them into our new styles.css.
And I'm going to go ahead and save this file and
then I'm going to go back to external.htm.
Okay, we don't need this embedded style tag on the page anymore either.
If I save this file and look at it in the browser.
You can see it's coming in totally quote unquote,
unstyled, we're just seeing the default styling.
Lets get our styles back, now in order to do that we now need to point
to styles.css file and tell the user agent that we want to use those styles.
We do that in the head of our document, and we do it using a link tag.
So after title, I'm going to come in and add a link tag.
And link tags are one of those tags that don't need a closing tag.
So all you need is an opening link tag.
And inside the link tag, I need to pass along a couple of attributes.
The first attribute I'm going to pass along is the rel attribute, or relation.
I need to tell the user agent.
What relationship the resource we're bringing in has to this page.
And in this case, I'm going to say style sheet.
This is a very important step because it lets the user agent know
what the relationship between two documents are and how to treat them.
So without this it could actually cause some issues.
So I'm going to say link relationship equals style sheet.
Then after that I need to point to the style sheet itself.
So what I'm going to do is an href attribute.
So much like the anchor attribute, you're going to use an href attribute.
But this time instead of pointing to a page that you want to navigate to,
you're pointing to a resource that you want to use.
So href, and I'm just going to point that to the styles.css.
Now you could resolve this in the same way.
It's actually common for most sites to have CSS in their own folder.
They have a top level folder that they'll probably name something like _css and
then place the styles there.
Since the styles.css that we created is in the same folder as this external.htm.
I don't need to do any type of directory navigation, I just state the file.
But, you do need to resolve this path.
So if where you're going is different from where you're at.
You'll need to go either up directories,
down directories, the same way that you do as you're resolving a link.
Last thing I need to do is just close out this tag.
That's it.
Remember, there's no closing tag.
So I just do a right angle bracket, and there is my style sheet link.
Now if I save this and go back into my browser.
So now I'm getting the styles that I want, and
it's coming in from that external resource.
So now, if I want to use this throughout my site,
it's just a matter of linking to the same style sheet.
So you know, I'm always for doing things the most efficient way possible.
So what I'm going to do is just copy this link tag, and
then I'm going to go to page number two and just below the title in that one.
I'll paste it in there as well.
Since they're in the same folder, the link is resolved exactly the same way.
So I'll save this.
And now if I preview this in the page, it's getting the styling too.
So I can link back and forth between page one and
page two, and they're both receiving the styling.
What's nice about this is the styling is now site-wide if you will.
And if I made an edit to the styles.css,.
It would automatically apply to all the pages in my site.
So if i go to styles.css I can scroll down, and add a little bit of styling for
those links.
So after the paragraph, I'm going to do an A selector and
inside of that I'm going to do text decoration of none.
That will remove the underline from the links.
Which is actually not that great of an idea.
There's a lot of usability studies out there lately that have said that it's
a really good idea to leave the underline on links.
But I'm just doing it because, hey, you can.
All right.
So I'm stripping away the underline underneath the links, and
I'm changing their color to red.
I also want to set a hover style on this, too, so
that when people hover over the link, it changes color.
So I'm going to do a:hover.
So that's all one selector, a:hover.
And here, I'm just going to set its color to black.
So I'll save that, go back into one of my pages, preview up my browser and
now you can see the link styling changes.
There's the hover that we just set.
That change was applied globally, to both of those pages,
It would have been sit wide, if we had dozens of pages.
Simply because we're using the one external resource to apply
all the styles for our pages.
So I think it's pretty easy for
you to see the benefits of using these external styles.
You can now control an unlimited amount of pages through just this single file.
So as you start to learn CSS.
Pay close attention to how external and embedded styles work together.
Avoiding styling conflicts and
writing efficient styles are really important aspects of authoring CSS.
So as you learn CSS,
it's important to understand how all of these styles are going to work together