Using External CSS

Published on March 4th, 2008

Author: Kyle "KP" Perkins, Shadow Development

Synopsis

Ever ask yourself the question, "Is there a method I can use so I won't have to keep repeating the same CSS over and over again?" Well, for a simple answer: there is. This is called Using External CSS Files, and the method itself is actually quite simple.

Covering the Basics

You may want to set up your page with internal CSS (CSS within the page), but in this case, don't. Instead of using <style type='text/css'>...</style>, you will want to replace that with <link href='your-file.css' type='text/css' rel='stylesheet'/>, which is basically a one-liner telling the page to reference the CSS from an external file. There is also another added benefit to this, which is that multiple pages can reference the same CSS file. Take a look at the example below:

<html>
	<head>
		<title>Using Internal CSS</title>
		<style type='text/css'>
		body, html{
			margin: 0;
			padding: 0;
		}
		</style>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

is the same as

HTML File: index.html

<html>
	<head>
		<title>Using External CSS</title>
		<link href='external.css' type='text/css' rel='stylesheet'>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

CSS File: external.css

body, html{
	margin: 0;
	padding: 0;
}

This replaces the standard internal CSS and places that exact CSS into an external file, meanwhile replacing the line within the web file with the link line that we talked about. If you include this link line in all of your web files, then all of those web files can refernece the same CSS file. Best part of all: instead of having to copy counltess CSS lines and paste them into multiple web files, all you have to do is copy and paste this one line and all of your worries are over. This works for any set of tags, p, body, div, table, img, span, etc. Anything that you do in CSS will work the same way in an external file.

Using External Print Stylesheets

If you have been doing your research and looking at the code of other pages, you may notice something similar to the line below:

<link href='external.css' type='text/css' rel='stylesheet'/>
<link href='print.css' type='text/css' rel='stylesheet' media='print'/>

No, this won't make the page confused, although it will clear up some confusion when your user tries to print your page. The primary reason for the link line with the print media type is so that you can set up your page for being printer-friendly.

Why set up your pages for being printer-friendly? For image-dependant sites or flash sites, having a printer-friendly page is extremely important. Also, it lets your user save a lot of their ink/toner. You can set certain things to be invisible, display differently, even set different fonts. For example: if your page is in 8pt font with Arial, you can have your user print in 12pt font with Times New Roman. This is also good for setting printing widths (basically, if your user has a very wide screen, things will print differently than they are seen. Think about it: most printers print at a maximum of 800 pixels. If your content is wider than 800px, then most likely anything past the 800px mark will not be printed.)

Side Notes: