Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals
External Style Sheets Tutorial
External style sheets are best used when there is one style applied to many web pages. The style sheet code is placed in a separate file with a ".css" extension, similar to an HTML file. The external style sheet is then referenced to from the HTML files to which it applies by using a link to the CSS file, instead of using the style itself.
The CSS code wich is used to link to the external style sheet is
<link rel="stylesheet" type="text/css" href="test.css" />.
Creating a CSS File
To create a sample CSS file, simply open up notepad, or any other plain text editor and type the following CSS code. DO NOT add any HTML tags to the external style sheet.
Next, save the file with a ".css" extension. Save the CSS file and name it "test.css"
Now create an HTML file with the following code.
<link rel="stylesheet" type="text/css" href="test.css" />
The text in this paragraph will be a red font and the background will be blue.
Now save the HTML file as "example.htm" or "example.html". Next, open the "example.htm" file in your web browser. You have now made a web page that uses external style sheets.
Do NOT leave spaces between the property value and the units! If you use "margin-left: 10 px" instead of "margin-left: 10px" it will not work in Firefox/Mozilla or Netscape, only in Internet Explorer 6.