1. Home
  2. How-to Articles
  3. How to Create a CSS External Style Sheet

How to Create a CSS External Style Sheet

  • google plus

In Brief...

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.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

  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 type="text/css">
    h1  {
       text-align: center;
       font-size: 12pt;
       color: #000099;
       margin-bottom: 5px;
       text-decoration: underline;
    }
    
    table {
       margin: 5px;
       width: 290px;
    }
    
    th {
       padding: 3px;
    }
    
    td {
       padding-left: 8px;
       padding-right: 8px;
       border: 1px solid #990000;
       background-color: #ffffcc;
    }
    
    #trHeader {
       text-decoration: underline;
       color: #990000;
    }
    
    .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: 12pt;
        color: #000099;
        margin-bottom: 5px;
        text-decoration: underline;
    }
  
    table {
        margin: 5px;
        width: 290px;
    }
  
    th {
        padding: 3px;
    }
  
    td {
        padding-left: 8px;
        padding-right: 8px;
        border: 1px solid #990000;
        background-color: #ffffcc;
    }

    #trHeader {
        text-decoration: underline;
        color: #990000;
    }
  
    .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" type="text/css">
    <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
  6. Open the HTML file in a browser. It should look like this:
    External Style Sheets

Related Training

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss