External CSS
Changing to external CSS is another one of those things that will help you so much in the long run. I'm going to show you how to add external CSS for those
who use iFrames, and for those who've converted to PHP. It also helps if you've
organized your CSS.
So I'm just going to take a wild guess and say that your CSS right now is plopped onto every page and you have to go through every single page to change your
CSS when you've made a new layout. Aahh.. That can be pretty tough. I'm going to use a little snippet of my own CSS to guide you through the iFrame portion
of this tutorial.
<head>
<title> Changing To External CSS is FUN! </title>
</head>
<style>
body {
background-image: url("http://www.splatteredcanvas.com/shinyblueb.png");}
#layout{
position:absolute;
left:200px;
top:0px;
}
#other{
position:absolute;
left:0px;
top:484px;
width:110px;
height:600px;
overflow:none;
}
</style>
<iframe src="http://www.splatteredcanvas.com" name="iframe" scrolling="auto" frameborder="no" align="center" height = "500px" width = "450px"> </iframe>
I haven't included all of my CSS (this page would scroll. and scroll. xD) but I'm pretty sure you get the idea. So; you have this pasted to the top of every
single page on your site, but little did you know that all you had to do was create a new file on notepad and paste your CSS without your <style> and
</style> tags, though. Save it as 'style.css', or something easy to remember (the .css file extension is MANDATORY), but for the sake of this tutorial I'm
using 'style'.
After you've uploaded your CSS doccument to your website it's now time to paste the following onto all of your pages infront of your iFrame code, and in your
page's header.
<LINK REL=stylesheet HREF="styled.css" TYPE="text/css">
Your external CSS with your iFrame coding now should look like so:
<head>
<LINK REL=stylesheet HREF="styled.css" TYPE="text/css">
</head>
<iframe src="http://www.splatteredcanvas.com" name="iframe" scrolling="auto" frameborder="no" align="center" height = "500px" width = "450px"> </iframe>
Now let's say that you've converted to PHP. Just follow the same steps above, minus the part
about the iFrame, and voila! Your coding should look like so.
<? include('header.php'); ?>
<head>
<LINK REL=stylesheet HREF="styled.css" TYPE="text/css">
</head>
(your body would go here)
<? include('footer.php'); ?>
Good luck! If you have any problems or don't understand any part of this tutorial please contact me either through commenting or e-mailing me. ;D