| |
Cascading Style Sheets
What is CSS?
--------------
| CSS, Concept, Why
use it?, Why not to use it? |
CSS is an abbreviation for Cascading Style Sheets. Style sheets are simply text files (.css ), composed of lines of code that tell browsers how to display an HTML page. They give the designer more control over the appearance of a webpage by allowing to specifically define styles for elements, such as fonts, on the page. By using CSS one could separate HTML content from its appearance, distinguishing style from structure.
One way to think of CSS is as a word processing tool for the web.
For example, if you were writing a paper in a word program, you may have a title page, an outline page, and then the pages for the rest of your paper. For your title page, you set the text of your paper's title to be bold, Times New Roman, and have a font-size of 18pt. On your outline page, you set the text to be normal with a font-size of 12pt. In the rest of your paper, for all of the topic headings indicated in your outline, you set that text to be bold and have a font-size of 14pt. For the text in your paragraphs, you set them to be normal with a font size of 12pt. Within your paper, there are quotes that you want to indent and have in different fonts, etc.
Bold, font, and font-size are all properties of text or Type. By specifying how each type element in your paper appears, what you are essentially doing is creating styles.
In CSS, a style is a grouping of different properties given a common name. If you were to re-create this paper for the web, you could define styles for the text on your title page, outline page, and so on. For our example, you could create a style called topicHeadings and specify its font properties to be bold and have a font-size of 14pt. A specification of a property is known as a rule. With a style established, whenever you type in text for a topic heading, you can set it to the topicHeading style and all of that style's properties are applied to the selected text in one step. Later, if you decide to change the font color or some other aspect of the style, you can just change its definition or specification in the style sheet and the appearance of all text marked with that style will change throughout the webpage or website.
Style sheets can exist internally (embedded or inline) within the HTML or externally, attached as a separate file. An internal style sheet only affects the HTML document in which it is embedded. An external style sheet, on the other hand, is independent and can be attached or linked to many HTML documents. With external style sheets, one can change the entire appearance of a website by altering just one file.
Why are style sheets called 'cascading'? As already indicated, a designer can create a style sheet to tell a browser how she prefers a webpage displayed, but browsers and even the users viewing the webpage may apply additional style sheets of their own. Since several style sheets may be affecting the appearance of an HTML page, there must be an order in which style sheets are applied. The style sheets are applied in a 'cascading' order with the designer's style sheet having the strongest claim, followed by the user's, and then the browser's. If there are conflicts between the designer's and user's style sheets, the browser's would resolve it. Although, in the end, the user can always override any other style sheet if she wishes.
The World Wide Web Consortium (W3C), an organization of experts in web-related fields, issued two style sheet recommendations, web standards: CSS1 and CSS2. CSS 1, published in 1996, contains specifications for around 50 formatting properties, i.e. color, used in screen-based presentations. CSS2, published in 1998, built on CSS1. It contains all the properties in CSS1, along with around 70 more properties. These newer properties include some that pertain to aural presentations, documents that are read to a user, an alternative for the visually impaired. CSS provides more precise formatting than HTML for sophisticated layout and design.
One of the mains reasons why CSS was created was to separate HTML content from its appearance, or style from structure. By doing so, one could effectively have just one file control the appearance of an entire website. This saves time and allows for easier site maintenance. For example, if one wanted to change the font style of all the links in a website from 'Verdana' to 'Courier', instead of going through every HTML page and changing all the font tags, one could go to the style sheet file and change the font of the links just once. Since there wouldn't be as much to change, the possibility of introducing errors into the website also goes down, saving even more time. As a separate file, a style sheet can be readily modified for different types of browsers and devices, further extending web accessibility to all types of users.
|
Advantages of CSS:
|
Although CSS standards were issued by the World Wide Web Consortium, there is still inconsistent browser support. Support of CSS style sheets, beginning in Netscape Navigator 4.0x and Internet Explorer 3, varies widely among browsers and among different versions of the same browser. The newer versions of browsers tend to offer better support than older ones.
Since CSS1 was published earlier, it is extensively supported in Netscape Navigator 6, and acceptable in Internet Explorer versions 4.5 for Macintosh and IE5 onwards for Windows. Opera 3.6 for Windows has very good support for CSS1, and recent versions of this browser have even better support.
Support for CSS2, published two years later, is poorer. It is nearly nonexistent in Netscape Navigator 4.0x and very limited in Internet Explorer 4.5. There is a bit more support for CSS2 in Internet Explorer 5 (IE5) for Macintosh and IE5 and IE6 for Windows. Netscape 6 and Opera 5 both have substantial support for CSS2.
|
To see which CSS properties are supported in which browsers, check these CSS Browser Support charts: |
Depending on your intended audience, browser support can become a real issue. Ideally, you should develop your website to reach the largest audience including those still using "pre-CSS" browsers. For this reason, it may not be appropriate to use CSS on your websites.
Trying to make a style sheet that works in all major browsers can be a time consuming process of trial and error, requiring a larger initial time commitment to test that the HTML document appears relatively correct in different browsers. Even after all that frustration, the webpage may not look perfect in all browsers. To check the syntax, grammar, and possible bugs in your CSS files, you should validate them.
|
Disadvantages of CSS:
|