Skip to main content

Defining a Linked Style Sheet

Inline and Embedded Style Sheets are associated with a single Web page and any of these styles that are required elsewhere in the Web site will have to be copied into new Web pages. The versatility and flexibility of style sheets are in using Linked Style Sheets where all the style settings are typed into an external files and linked into the various Web pages. The external file is a simple text file with a file extension ".css", for example mystylesheet.css, and only contains the selectors and their associated properties and values - you do not include the <style> tags. For example, mystylesheet.css could contain the following style settings:

h2 {font-family:Arial; font-style:italic; color:blue}
p {font-family:Arial; color:black}
p em {background:red; color:white; font-style:italic}
p.blue {font-family:Arial; color:blue}
p.red {font-family:Arial; color:red}

To use this Style Sheet a "link" statement must appears in the head of every Web page that will be using these styles. The link tag is as follows:

<link rel="stylesheet" href="mystylesheet.css" type="text/css"> to reference style in mystylesheets.css.

For well designed Web sites the Linked Style Sheet is the most appropriate.