Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Use an External Style Sheet

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 an Element's Visibility
• Use an External Style Sheet
• Set the Font Variant
• Set Text Justification
• Set List Bullets Position
• Set a Background Image
• Vertical Align an Element
• Set the Border Style
• CSS Units of Measurement
• Define CSS Rollover Effects

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268