InfoMedia Inc.

What is CSS?

CSS stands for Cascading Style Sheets.
Styles define how to display HTML and XML elements.
Styles are normally stored in style sheets.
External style sheets can save you a lot of work.
External style sheets are stored in CSS files.
A simple syntax for assigning styles to elements that contain displayed text.
A technique for insuring standardized formatting of specific elements.
A technique for isolating text formatting when converting from XML to HTML.

Benefits:

Application Development

Allows page design specialists to focus on style issues without interfering with application developers.
Removes the need for tools that generate HTML to worry about formatting details handled by external style sheets.

Application Maintenance

Simplifies maintenance changes by separating data formatting from data logic.
Centralizes style definitions for ease of update and maintenance.

How CSS Works

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table >, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers—Netscape and Internet Explorer—continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) created styles for use with HTML 4.0.

Both Netscape and Internet Explorer support Cascading Style Sheets.

Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in files external to your HTML documents. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing a single CSS document.

CSS allows you to control the style and layout of multiple Web pages all at once. You can define a style for each HTML element and apply it to as many Web pages as needed. To make a global change, simply change the style, and all elements in the Web are updated automatically.

Why Cascading?

Style Sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external Style Sheets can be referenced inside a single HTML document.

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking all the styles that apply to a document will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

Browser default
External Style Sheet
Internal Style Sheet (inside the <head> tag)
Inline Style (inside HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).