Learning HTML by yourself

9 - External Linked Stylesheets

23/11/2011 19:05

Externally linked stylesheets allow you to use one stylesheet across your entire site. There are two ways to do this:

  1. linking 
    <link rel="stylesheet" type="text/css" href="styles.css">
  2. importing (Internet Explorer only) 
    <style type="text/css">
 @import URL (https://www.yoursite.com/styles.css);
 </style>

Advantages and Disadvantages of External Style Sheets

One of the best things about Cascading Style Sheets is that you can use them to keep your site consistent. The easiest way to do this is to link or import an external style sheet. If you use the same external style sheet for every page of your site, you can be sure that all the pages will have the same style.

Some of the advantages to using external style sheets are:

  • You can control the look and feel of several documents at once.
    This is especially useful if you work with a team of people to create your Web site. Many style rules can be difficult to remember, and while you might have a printed style guide, it is inefficient and tedious to be continuously flipping through it to determine if example text is to be written in 12 point Arial font, or 14 point courier.
     
  • You can create classes of styles that can then be used on many different HTML elements.
    If you often use a special Wingdings font to give emphasis to various things on your page, you can use the Wingdings class you set up in your style sheet to create them, rather than defining a specific style for each instance of the emphasis.
     
  • You can easily group your styles to be more efficient.
    All the grouping methods that are available to CSS can be used in external style sheets, and this provides you with more control and flexibility on your pages.

However, there are some good reasons for not using external style sheets:

  • External style sheets can increase the download time, if they are extremely large.
     
  • If you only have a small number of styles, they can increase the complexity of your page.
     
  • Like with table rendering, you have to wait until the entire style sheet is loaded before the page can display.

How to Create an External Style Sheet

External style sheets are created with a similar syntax to document level (in the <head>) style sheets. However, all you need to include are the selector and the declaration Just like in a document level style sheet, the syntax for a rule is:

selector {property : value;}

These rules are written to a text file with the extension .css. This isn't required, but it is a good habit to get into, so you can immediately recognize your style sheets in a directory listing.

Once you have a style sheet document, you need to link it to your Web pages. This can be done in two ways:

  1. Linking
    In order to link a style sheet, you use the HTML tag <link>. This has the attributes rel,type, and href. The rel attribute tells what you are linking (in this case a stylesheet), the type defines the MIME-Type for the browser, and the href is the path to the .css file. For example: 
    <link rel="stylesheet" type="text/css" href="styles.css">
  2. Importing
    You would use an imported style sheet within a document level style sheet, so that you can import the attributes of an external style sheet while not losing any document specific ones.This is currently only supported in Internet Explorer. You call it in a similar way to calling a linked style sheet, only it must be called within a document level style declaration. For example: 
    <style>
 @import URL (https://www.yoursite.com/styles.css);
 ... continue styles
 </style>

The fact that importing is only supported by Internet Explorer allows you to create multiple stylesheets that are browser independent, but without relying on DHTML and JavaScript to detect the browser.

Create three stylesheets:

  • a generic one that will cover most basic styles 
    generic.css
  • one for Internet Explorer 
    ie-styles.css
  • one for Netscape 
    ns-styles.css

In the head of your document load them in this order:

  1. The generic stylesheet 
    <link rel="stylesheet" type="text/css" href="generic.css">
  2. The Netscape stylesheet 
    <link rel="stylesheet" type="text/css" href="ns-styles.css">
  3. The IE stylesheet (using the import command) 
    <style type="text/css">
 @import URL (https://www.yoursite.com/ie-styles.css);
 </style>

Because of cascading, the IE stylesheet will "overwrite" style rules found in the Netscape stylesheet, when viewed in Internet Explorer. And Netscape won't load the imported stylesheet at all.

 

—————

Back

Contact

Painchaudhtml