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 thestyle
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 closingtitle
tag that points toStyleSheet.css
.
<link> attributes include:<link href="StyleSheet.css" rel="stylesheet">
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:
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet (this article)
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3