The authors of CSS recognized that HTML-template creation is a common need. As such, the W3C body made recommendations that allow external style sheets to be included in a document from within HTML or XHTML by use of the element or from within a style sheet itself using the @import rule. External style sheets are the preferred method of CSS inclusion in a web document. External style sheets can be cached by the user’s browser. This frees the user, who no longer needs to download the web page or website’s style sheet on every page request. This also ensures that documents load very quickly, which is another feature of CSS that conserves expensive bandwidth.
Here’s a demonstration of the element method:
The following attributes are required to use the element for linking to a CSS document:
- rel: Defines the relation between the external document and the calling document. In this case, the relation is that the external document is the style sheet for the calling document.
- href: Like the anchor tag, , href stands for hyperlink reference. It accepts an absolute or relative path to the style sheet document.
- type: Refers to the MIME type of the external file.
An absolute path means the complete path to the file. For instance, http://www.example.com is an absolute path. A relative path triggers the application to find the document relative to the requesting document. So if the example file’s URL is http://www.example.com/example.html and the CSS document is stored in the stylesheets directory as stylesheet.css, the relative path included in is stylesheets/ stylesheet.css and the absolute path to the document is http://www.example.com/stylesheets/stylesheet.css or /stylesheets/stylesheet.css.
A style sheet is really easy to set up