Version: 32.2
Revision: 43 Build 14
Stylesheet and JavaScript importing rules
Introduction: this tutorial will show you how to import “css” and “JavaScript” files without making a mistake. It will also help you to keep your “web-pages” clean from a bunch of codes and allows you to keep your pages simple!
Notes: the “@import” rule allows you to include ‘external style sheets’ in your documents or html files. It is a way of creating a style sheet within your document, and then importing additional rules into the document. However, some older or new browser doesn’t support this rules. So, you might have to use two methods to let the browser choose, decide and revert – back if needed.
1.] Download notepad++ from the original author or from a mirror and install the software.
——————————-
http://sourceforge.net/projects/notepad-plus/
http://filehippo.com/download_notepad/
——————————-
2.] Copy the source code and paste it into your notepad.
Notes*1: to use this feature, you’ll need to place the codes at the “head” of the page and place it after the “meta tags” only! However, don’t place this code after the “JavaScript codes”, or else, your web-page might trigger some unpleasant surprise…
Notes*2: to use these source code, please replace “filename.css, subfolder, one.css and two.css” files or subdirectories with your own…
—Copy Source Code—
<style type="text/css">
<!--
@import url("filename.css");
@import url("filename.css");
-->
</style>
—End Source Code—
Tips: if you have a “css file” in a subdirectory, you can include specific “filename.css” from the subfolders. You can also add the files without the quotes (inside the brackets)…
—Copy Source Code—
<style type="text/css">
<!--
@import url(subfolder/filename.css);
@import url(subfolder/filename.css);
-->
</style>
—End Source Code—
Function to support browser that doesn’t support “@import” rules.
Notes: some browser will ignore your “@import” syntax and it will try to look for a “link” and “href”. So, to work around this problem, you’ll need to add some extra codes before the “@import” rules. This can be sorted by looking at the source below…
—Copy Source Code—
<link rel="stylesheet" type="text/css" href="one.css" />
<link rel="stylesheet" type="text/css" href="two.css" />
<style type="text/css">
<!--
@import url(subfolder/filename.css);
@import url(subfolder/filename.css);
-->
</style>
—End Source Code—
Now, once everything is in place I’ll explain this properly so that you can understand!
——————————-
If you have the old importing method before the new “@import” method, your browser will try to look for the old method before using the new (style-sheet) import method. So, in my point of view, the browser will use the “@import” if the browser supports that function / syntax ~if not, the browser use this method which is provided below…
—Copy Source Code—
<link rel="stylesheet" type="text/css" href="style.css" />
—End Source Code—
To understand the orders of “css files”, just look at the html – coding and see where the “@import” and the old method are embedded…
——————————-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="shortcut icon" href="Globe.ico">
<title>Globalnews</title>
<meta name="verify-v1" content="NW73w4LhNaoTZeP5NJIBg88Wi5qAe1O2RVIFUZmLZ+4=" />
<META name="TITLE" content="globalnews" />
<META name="DESCRIPTION" content="This is a tutorial about CSS and JavaScript" />
<META name="KEYWORDS" content="tutorials,articles,vbscript,help,dictionary" />
<META name="OWNER" content="emailaddress@provider.com" />
<META name="AUTHOR" content="Lair360" />
<META HTTP-EQUIV="CHARSET" content="ISO-8859-1" />
<META HTTP-EQUIV="CONTENT-LANGUAGE" content="English" />
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1252" />
<META HTTP-EQUIV="VW96.OBJECT-TYPE" content="Database" />
<META name="COPYRIGHT" content="2008 by Lair360" />
<META name="RATING" content="General" />
<META name="ROBOTS" content="index,follow" />
<link rel="stylesheet" type="text/css" href="Fonts/fonts_style.css" />
<link rel='stylesheet' type='text/css' href="css_file/table_cssv1.css" />
<style type="text/css">
<!--
@import url(Fonts/fonts_style.css);
@import url(css_file/table_cssv1.css);
@import url(css_file/Sidebar_RedChrome.css);
-->
</style>
</head>
——————————-
If you spot the rules, you’re doing great!
Part 2: importing JavaScript
Introduction: this little tutorial will help you to import “JavaScript” files that are long and fustratingly complicated! It will also help you to reduce your “bandwidth usage” if you have a bunch of web-pages that relies on that particular script!
—Copy Source Code—
<script type='text/javascript' src='source-code.js'></script>
<script type="text/javascript" language="javascript" src="myJsFile.js"></ script>
—End Source Code—
Notes: the biggest advantage to having an external “Javascript file” is that ~once the file has been loaded, the script will hang around the “browser’s cache” which means if the Javascript is loaded on a single page then it’s almost a sure thing that the next page on the site, the user visits will be able to load the files from the browser’s cache instead of having to reload it over the Internet!
To import multiple javascript, you can use this “php source” code.
However, this techniques will only work in a “server-side” environment…
1.] Create a “PHP file” in your text editor (Notepad++) and add the following codes to your web-page.
—Copy Source Code—
<?php include("filename1.php"); ?>
<?php include("filename2.php"); ?>
—End Source Code—
2.] Now, save your web-page and upload it to your host – provider.
3.] Done!
Copyright ~2008 Lair360
