CSS Style Sheets: Why They Matter

photo credit: JB Lon­don

For the aver­age con­sumer of web design ser­vices, the move from table-based lay­outs, to css– or tableless-layouts, prob­a­bly means lit­tle. How­ever, it’s impor­tant that you know the basics of what CSS Style Sheets mean, and why you want to find a web designer that uses them.

This post is not designed to teach you CSS (you could go here, or here for that). It is designed to give you the bottom-line con­text as to why it mat­ters to your website.

Bot­tom Line Summary:

Cas­cad­ing Stylesheets, or CSS, a.ka. CSS Style Sheets, are a sys­tem that lets web design­ers’ jobs become much eas­ier, free­ing up their time to focus on mak­ing sites more beau­ti­ful, faster load­ing, and eas­ier to use.

While CSS has been around for a while, the biggest devel­op­ments hap­pened when the major­ity of web browsers sup­ported the use of CSS lay­out tech­niquest — that is, ways of lay­ing out the page using CSS rules. Before this, web design­ers had to use HTML com­mands meant to rep­re­sent tab­u­lar data — tables — stretch­ing the use of HTML for tables far, far beyond its orig­i­nal intended use.

The bot­tom line for a web design cus­tomer is: If your prospec­tive web designer does not design with CSS-based, table­less lay­outs, do not use that web designer. They are 5 to 10 years behind the times, and this lack of up-to-dateness will prob­a­bly affect other aspects of their prac­tice, as well!

And now, to the big­ger context…

CSS Style Sheets Overview

A CSS style sheet is a spe­cial file, often con­tained as a sin­gle douc­ment on a web­site, along with the HTML files that rep­re­sent the con­tent of the site.

The HTML file points to (ref­er­ences) one or more CSS style sheets, which con­tain the for­mat­ting instruc­tions. This leaves the HTML file to con­tain the con­tent of the page, reliev­ing it of the duty of rep­re­sent­ing the formatting.

For exam­ple, an HTML file might con­tain an instruc­tion like the fol­low­ing. Let’s say the pur­pose here is to pro­vide a cap­tion that would go below a photo:

<p class="caption">The 1908 Fire Ravaged Much
 of the City, but Spared the Opera House</p>

The cor­re­spond­ing CSS file, could then con­tain an instruc­tion to pro­vide for­mat­ting for the “cap­tion” class, shown above:

.caption {
  text-align: center;
  color: #333;
  font-size: .9em;
  font-style: italic;
}

Now, let’s say this type of cap­tion appears a hun­dred times through­out this web­site. All the web designer has to do is spec­ify the “cap­tion” class each time he or she wants the appro­pri­ate for­mat­ting to appear, know­ing that the browser will refer back to the instruc­tion in the CSS style sheet for for­mat­ting instructions.

In the “olden days,” before CSS style sheets, here is what that same HTML code might have looked like:

<p><font color="#333333"><font size="2"><i>
<center>The 1908 Fire Ravaged Much of the City,
but Spared the Opera House</center></i></font>
</font></p>

Now, notice how much more code is there, just to rep­re­sent the same thing! Imag­ine that code repeated 100 times, and you’ve got some idea of what kind of sav­ings CSS style sheets buy you.

But now, the real sav­ings, comes in layout–the posi­tion­ing of ele­ments on the page.

CSS Style Sheets for Lay­out — Why It Matters

In the late 90’s and early 2000’s, as web design became more and more sophis­ti­cated, web design­ers found the need to spec­ify more and more com­plex page lay­outs. They found that the eas­i­est way to do this — often, the only way to do this — was to use the HTML codes intended to rep­re­sent tables. Here is an exam­ple of a sen­si­ble use of tables:

The real func­tion of tables was intended to rep­re­sent tab­u­lar data, like the table above. How­ever, web design­ers often found them­selves using these same HTML codes to rep­re­sent tables, within tables, within tables, just in order to lay­out a sim­ple HTML web page, with, say, a footer, a header, and a sidbar.

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>cell</td>
          <td>cell</td>
        </tr>
        <tr>
          <td>
            <table>
              <tr>
                <td>cell..

… Well, I hope you get the idea here. What you had in the above HTML exam­ple, was an extremely messy series of nested tables. And while you, as the viewer, wouldn’t have had to see the HTML code shown here–the web designer would still have had to deal with it, and that is the main point!

With the advent of CSS-based lay­out tech­niques, the under­ly­ing HTML code got much sim­pler. And what’s more, it made much more sense. The result was that lay­outs became cleaner, eas­ier to main­tain, and eas­ier to develop.

While the com­plex­ity of table-based lay­outs almost demanded the use of spe­cial tools that shielded the designer from the HTML much of the time, with the advent of CSS-based lay­outs, it became much, much eas­ier to work in the under­ly­ing code — reduc­ing the need for fancy pro­grams like Dreamweaver, and giv­ing the care­ful web designer much more con­trol over his code.

I hope this arti­cle gave some degree of con­text to a rather com­plex sub­ject, with­out being either too over­whelm­ing, or too general.