Web Design Resources
Cascading Style Sheets
Overview
Back in the old days, when Internet technology was just evolving, a HTML coder had no option but to keep the style and content of the web site page together. This made life difficult for them when there were changes to be made in the web site design. For example, if the client wanted to change the color of the heading, the HTML coder had to physically search and replace the heading color on all individual pages. Heaven forbid if the website had hundreds of pages! The introduction of Cascading Style Sheets, or CSS as they are called, changed all this.
Simply put, what CSS does is separate the website content from the way it is presented (the design elements and style). Thus, CSS is designed to separate the text control from the text.
CSS is an initiative of the World Wide Web Consortium (W3C). This implies that all the members of W3C (which includes all the main browser creators) support CSS. The first draft of the CSS was called as CSS1. It was introduced in 1996. There was a major update in 1998 called CSS 2, which introduced further norms for a large variety of devices like the mobile phone, PDA, etc.
As of writing this article (March 2010), all the major browsers like IE, Firefox, Opera and Safari support CSS.
CSS - Working
As mentioned earlier, the main concept behind separating the content from its presentation is to allow website developers to change the website's appearance whenever they like without needing to redo the content structure. This is done by creating a style sheet, which has the extension .css
The beauty of styles sheets is that a set of web pages may use a common style sheet. Thus style sheets cascade and decisions need to be made as to which style sheet is in control when there is a conflict. To this end, style sheets work on rules. A style sheet rule consists of two parts: a selector that defines which HTML elements are controlled by the rule and a declaration that says what the required effect will be.
There are four ways of linking a style sheet to an HTML page:
Back in the old days, when Internet technology was just evolving, a HTML coder had no option but to keep the style and content of the web site page together. This made life difficult for them when there were changes to be made in the web site design. For example, if the client wanted to change the color of the heading, the HTML coder had to physically search and replace the heading color on all individual pages. Heaven forbid if the website had hundreds of pages! The introduction of Cascading Style Sheets, or CSS as they are called, changed all this.
Simply put, what CSS does is separate the website content from the way it is presented (the design elements and style). Thus, CSS is designed to separate the text control from the text.
CSS is an initiative of the World Wide Web Consortium (W3C). This implies that all the members of W3C (which includes all the main browser creators) support CSS. The first draft of the CSS was called as CSS1. It was introduced in 1996. There was a major update in 1998 called CSS 2, which introduced further norms for a large variety of devices like the mobile phone, PDA, etc.
As of writing this article (March 2010), all the major browsers like IE, Firefox, Opera and Safari support CSS.
CSS - Working
As mentioned earlier, the main concept behind separating the content from its presentation is to allow website developers to change the website's appearance whenever they like without needing to redo the content structure. This is done by creating a style sheet, which has the extension .css
The beauty of styles sheets is that a set of web pages may use a common style sheet. Thus style sheets cascade and decisions need to be made as to which style sheet is in control when there is a conflict. To this end, style sheets work on rules. A style sheet rule consists of two parts: a selector that defines which HTML elements are controlled by the rule and a declaration that says what the required effect will be.
There are four ways of linking a style sheet to an HTML page:
- By defining a link from the HTML page to the style sheet (normally stored in a .css file on the root folder.) This allows web site designers to have a single style sheet that changes the appearance of many web pages.
- By specifying an HTML style element in the 'Head' section of the website page. This allows you to define the appearance of a single page.
- By adding inline styles to specific elements in the HTML file by the 'style' attribute. This allows web designers to change a single element or set of elements. Though valid, it is not advisable to use this method as it negates some of the advantages of having style sheets. It effectively over-rides the overall style for the page.
- By importing a style sheet stored externally into the current style. The style element for the page can consist of a set of imports plus some rules specific to the page.