What is CSS?

Introduction

Cascading Style Sheets, often referred to as CSS, is the standard way the W3C has proposed in order to define style for web pages. What does style mean in this context? Web pages can be distinctly divided into two separate aspects: content and style. Take a newspaper's site home page: headlines, articles, and the corresponding pictures are clearly content. You can think of content as the bare bones version of the web page. Style, on the contrary, is superfluous as far as sheer information is concerned. Font type, colors, alignment, logos, lines, and general page layout are distinctly style. The original HTML definition did not account for this separation, but rather focused on the content part of the equation. This might have been enough for the initial, more academic public of the Web. But as Web sites became more are more commercial, more sophisticated graphic design was used in order to grab potential clients' attention, and thus the shortest path was taken: the HTML definition was augmented, in order to make space for some style defining tags, such as FONT or CENTER. Furthermore, Web browsers released lots of propietary extensions, that made even more presentational effects feasible.

Basics

Following the basic systems design principle of separation of concerns, CSS allows style to be defined in a completely independent way its close cousin the content. Thus, by decoupling style from content, several benefits are achieved. Style is defined in CSS by defining values for presentational properties of the elements of a page. These style definitions are attached to whole sets of elements, which are defined using predicates. The following predicate, for example, refers to all paragraphs inside div sections:

div p {
...
}

CSS code can be written in three different locations:

  • In a separate stylesheet file, linked from the page header:

    <head>
  ...
  <link href="style.css" type="text/css" rel="stylesheet"/>
  ...
</head>

  • Inside a style tag in the page header:

    • <head>
  ...
  <style type="text/css">
  </style>
  ...
</head>

  • Within a tag, using the style attribute:

    <div style="color:green">
...
</div>
See Also