How to Create a CSS External Style Sheet

Written by Nat Dunn. Follow Nat on Twitter.

See CSS: Tips and Tricks for similar articles.

External style sheets are created in separate documents with a .css extension. An external style sheet is simply a listing of CSS rules. It cannot contain HTML tags. The <link> tag, which goes in the head of an HTML page, is used to link to an external style sheet. There is no limit to the number of external style sheets a single HTML page can use. Also, external style sheets can be combined with embedded style sheets. Follow these steps to create an external style sheet.

  1. Start with an HTML file that contains an embedded style sheet, such as this one. Copy this text and paste into a new HTML file. 
    <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Style Sheet</title>
<style>
  h1  {
    color: #009;
    font-size: 1em;
    margin-bottom: .3em;
    text-align: center;
    text-decoration: underline;
  }
  
  table {
    margin: .3em;
    width: 290px;
  }
  
  th {
    padding: .2em;
  }
  
  td {
    background-color: #ffc;
    border: 1px solid #900;
    padding-left: .5em;
    padding-right: .5em;
  }
  
  #trHeader {
    color: #900;
    text-decoration: underline;
  }
  
  .centerCell {
    text-align: center;
  }
</style>
</head>
<body>

<div>
<h1>All-time Home Run Record</h1>
<table>
  <tr id="trHeader">
    <th>Player</th>
    <th>Home Runs</th>
    <th>Team</th>
  </tr>
  <tr>
    <td>Barry Bonds</td>
    <td class="centerCell">762</td>
    <td>Giants</td>
  </tr>
  <tr>
    <td>Hank Aaron</td>
    <td class="centerCell">755</td>
    <td>Braves</td>
  </tr>
  <tr>
    <td>Babe Ruth</td>
    <td class="centerCell">714</td>
    <td>Yankees</td>
  </tr>
  <tr>
    <td>Willie Mays</td>
    <td class="centerCell">660</td>
    <td>Giants</td>
  </tr>
</table>
</div>
</body>
</html>
  2. Create a new file and save it as StyleSheet.css in the same directory. (You can give the file any name as long as it has the .css extension).
  3. Move all the CSS rules from the HTML file to the StyleSheet.css file. Don't copy the style tags. 
    h1 {
  text-align: center;
  font-size: 1em;
  color: #009;
  margin-bottom: .3em;
  text-decoration: underline;
}

table {
  margin: .3em;
  width: 290px;
}

th {
  padding: .2em;
}

td {
  padding-left: .5em;
  padding-right: .5em;
  border: 1px solid #900;
  background-color: #ffc;
}

#trHeader {
  text-decoration: underline;
  color: #900;
}

.centerCell {
  text-align: center;
}
  4. Remove the style block from the HTML file.
  5. In the HTML file, add a link tag after the closing title tag that points to StyleSheet.css. 
    <link href="StyleSheet.css" rel="stylesheet">
    <link> attributes include:
    hrefpoints to the location of the external style sheet
    relmust be set to "stylesheet" for linking style sheets
    typemust be set to "text/css" for linking to cascading style sheets
  6. Open the HTML file in a browser. It should look like this:External Style Sheets