Site Development
Downloads
Help!!
Home
The External StylesheetAn external stylesheet is a set of style rules saved as a .css file. It can be linked to any number of pages to control an entire site. This has several advantages. The external stylesheet is much more convenient to use. If I wanted to, say, change the color of my regular links on the whole site, I'd only have to adjust a few lines of code on one .css file. Compare this with having to edit <style> in each page's head. External stylesheets can be a big timesaver. External stylesheets also save a tremendous amount of file space and allow your pages to load quicker. Think about how long some of your <style>s are. If you had 100 pages, each with this <style> in its <head>, you'd have quite a few kilobytes just in CSS coding. The external stylesheet, on the other hand, is just one set of style rules that can be applied to each page. You can remove the <style> tags and the style rules between them on individual pages. A big space saver. So enough with the benefits of external stylesheets. Lets make one. Making The External StylesheetMaking an external stylesheet couldn't be easier. Just follow the 4 steps below.
<link>ing The External StylesheetNow that you've made your external stylesheet, you need to <link> it to your page. In the <head> of your page, right after your <title> add:
<head> There are three important attributes to this <link> tag. First is the REL attribute. This tells the browser what type of file to expect, a "stylesheet" in this case. The HREF is exactly like the one you use in <a> tags. It gives the URL to the stylesheet. If the stylesheet and page are in the same folder the HREF would merely be the filename -- "mystyle.css". You've already been using the TYPE attribute in your <style> tags. It tells the browser specifically that the styling is written in Cascading Stylesheet code. It's important to put this <link> tag toward the top of the <head>. Also note that there is no closing tag for <link>. All of its content is contained in the attributes in the tag. Click here to see this site's external stylesheet. You'll see it doesn't take much code to make really slick effects. Make an external stylsheet with some of the practice <style>s you've already made. Link an external stylesheet to several pages and watch how changes made on the master stylesheet effects each page. When you're comfortable with making external stylesheets, move on to learning more about how stylesheets work and other ways to apply CSS styling. |
1) Copy all of the style rules in between your <style> tags. Do not copy the <style> tags themselves.
To Next Beginning CSS Lesson
Back To Beginning CSS Index