External Cascading Style Sheets

- CSS External Style Sheet Page Contents

 

CSS External Style Sheet Introduction

Where to place a CSS External Style Sheet Code

How to Link to an External Style Sheet

Writing the CSS External Style Sheet Code

CSS Introduction

The best & most popular method for Multi page sites that have the same styling

The very big advantage of using External Style Sheet(s) is that the css rules are placed into a separate file, and these rules will apply to every page that you refer to this file.

Where to place External Style Sheet Code

• The CSS is written in a seperate CSS text document that has an extention of .css

External Style Sheets

• Located In a seperate CSS document(file) These are called "" and have a .css extension to the filename
• Your HTML pages can be linked to multiple External Style Sheets either your own or third party.
• The best method for muti page web sites which require a consistant look is to place the Cascading Style Sheets code is in a seperate CSS document(file)
• Normally every page on the web site links to this file
• To use the "External Style Sheet(s)" Every page you wish to style with The "External Style Sheet(s) styles is linked to the "External Style Sheet(s) within the head section of the page

This tutorial External Style Sheets location

In

How to Link to an External Style Sheet

The reference is made in the HEAD section, normally just before the end </head> tag and follows the following format:

<LINK rel="STYLESHEET" href="path/name-of-file.css">

If you are going to save your file my.css into the same directory that contains your web pages you do not have to worry about the path/ portion.

If the file is in a different directory, then you would have to use either

• One or more ../
• directory(s)
• A combination of the above

 

Writing the CSS External Style Sheet Rules

Style Rules are made up from a Selector and Declaration(s) as follows

 Selector {Property 1: value; Property 2: value; and so on;}

To make it easier to read, you can write the rules as follows:

 Selector { Property 1: value ; Property 2: value ; and so on; }

• Where Selector is an HTML element such as H1 or P.
• Where declaration(s) are the properties and values.
  • Properties indicate the aspect of a tags display, such as background-color:
  • and value specifies the actual property such as red for that property.
  • Note the colon : between the property and value.
  • If more than 1 declaration (property: value) is required they are seperated with a semi colon ;
• Declarations are enclosed in curly brackets { }

This may seem confusing but the example in the next step should help to make it clear.

Step 1. Enter the Rules

Using Notepad or a Style sheet editor, enter the following. You can copy and paste this code if you prefer.

Pay particular attention to the puntuation i.e. : ; , - { } make sure they are used in the correct place. A mistake in the puntuation is hard to spot and can lead to results that are difficult to understand.

h1 { font-family: Arial, helvetica, sans-serif; font-size: 14px; font-weight: bold; color: red; text-align: center; background-color: blue; }