Including/Linking Cascading Style Sheets
A Cascading Style Sheet provides formatting information to HTML/XHTML elements. Styles can be called from an external file, internally or inline. This article describes the various methods of including style definitions in your documents.
External Style Sheet
The <link> tag placed within the documents header specifies the location of an external style sheet. An external style sheet can be used to define styles for an entire site from one location allowing changes to be made centrally. The users browser will normally cache the style sheet saving bandwidth when navigating around pages that use the same style sheet. Style sheets are saved with a .css extension.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. A better alternative would be to have another external file with the unique styles defined and externally linked.
Some older browsers do not support styles and will ignore the <style> tag therefore the content of the <style> tag will be displayed on the page. It is recommended to hide it in a HTML comment to prevent older browsers from displaying the content.
Inline Styles
This method should only be used in exceptional circumstances to stop the mixing of content and presentation elements. To use inline styles you use the style attribute in the required tag. The style attribute can contain any CSS property. In the example code below the paragraph text is set to grey.
Multiple Style Sheets
Combinations of the above methods can be used with priority given to the cascade order. Styles are cascaded top down so an inline style is applied with higher priority than an external file style definition. In the example code if the external or imported style sheet defines paragraph text as red, the internal style sheet contradicts this style and states paragraph text should be blue thereby outputting any paragraph on the page in blue text. However the paragraph in this document has inline style applied that defines the text colour as green.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Page Title</title>
<link rel=“stylesheet” type=“text/css” href=“style.css” />
<link rel=“alternate stylesheet” title=“Alternative” href=“alternative.css” />
<!—[if lte IE 6]><style type=“text/css”>@import “/directory/ie6.css”;</style><![endif]—>
<style type=“text/css”>
<!—
@import url(domain.com/directory/import.css);
p {color: #0000FF;}
h1 {margin-left: 20px;}
—>
</style>
<style type=“text/css”>@import “style.css”;</style>
</head>
<body>
<p style=“color: #00FF00;”>Styled paragraph text.</p>
</body>
</html>
Advanced use of Style Sheets
A style sheet can be imported with the @import statement. This statement may be used in a CSS file or inside the <style> element. This method can be used to exclude style definitions not supported by the latest browsers but allow basic styles information to be applied.
Note: Other CSS rules may still be included in the <style> element, but that all @import statements must occur at the start of the style sheet.
Imported style sheets allow modularity. In the example code below we define styles to be used only by Internet Explorer later then version 6. By importing this style sheet a Mozilla based browser does not load these specific styles reducing the page fetch overhead. Different versions of the import rule have varying levels of support from older browsers. @import “style.css”; is hidden from nearly all older v4 browsers whereas @import url(‘style.css’); can be understood by Internet Explorer 4 but not Netscape Navigator 4.
Alternative Style Sheets
When a document is initially loaded, the preferred style sheets are applied to the document. The alternate style sheets can then be selected from the browser.
Note: Mozilla provides a menu to select the style sheet under the view menu item. But Microsoft IE does not support this feature. So we have our alternative style sheets, and no way to access them in IE. JavaScript can be used to include a selector within the document as described in Paul Sowdens article on ALA.
This article was posted on 16 January 2009 in CSS
What you have had to say about all this...
It is a very cool blog. Thank you for your posting.
- PitterThat's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.
comments