Categories
CSS Tutorials

Linking style sheets to a page

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

We have seen that to link a webpage to an external stylesheet, we use the <link> tag in the head section of the HTML page. The alternative to using a <link> tag is to use a CSS @import rule. This technique was frequently used in the past to hide styles from older browsers that didn’t support @import. All current browsers now support @import, so there’s no real advantage in using it to link a style sheet directly to a web page. However, we have included it here so you know what it’s for if you come across it in an existing site. The @import rule goes inside an HTML <style> block in the <head> of the page like this:

<style>
  @import url(css/basic.css);
</style>

The location of the style sheet is specified by putting it between the parentheses of url(). The path to the style sheet can optionally be enclosed in quotes. The main purpose of @import is to import styles from one style sheet into another. This can be useful when you organize your rules in several style sheets. Instead of linking each style sheet separately to your web pages, you can link just one, which then imports the rules from the other style sheets. If you do this, the @import rule must come before any other style rules in the external style sheet.

Also, because it’s in an external style sheet. You can link more than one style sheet to a page.

The browser caches the style sheets, so they need to be downloaded only once regardless of how many pages are viewed in your site. This speeds up the display of subsequent pages and reduces bandwidth usage.