External style sample

Return

The external file, called external.css in this example, contains exactly the same contents that were within the <style> container in the internal style example:

p
  {
  background-color:  lime;
  color:             navy;
  }

The contents of the head is changed to provide a link to the external.css file:

<head>
<!-- other stuff omitted; just the link element is shown -->
  <link rel="stylesheet"
        type="text/css" 
        href="external.css"
        />
</head>

rel="stylesheet" means this is a link to a style file
type="text/css" means the file contains styles
href="external.css" means the file is named external.css, and it is in the same directory with the html page.

This is the first paragraph.

This is the second paragraph.

Return