How to Use external CSS for your web pages

Rate: (1 Ratings)

CSS ( Cascading Style Sheets ), are not new. But to many they are a new way of designing web sites, to allow for seperation of design & content. Attaching and external CSS file to each page of you site will allow you to make site wide changes by modifying only 1 file.

Flag Article

Instructions

Difficulty: Easy

Things You’ll Need:

Assumption: You already have a web site on a hosting server.
Baisc text editor or some type of design software

Step1

Create your CSS file with the text editor, or copy and paste the CSS from an existing page into a file by itself.

Step2

Save the <style> information as it's own file ( style.css ) or any other name you choose.

Step3

Inside the <head> </head> tags on the page enter:
<link href="style.css" rel="stylesheet" type="text/css">

Step4

If the CSS file is inside it's own folder ( I would suggest this ), make sure the line:

<link href="style.css" rel="stylesheet" type="text/css">

Includes the full path to the file.

Step5

Save the web page file as normal.

Tips & Warnings

I would suggest to create a folder on the main root of the site for the css file, or place the css file in the same directory as your images.
Any reference to an image in the css file must contain the full path to the image in relation to the CSS file.
You may attach multiple CSS files to a single web page. This can be useful for maintenance later on.
Suggest creating a central directory for all images related to the design of the site. Place the css file in the same folder, and then you do not have to reference a path.
Make sure all references to images in the css contain the path to the image relative to the css file itself.