Lesson: CSS, Creating Style with Standards, Part I

· 2 min read

Original publication

This post was originally published on November 19, 2004 on The Standard, the Raincity Studios blog, credited to “Mark Yuasa”. This post reflects the context and tools of its time; some links and services mentioned no longer exist.

View the original on the Internet Archive

What if I told you that today, your site's source code could be reduced by two-thirds, saving you an equal amount of your bandwidth every month?

Your site would be more accesible to non-sighted users and alternative browsing platforms such as PDAs, indexed more efficiently by search engines, and would load faster by orders of magnitude, making for happier customers.

Site-wide changes to design could take minutes rather than days?

This is all possible by designing with standards and CSS.

Part I: The Obligatory Introduction

When I think of wading through the alphabet soup of web terms that keep cropping up, I am both inspired and daunted. Each year sees the issuing of a slew of new acronyms to note, prioritize, and learn, with no end in sight.

This segment covers one of these ideas that has taken the better part of a decade to reach the fore. I've personally taken CSS and Standards to heart. CSS is not a revolution, but a logical evolution of styling the web.

Some Clarification: What CSS Is and Isn't

CSS is one component of a broad regimen of Web Standards proposed by the W3C. This not-for-profit organization issues and promotes a set of universal rules that do not restrict web designers, but rather make our creations more efficient, interoperable, and usable.

CSS is not a proprietary technology, it's a methodology. No one owns CSS, as Macromedia owns Flash.

CSS does not inherently imbue websites with style; It is a technique to be used by designers to more easily achieve their visions.

It is a shared ideology and practice that can ease workloads for designers, save dollars for clients, and make pages faster for users. That's about everyone that uses the web! I guess it is a big deal after all.

Style by Routine

CSS is often called a rule-based design language. What does this mean to web designers?

Styling a webpage can be viewed as the equivalent of choreographing a dance number. The choreographer has a vision that is most efficiently achieved by giving the dancers routines to follow.

These dancers are divided into distinct groups. Each group follows a set routine. The dance number can be scaled to any size because a routine exists to govern the motions of any additional dancers.

Exceptions can even be applied. The groups on either side of the stage can be told to follow a primary routine until a instance when they diverge. The exception could be as simple as one side turning left, while the other turns right.

These cascading levels of rules that increase in specificity when required are the core of CSS web design.

Once established, these routines can even be taken and applied to an entirely different troupe of dancers.

Why would a choreographer show each move to each dancer individually when a set of steps applies to many? If she is smart, she won't.

Enough Theory. Show Me the Code.

What kind of CSS lesson is this? There hasn't been a single line of code written.

My apologies. I like to wrap my head around the why before I tackle the how.

Next post, I'll crack open the text editor. I promise.

Your business deserves to be found.

Tell us about your project. We answer in English or French, and we travel anywhere in the MRC de Papineau.

Display

Your choices stay in this browser. Nothing is sent.

Text size
100%
Colours
Reading
More help
Site accessibility