Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials

Web-Development-Tutorials.com

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.

CSS code

body
{
background-color: blue
}
p
{
color: red
}

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.

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<p>
The text in this paragraph will be a red font and the background will be blue.
</p>
</body>
</html>

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.

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details