CSS and Javascript outside the HTML file

Last updated on December 15, 2009. Tags: , , , ,

One of the most useful features of cascading stylesheet or CSS is that you can place them in an external .css file instead of within the header (enclosed by <head> tags) section. By placing the CSS codes in an external file, we can have consistent appearance of several pages within the website, as well as making the pages more search engine friendly. You can also do the same in Javascripts; this time putting them in an external .js file.

An example of a webpage that uses both CSS and Javascript is shown below in an iframe. The CSS formats the border, font and color background while the Javascript enables the image to flip whenever the mouse hovers above it. To view the page on its own, click here.

After opening the webpage above in its own window or tab, you can view the code by clicking "View" near the top right of your browser window, and then click "Source" (for Internet Explorer) or "Page Source" (for Firefox). You will notice the following codes in the header section between the head tags <head> and </head>

The CSS code for formatting the page:

<style type=text/css>

body
         {
		font-family:helvetica, arial, sans-serif;
		font-size:12px; color:red;
		background-color: #fafafa;
		border: 0;
		margin: 0;
		padding: 0;
		align: center;
	     }

img
         {
                margin-top: 0;
                margin-bottom: 0;
                margin-left: 10px;
                margin-right: 0;
                padding: 0;
	     }

p
         {
                text-align: justify;
                padding: 0;
                margin-top: 11px;
                margin-bottom: 11px;
                margin-left: 0;
                margin-right: 0;
	     }

#framer
         {
		background-color: #bbddff;
		border: 0;
		margin: 1px auto;
		padding: 5px;
		height: 86px;
		width: 388px;
		border: 2px solid red;
	     }

</style>

The Javascript used in that flipping image on the right:

<script language="JavaScript">

{
thumb1= new Image();
thumb1.src = "pic1b.jpg";
hover1 = new Image();
hover1.src = "pic1c.jpg";
}

function imageflip(thumbnailID,imageName)
{
document.images[thumbnailID].src = eval(imageName + ".src");
}

</script>

There is another way of placing CSS code and Javascript to your webpage aside from writing them on the header section. It is by placing the CSS code and the Javascript in separate files (for this example, we will call them style.css and javascript.js respectively). You can name these files with any name that you want, as long as their extension names are .css and .js.

You can create these files by using Dreamweaver, or by disabling the "hide extension name for known file types" in Windows and then create a text file (*.txt) and change the extension name txt to .css or .js.

Open your external files using notepad or Dreamweaver to edit them:

Then, instead of typing long CSS codes and Javascripts in your header section, you can simply call them from external files using the following short codes. You must place these codes in the header section, in lieu of the long CSS codes and Javascripts that we moved to the external files.

<link rel="stylesheet" href="style.css" type="text/css"
media="screen"/>
<script type="text/javascript" src="javascript.js"></script>

The location of the webpage (HTML file) and the external CSS and Javascript files are important. In the above codes, we assume that the HTML file, CSS file and Javascript file are in the same folder. If for example, the HTML file is in the folder /public while the CSS and Javascript files are in subfolder /public/codes, then the codes above should be modified as href="codes/style.css" and src="codes/javascript.js".

An example of a webpage that has external CSS codes and Javascripts are shown below in an iframe. To view the page on its own, click here. You can also click here to view the CSS code and the Javascript code as text files.

Using external files for CSS and Javascripts have two major advantages as oppose to placing them in the header section:

  1. Websites that are made-up of several pages can all call a single CSS file (and Javascript file too if used in several pages) that determines their general appearance. The appearance of the website will be consistent across several pages. If there is anything that you need to change in the website (let's say the format of header tag h1), you need to edit only one file, and that change will reflect on all webpages.
  2. One of the excellent on-page SEO techniques is putting as much readable content as possible near the top part of the HTML code. That way, search engine spiders can easily find words that they can index. The job of search engine spiders will be much more difficult if they have to dig through several lines of CSS codes and Javascripts before they can find a readable content.

Posted by Greten on October 31, 2008 under Cascading Stylesheet (CSS), Hypertext Mark-up Language (HTML), Javascript, Search Engine Optimization (SEO)

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati

Related Posts

You might also be interested (randomly generated):

Read Comments

  1. Posted by Matt Holmes on 02.28.10 10:22 pm

    well written, clearly explained. Question: and if the external css, loaded via javascript, is not mine, but owned by another site (a widget), and if that css conflicts with my own and messes up the formatting of my own page, how might I be able to isolate it so that the external css only affects one area? thanks!

  2. Posted by Greten on 03.05.10 1:44 am

    I’m not sure how could that happen Matt as I never encountered such incident. If you know how to program Javascript then you should be able to find it out. Perhaps you need to show us the script.

Post Comments

Please double check your comment before clicking the "Post" button. Once you clicked it, there will be no way for you to edit your comment.





* Required. Your email will never be displayed in public.