Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

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:
• Specifying Color
• Use Image for List Item Bullets
• Set an Element's Visibility
• Set the Text Alignment
• Define CSS Rollover Effects
• Set an Element's Overflow
• Set The Cursor Style
• Set the Border Style
• Set the Font Style
• Set an Element's Padding

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-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268