We have been using an internal (embedded) stylesheet on our pages. Now we'll set up an external (linked) stylesheet.
An external stylesheet is a text file that only has style declarations in it and has a .css extension. The stylesheet is applied to your page in the head section with the link tag.
We discussed the link tag earlier in the course. It allows you to load information into a page.
Here is the link tag form for CSS:
<link type="text/css" rel="stylesheet" href="URL" />
The link tag loads the external stylesheet into a browser.
The attributes in the link tag can be listed in any order.
type tells the world that the link is to a text file that has css in it.
rel stands for the relationship that the file has to your page. In this case, it's a stylesheet.
href="URL" gives the name and location of the file (your external stylesheet), such as style.css.
Normally you use a relative URL for our stylesheet, but you can link to any stylesheet on the web. Holy Cow!
External stylesheets contain only declarations and comments. Give your file a name and add the .css extension. I call my stylesheets style1.css (black background) and style2.css (white background).
Let's compare the 2 types of stylesheets.
Internal stylesheet
<style type="text/css">
<!--
body { background-color: #000000: color: white;}
a:link { color: #0000ff; }
a:visited { color: #800000; }
a:active { color: #ff00ff; }
-->
</style>
body { background-color: #000000: color: white;}
a:link { color: #0000ff; }
a:visited { color: #800000; }
a:active { color: #ff00ff; }
We see that the declarations in both stylesheets are the same. The difference is that the internal stylesheet needs the <style>...</style> part to identify it as a stylesheet while the external sytlesheet is identified as a stylesheet in the link tag.
An internal stylesheet can only be used on the page that contains it. An external stylesheet can be applied to any page. That means:
The concept behind external stylesheets is the same as the basic concept for SSI and can be thought of in the same way. A change to your file affects all pages that contain the file.
Happy coding!
Gnubee
