What Is CSS?

Have you ever thought about what a web page is? I mean, what it really is? Some people think of a web page as a visual medium—an aesthetically pleasing experience which may or may not contain information that’s of interest to the viewer. Other people think of a web page as a document that may be presented to readers in an aesthetically pleasing way. From a technical point of view, the document interpretation is more appropriate.

When we examine the elements of its construction, a web document can consist of up to three layers—content, presentation, and behavior—as illustrated in Figure 1.

The content layer is always present. It comprises the information the author wishes to convey to his or her audience, and is embedded within HTML or XHTML markup that defines its structure and semantics. Most of the content on the Web today is text, but content can also be provided through images, animations, sound, video, and whatever else an author wants to publish.

The presentation layer defines how the content will appear to a human being who accesses the document in one way or another. The conventional way to view a web page is with a regular web browser, of course, but that’s only one of many possible access methods. For example, content can also be converted to synthetic speech for users who have impaired vision or reading difficulties.

Figure 1. The three layers of a web document A representation of the three layers of a web document. The first
        layer is HTML or content, the second is CSS or presentation and the
        third is JavaScript or behaviour.

The behavior layer involves real-time user interaction with the document. This task is normally handled by JavaScript. The interaction can be anything from a trivial validation that ensures a required field is filled in before an order form can be submitted, to sophisticated web applications that work much like ordinary desktop programs.

It’s possible to embed all three layers within the same document, but keeping them separate gives us one valuable advantage: we can modify or replace any of the layers without having to change the others.

Certain versions of HTML and XHTML also contain presentational element types—that is, elements that specify the appearance of the content, rather than structure or semantics. For example, <b> and <i> can be used to control the presentation of text, and <hr> will insert a visible rule element. However, as these types of elements embed presentation-layer information within the content layer, they negate any advantage we may have gained by keeping the layers separate.

Cascading Style Sheets, or CSS, is the recommended way to control the presentation layer in a web document. The main advantage of CSS over presentational HTML markup is that the styling can be kept entirely separate from the content. For example, it’s possible to store all the presentational styles for a 10,000-page web site in a single CSS file. CSS also provides far better control over presentation than do presentational element types in HTML.

By externalizing the presentation layer, CSS offers a number of significant benefits:

  • All styling is kept in a limited number of style sheets. The positive impact this has on site maintenance can’t be overestimated—editing one style sheet is obviously more efficient than editing 10,000 HTML files!
  • The overall saving in bandwidth is measurable. Since the style sheet is cached after the first request and can be reused for every page on the site, it doesn’t have to be downloaded with each web page. Removing all presentational markup from your web pages in favor of using CSS also reduces their size and bandwidth usage—by more than 50% in many documented cases. This benefits the site owner, through lower bandwidth and storage costs, as well as the site’s visitors, for whom the web pages load faster.
  • The separation of content from presentation makes it easier for site owners to reuse the content for other purposes, such as RSS feeds or text-to-speech conversion.
  • Separate styling rules can be used for different output media. We no longer need to create a special version of each page for printing—we can simply create a single style sheet that controls how every page on the site will be printed.

Although CSS is designed to be independent of the markup language of the documents to which it is applied, in reality, it’s used mainly with HTML and XML (including XHTML).

Note: HTML and XHTML

In this reference, when we mention HTML, we really mean HTML and/or XHTML, except where otherwise specified. The differences between the two markup languages are all documented in Differences Between HTML and XHTML.

User-contributed notes

by Paul O'B
Mon, 19 Apr 2010 09:26:12 GMT

As a short definition CSS could be defined as a 'stylesheet language'.

by cx1web
Fri, 01 Feb 2008 10:43:24 GMT

Have to agree with PaulWork - <b> and <i> tags don't totally negate any advantage - you would need tags around text to produce the same default effect anyway, and you can always change the look of <b> and <i> tags in your CSS, for instance:

b {background-color: yellow; font-weight: normal;}
i {background-color: red; font-weight: bold; font-style: normal;}

by kiddy
Fri, 07 Dec 2007 15:58:10 GMT

Figure #1 could use a key or some other indicator of the 3 different layers. I can tell which is HTML, CSS, and Javascript by the code/text/syntax used on the viewable layers, but a color coded key or some other way of labeling the three layers feels needed as I look at it.

by IssacharWEB
Thu, 06 Dec 2007 21:55:55 GMT

It seems like you could create a better distinction in the navigation between the specific property references and general articles about css like this one.

by PaulWork
Wed, 05 Dec 2007 22:42:08 GMT

"they negate any advantage"

It seems a bit too strong to say that using b and i tags negate any advantage; perhaps using these tags reduces the advantage, but surely it doesn't negate any advantage.

Related Products