Web Stack Series Part 6: Cascading Style Sheets

August 13, 2007 | Filed Under Design, Web Site Development

Cake Part 6 of our journey through the Web Stack brings us into the design realm. In the world of web design, HTML is the cake and Cascading Style Sheets, or CSS, is the decorative icing on top. CSS is responsible for making your web site look delicious.

Cascading Style Sheets didn’t get a lot of attention until about 5 years ago, when web standardistas such as Jeffery Zeldman and Eric Meyer started encouraging designers and developers to separate stylistic elements from semantic, structural elements. Doing so makes web sites consumable by a wide array of different applications.

CSS is a way of separating the look and feel of your website from the underling function of the data an content. This gives you the ability to apply several different style sheets to the same HTML to achieve wildly different results. For example, the following 5 links all point to the same HTML document, but each one uses a different style sheet to drastically change the appearance of that HTML

Here is the same HTML document without any style sheets: CSS Zen Garden Sample HTML

Quite a difference! The possibilities that this flexibility affords are endless. You could create a style sheet that renders your web site one way for regular web browsers, and another style sheet that renders your web site in a more compact view for mobile phones. You could even provide different designs for different types of users - and you can do this without ever touching the underlying content or HTML.

I want to illustrate this concept with an example. Here is a small snippet of HTML:

<h1>Hello World!</h1>
<p>Nice to meet you!</p>

Now, let’s write some CSS to add some pizazz. This is what a typical style sheet rule might look like:

h1 { color: red; font-size: 32px; }
p { font-weight: bold; }

Hello World!

Nice to meet you!

Here, I am setting the size and color of all text inside of h1 tags. I am also making all paragraph text bold. Now let’s say I want to change the style of all the headings across my entire site. All that needs to be changed is the single CSS rule.

h1 { color: blue; font-size: 28px; }

Hello World!

Nice to meet you!

Now, on every page of my web site, h1 tags will appear blue and in a slightly smaller font size. Notice that I did not change the underlying structure of the HTML. This illustrates the flexibility that separating structure and style provide to us.

CSS is still maturing and being improved. The W3C issues specifications that browser makers use when creating their software. The specifications layout rules for rendering different elements of CSS. Despite these specifications, however, many browsers still render the same rules differently, creating big headaches for designers.

It is not uncommon for larger web design shops to have a person who is dedicated entirely to creating HTML and CSS, although this is a luxury that most can’t afford. In most situations, it is the graphic designer who will be responsible for creating the CSS for your website. Make sure that the person designing your website is knowledgeable regarding the use of style sheets. A good way to test your site is to view it without the CSS file. Is the site still usable? If so, then your designer has done a good job.

In the next part of this series I will explain graphic design and how it can be integrated with CSS to create spectacular web sites. Stay tuned!

Like This Article?

Subscribe to the RSS Feed

Related articles:

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.

Tagged:
CSS, design, html, style sheets, usability, w3c, web stack

Comments

3 Responses to “Web Stack Series Part 6: Cascading Style Sheets”

Elliott Cross on August 13th, 2007 7:06 pm

Great intro to CSS! I have always been amazed at the CSS Zen Garden examples as it truly shows the power of taking static content and using CSS to create powerful designs.

One great aspect of CSS also is the power to make quick changes to an entire site, and the reduced bandwidth because the browser caches the file. Any site can benefit from CSS, and once you learn the power of it, you will be amazed!
Vincent on August 14th, 2007 7:46 am

Very clear and easy explanation to follow. And I’ve gone to CSS Zen Garden for inspiration sometimes, because the designs are breathtaking!

As a programmer myself, I appreciate the use of style sheets over hardcoding the design elements into the HTML. Maintenance was a nightmare when I slowly flushed hardcoded HTML design attributes out of my applications…

And I agree with the testing without the style sheet part. Thanks for the article!
CSS colours and hexadecimal | Polymath Programmer on August 15th, 2007 9:06 pm

[…] main driving force behind the former. Aaron’s article gives an excellent introduction to this separation of form and function of a web page. Then stroll through the breathtaking CSS Zen Garden to gain inspiration for your CSS design […]