Linking to an External Style Sheet

gistfile1.html

<h3>Overview</h3>
<p>Up to this point in the course you have learned how to add style to your
  web pages by inserting a style section using the <strong>&lt;style&gt;</strong> element. But what
  if you want to change the look of the entire website? If your entire website
  was built with style definitions inside each page, that would mean going back
  into each page individually and changing the style. Fortunately, CSS provides
  a means of using an external style sheet to control the presentation of a large
  set of web pages. With an external style sheet, if you want to change the font
  style (or any other style definition) across an entire site, you only have
  to change it in one place. </p>

<h3>Learner Outcomes</h3>
<P>At the completion of this exercise:</P>
<ul>
<li>you will have created an external style sheet, and linked to it from within your web pages</li>
</ul>

<h3>Activities</h3>
<ol>
    <li>Create an external style sheet file. This file should consist of all styles
	    that you want to apply across your entire website. The contents of the
	    file is the same as the contents of the <strong>&lt;style&gt;</strong> section you've created
	    within your web pages. The only difference is that the opening and closing
	    <strong>&lt;style&gt;</strong> element is omitted. </li>
	<li>Save your style sheet file in the <em>style</em> subfolder 
that you created in <a href="../../unit2/module1/lesson1.htm">the 
Pre-Coding lesson</a>. Name the file anything you like, but give it a 
.css extension (for example, &quot;mystyle.css&quot;)</li>
    <li>Within the HEAD section of each of the web pages in your website,
              add a link to the external style sheet. Here's the tag, assuming
              your style sheet is named <em>mystyle.css</em>: <br>
              <br>
              <strong>&lt;link type=&quot;text/css&quot; 
rel=&quot;stylesheet&quot; href=&quot;<em>style/mystyle.css</em>&quot; 
/&gt;</strong><br>
    </li>
    <li>While adding the above tag to each of your web pages, 
you can probably delete the &lt;style&gt; section from each page, if one 
exists. This assumes that you want any styles that are defined in your new 
style sheet file to apply to each of your web pages. If you have styles 
that are unique to a particular page, and will be only used on that 
page, it's ok to continue defining that style within a &lt;style&gt; 
section on the page itself. However, even in this case it's usually  
best to move all styles into the external CSS file so you only have one 
place to go if you need to edit styles on any of your web pages.</li>
            <li>Play around with your external style sheet to see how your changes
              affect the look of your site. </li>
</ol>

<h3>Resources/Online documents</h3>
<ul> 
  <li>Web Design Group (WDG):
   <a href="http://www.htmlhelp.com/reference/css/style-html.html">Linking Style Sheets to HTML</a></li>
</ul>

<h3>All done?</h3>
<p>Show your instructor your completed website, showing how you're controlling
  the site's presentation with your external style sheet. Then proceed to 
   <a href="lesson2.htm">Lesson 2</a></p>