skip main menu

Valid Cascading Style Sheets

Gardner Information Design uses cascading style sheets in all its front-end web development and custom web design work.

The CSS Validation Service at the World Wide Web Consortium (W3C) provides The W3C CSS icon to indicate that a page uses valid cascading style sheets (CSS).

Test the cascading style sheet for this page (new site):

W3C Valid CSS icon (new site)

Why is this important?

The fact that we use Cascading Style Sheets (CSS) is important to you because sites can be more easily redesigned. It means that we can make rapid changes to the look and feel of your website. We can change the formatting or colors of an entire site almost instantly.

Cascading style sheets are at the heart of fluid page design and flexible fonts, as well as rapid prototyping and web accessibility. Style sheets save you costs during initial design, plus site redesign becomes much simpler as the needs of your site change.

Using Cascading style sheets means design features and content elements are created separately. Separating content from visual design dramatically improves search rankings.

Style sheets also let your visitors customize the view of your site for themselves, a feature that provides more accessibility for more people. They can't do this successfully when formatting is embedded into Web pages.

View the examples below to learn about how cascading style sheets work.

^ Top

CSS Design

To demonstrate the separation of style from content, here is the home page of this GIDI.biz web site without its style sheet:

GIDI.biz: Styles OFF (same site)

Navigate the entire web site without its style sheet, or view this page side by side with its text version:

This is the view of the site as it appears to search engines, as well as to people with screen readers and other adaptive devices.

^ Top

Client Example

All the sites GIDI builds for our small business customers have separate style sheets. Every site listed in our Custom Website Portfolio works the same way, and all of them resize to fit the space available in the browser window.

In fact, most of our sites display perfectly on smart phones and other small screens without any modification.

Here is just one example, a web site built for Marla Welsford, a voiceover artist and one of GIDI's small business customers, which demonstrates her site both with and without its cascading style sheet.

Marla Welsford: Styles ON (new site). Marla Welsford: Styles OFF (new site)

Navigate Marla's entire site with and without its style sheet:

Using cascading style sheets this way has many benefits:

  • Site modifications are easier.
  • It is easier to try things during site development.
  • Sites are easier and cheaper to maintain in the long run.
  • All content is available to search engines like Google and Yahoo.
  • Sites display well on hand-held devices like smart phones.
  • Sites are easier to navigate by people with disabilities.
  • Sites display better in older browsers.