27
CSS Stylesheets
A cascading style sheet or CSS allows you to separate the presentation and content of your web sites, with your content contained in your (X)HTML files and your presentation defined in a CSS. The CSS can be an internal stylesheet defined in the head element of your html file, an external file referenced in the head element, or an inline style defined in an html element.
The Internal Stylesheet
If you use a CSS style in the header element you need to enclose it in a style element, as in:
<head>
<title>Your Page Title<title>
<style type="text/css">
CSS Content
</style>
</head>
The CSS styles defined in the head element will be applied only to that page, which means you need to define CSS styles for each page, and you need to update each page when you change your design.
The External Stylesheet
An external CSS stylesheet exists in a separate .css file and is referenced by a link in the header element, as in:
<head>
<title>Your Page Title<title>
<link rel="stylesheet" type="text/css" href="path to stylesheet.css" >
</head>
or it can be imported into the page in the header element, as in:
<head>
<title>Your Page Title<title>
<style type="text/css">@import url(path to stylesheet.css)</style>
</head>
The external CSS stylesheet can also reference other external stylesheets by simply using @import "path to stylesheet.css". The styles from the imported stylesheet will be inserted where the @import "path to stylesheet.css" line is located. This is important to remember as subsequent styles that use the same selector name or the same class name will override previously declared styles.
The major advantage of having an external .css stylesheet lies in the fact that you only need to make changes to the external CSS stylesheet when you change your web site design and those changes will be implemented on all pages that reference the external stylesheet. This improves web site maintenance and flexibility, while reducing html file size and reducing bandwith usage.
Inline Styles
Finally, inline styles are placed directly in the element that you want to style using the CSS syntax property: value. For example, <div style="background-color: red;"< will give the div a red background color. This defeats the purpose of CSS and makes the maintenance of a web site more complicated.
Cascading Stylesheets
It is possible to use all three type of CSS stylesheets on one page, and you can reference more than one stylesheet in your head element. In this event the various CSS styles and stylesheets will cascade into one, with the styles in CSS stylesheet that is loaded last overriding the styles is CSS stylesheet that were loaded first. As the content of an html file, and the content of a .css file, is read and loaded sequentially from top to bottom, inline styles will override CSS stylesheets defined or linked in the head element; and if the reference to the external CSS stylesheet in the head element is placed below the internal stylesheet, the external stylesheet will override the internal style sheet. But this only applies to duplicate styles.
Browser Support
One major disadvantage of using CSS stylesheets is the varying support that the different browsers offer. Currently, the major browsers are Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Mozilla Firefox 2, Mozilla Firefox 3, Safari, Google Chrome, Opera 9.6 and Opera 10. Testing your web site design and layout against all these browsers can become tedious! More on browser quirks later.
Leave a reply