How to Create a CSS External Style Sheet

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.

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>

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).

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;
}

Remove the style block from the HTML file.
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:
href points to the location of the external style sheet
rel must be set to "stylesheet" for linking style sheets
type must be set to "text/css" for linking to cascading style sheets
Open the HTML file in a browser. It should look like this:

Written by Nat Dunn. Follow Nat on Twitter.

`href`	points to the location of the external style sheet
`rel`	must be set to "stylesheet" for linking style sheets
`type`	must be set to "text/css" for linking to cascading style sheets

How to Create a CSS External Style Sheet

Related Articles