Purpose of CSS

The purpose of CSS is to provide Web developers with a standard way to define, apply, and manage sets of style characteristics. CSS provides these capabilities through a technical model based on a hierarchical scope of effect, the separation of style from content, and a well-defined set of published standards. This section touches on each of these three topics in turn, focusing on how CSS can help the Web developer create maintainable, reusable code.

Cascading

The "cascading" in Cascading Style Sheets refers to how property values are applied in the context of the parent/child hierarchy of the Web document. Child elements either inherit or override property values bound to their parent elements.
A style sheet is the encapsulation of style rules in a centralized location, either in the head section of the HTML document or in a separate linked file. The Web browser reads these styles and applies the specified formatting rules before displaying the content.
For most styles, if a value for a style property has not been specified for a child element but has been specified for its parent element, then the parent's value is used to display the element. On the other hand, if the child element does specify a new value for a style property also specified by the parent, the browser uses the child's value to display the element.
In general, styles that bind properties to elements that are more specific override those bound to elements that are more general. Properties that are bound to classes—otherwise arbitrary elements that share a common value for their class attribute—override those bound to element types, and style properties linked to IDs override both. If the developer defines different values for the same property at the same level in the scope hierarchy, the last style specified applies.
For example, a Web developer might specify a particular font family as the default for all textual elements in the page using the following CSS code:

<style>
 body {
  font-family : Verdana;
 }
</style>

In the absence of any other instructions, the browser will display all textual elements using the Verdana font. However, the Web developer might want to display headings using an alternative font. The following code illustrates binding the Verdana font family to all textual element in the document but overriding them with the Impact font family for heading elements:

<style>
 body {
  font-family : Verdana;
 }
 H1, H2, H3, H4, H5, H6 {
  font-family : Impact;
 }
</style>

Now the browser will display all heading elements using the Impact font, while other elements in the Web document will continue to be displayed using Verdana.
Next, suppose that the Web developer wants to emphasize portions of the document content by displaying them in an even heavier font and using red text. To do so, the developer can bind a style to a class, which will override the style bound as the default as well as the style bound to the element, as shown in the following code:

<style>
 body {
  font-family : Verdana;
 }
 H1, H2, H3, H4, H5, H6 {
  font-family : Impact;
 }
 .Important {
  font-family : Arial Black;
  color    : Red;
 }
</style>

Now heading elements will be displayed using the Impact font, while other elements will be displayed using Verdana. However, document elements of any type that contain a class attribute with the value Important will be displayed using the Arial Black font and in the color red. That means that if a heading element is of the Important class, the style bound to the class will apply, and it will be displayed in red using the Arial Black font.

Separating Style from Content

This article characterizes CSS as a language for formatting the elements of HTML documents. However, as an earlier article in this series pointed out, HTML is, by its very nature, a language for formatting documents on the HTTP://WWW. Then what does CSS offer over pure HTML that would compensate for the additional complexity of using both?
While CSS does add some enhanced formatting and positioning features, the primary benefit is the separation of style and content. It is difficult to separate content and formatting rules in pure HTML documents, but, with CSS, it is easy.
The capability to separate style from content empowers developers to create, use, and maintain standardized presentation rules without touching the content. As a result, content authors can easily apply standard, professionally developed styles to newly published content without having to learn markup and formatting languages.
Moreover, styles can target a variety of presentation contexts, not just Web browsers. For example, the same content files can serve users accessing Web documents from personal computers, handheld computing devices, and even cell phones. The Web application could simply select and apply the appropriate style sheet for the client at runtime.
Separating style from content also makes code maintenance and reuse easier. HTML documents that use native tags and attributes to control font, positioning, and other characteristics of layout tend to be complex, making maintenance and code reuse more difficult.
For example, if a Web developer wanted to apply a standard background color to all table cells in a Web application, he would have to find every <td> tag in every page in the application and add a bgcolor attribute. If this standard color were later changed, every instance of every <td> tag in every page would have to be updated. Alternatively, the developer could simply use CSS to define a style for the <td> element in an external style sheet file. Linking this style sheet to the document requires only a single line of code. In addition, changes to the standard style would automatically propagate to all pages that use it.