External or Linked Style Sheets Characteristics

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

Steps to creating an External or Linked Style sheet:

  1.  Create a new text document
  2.  No tags/elements are included
  3.  Input the xHTML tags /selectors - h1
  4.  Enclose properties and values with curly brackets - h1 {color: red}
  5.  Define the properties for that tag /selector/ class
  6.  Separte multiple properties with a semi-colon ;
  7.  End each tag property and value with the }
  8.  Classes defined with a period first; IDs defined with a pound sign
  9.  Save the text file with the extension file.css
  10.  In the HEAD of each HTML document, place the Link tag:
    <link rel="stylesheet" type="text/css" href="mystyles.css">

Linked / External Style Sheet Format

h1 {font-family: serif;font-size: 16pt; color:blue; text-align:center}
p {font-size: 12pt; line-height:16pt}
p.two {font-size: 12pt; background:none}
a:link {font-size:14pt; font-family: Arial Black; color:red}
a:visited {font-size: 12pt; color:green; text-decoration:none}

Remember!
Don't confuse the colon(:) with the semi-colon (;) in the style definition.
Never use quotes in embedded or external style sheet definitions

Importing Style Sheets into the External Style Sheet

To import a style sheet, add the following statement in the external style sheet:

@import url(main.css)

Import Style Sheet using an embed style sheet

<style type="text/css">
@import url(main.css)
@import url(story.css)
</style>
Web Design with XHTML Part I
Doris Cuffey, Instructor