What is CSS?

CSS is an acronym for Cascading Style Sheets and is the name of a specification used for defining style elements of documents, including web pages.

Importantly, CSS is not a program, nor is it a programming language. It is a set of rules for writing style data, particularly within the context of web pages.

The main idea behind CSS

Using CSS is easy! But to use it effectively you need to understand the single most important idea, or concept behind it – the separation of style and content...

Information, and the style in which it is presented, are two different things.

In the early days of the internet when HTML was really the only way to deliver content through a web page, the expression of style became badly entangled with the structure and content of web documents. As new technologies emerged the situation only became worse.

As a result the author of web content also had to control the appearance of each and every word, line, paragraph and section for every page as it was written or changed! It became an unmanageable task for most!

The development of CSS was the primary effort to unentangle style and content without destroying everything that had already been done! And it worked very well!

Now, using CSS with HTML, an author may write the information he or she wants to convey to readers without much regard for it’s presentation beyond paragraph breaks and headings. Fonts, colors, spacings and other style elements are then applied across all pages from a single, easily maintained stylesheet!

Today, using CSS to manage style, and HTML (or XHTML) to provide structure, is the most effective and manageable way to deliver information, well presented, across the internet!

For an example of the power of this idea in action, see our article Poetry in CSS: An Example.

How does CSS fit into my web site?

There are two ways to apply CSS rules to web page content:

• Embedded or inline
• As an attached stylesheet

In general you may specify CSS rules for any element in a web page by writing the rule in the HTML itself, this is called embedded or inline styles.

But what we are more interested in is creating one or more master stylesheets that may be attached to multiple web pages as illustrated in Figure 1 below.

Figure 1

In this way we may control the appearance of many pages, or even an entire web site, with a single set of styles. The simplicity, consistency and manageability that result are obvious!

But why ‘cascading’ stylesheets?

As mentioned above, you may specify CSS styles embedded in the HTML or in one or more attached stylesheets. But if we have multiple styles for a single web page which styles will be used?

To answer that we need to be aware that all documents have, or should have, an inherent structure. For example, chapters may have sections, and sections will have paragraphs. There is also structure in pages, tables, lists, etc… the idea being that some elements may contain others.

When CSS rules are applied elements that are contained by others inherit their styles from the containing elements, unless there is a more specific style rule that applies directly to them. And when multiple rules apply equally well, the most recent, or last specified rule will be used.

Consequently, there is a cascade of style rules that may apply across the elements of any document. While that may sound like confusion at first look, it is a very powerful method of managing complex styles! As in most things, the key is to use a little thought and planning, and keep it simple. The alternative, as early web authors learned, is chaos.