Use an External Style Sheet
By Stephen Bucaro
One of the biggest advantage of CSS is that you can define styles for your entire website, in one
place, an external style sheet that you can link to every webpage. The syntax for an external style
sheet is exactly the same as it is for an embedded style block, except you leave out the opening and
closing style tags. You don't need the style tags because when you save the file with the .css extension,
the browser will know it contains style code.
body { font-family: helvetica; margin:20px }
h1 { font-family: arial; font-weight: bold }
h2 { font-family: courier; font-size: 20pt; }
p { margin-left: 30px; margin-right:30px; }
Example of style rules that might be defined in an external style sheet. Save the file with the
extension .css, for example mystyles.css. Then in the <head> section of your webpage add
the tag for a link to the style sheet as shown below.
<link rel="stylesheet" type="text/css" href="mystyles.css">
In the tag above, the "rel" attribute defines the relationship with the linked file; it's a style sheet.
The "type" attribute indicates that the file contains text that is CSS code. The "href" atribute contains
the URL, or path to the style sheet. If you save the webpage in the same folder as the style sheet, all
that is needed here is the name of the file.
That's all there is to it. Using an external style sheet is extremely powerful when you use a template
for every page of your website and you place the link to the style sheet in the template. When you need
to change a style, you need only to edit the one style sheet to change the style accross your entire website.
More CSS Quick Reference:
• Set the box-sizing Property
• Set the Text Decoration
• Set the Word Spacing
• Set an Element's Overflow
• Set the border-collapse
• Use Image for List Item Bullets
• Descendant Selector
• Set an Element's Float
• Indent the First Line of Text
• Set the Text Alignment
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
