What's New :

Find latest news on web design, CSS, Web Accessibility, Web Usability, Browser Compatibility and Xhtml. Click on What's New section or Here

Information about

Cascading Style SheetsIs it time for CSS ?

1. What is CSS ?

In computing, CSS is a stylesheet language used to describe the presentation of a document written in a markup language.CSS, short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site designers, developers and users more control over how pages are displayed.

CSS is a language that works with HTML documents to define the way content is presented. The presentation is specified with styles that are placed directly into HTML elements, the head of the HTML document, or separate style sheets. It's most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C).

It provides designers with more powerful styling options while separating the content of web pages from their design. Every element type as well as every occurance of a specific element within that type can be declared an unique style, e.g. paddings, positioning, color or size.

A method of coding that allows users to define how certain HTML, DHTML, or XML structural elements, such as paragraphs and headings, should be displayed using style rules instead of additional markup. Cascading Style Sheets are a big breakthrough in Web design because they allow developers to control the style and layout of multiple Web pages all at once. With CSS, when you want to make a change, you simply change the style, and that element is updated automatically wherever it appears within the site.

They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did. CSS style sheets enable you to set a great number of formatting characteristics that were never possible before with any amount of effort. These include exacting typeface controls, letter and line spacing, margins and page borders, and expanded support for non-European languages and characters. Instead of:


<p><font color="#000000" size="3" face=" Arial, Helvetica, sans-serif">Sample content 

</font></p>

CSS content looks like this:

<p>Sample content </p>

Yet the two look similar when displayed, because the CSS file attached to the document is controlling the text. For the <p> tag it looks like this:

p {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #000;

}

For one paragraph, there is little difference. But when you use the p tag through a large site, the difference is dramatic. Suppose you have 15 pages, and decide that you made a mistake by using black text and want to change it back to red. Using HTML code, you would have a large job on your hands. If you are using CSS, you simply change the CSS file, and every page magically changes every single paragraph.

Now your CSS file looks like this:

p {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FF0000;

}

The real power, other than reducing the amount of code in each page dramatically, is the ability to change your mind because the control for the text and the text are in totally different places.

More about CSS....