Advantages of CSS

CSS Offers Three Broad Categories of Benefits:

  1. More Flexibility
  2. Faster Rendering
  3. Accessibility to All

The Flexibility of Using CSS

The traditional HTML approach was to “hardcode” all of the appearance information about a page. For every heading, in every page, you set the font size, color and type face properties.

The client requests a “minor” change:
"I want headers larger, in a serif font, and, how about changing header colors to match my companies logo too?"

With a fairly limited number of pages, it may take you an hour to make those “minor” changes. You have more than 100 pages? That IS a lot of editing, and a lot of re-editing if they decide to modify the appearance of your pages again later. And with all of those changes there is a good possibility for making errors as well.

Take any page from one of your sites and count the number of tags that are NOT content, but simply control the “look” of the page (including table tags). If the markup also defines the appearance of the pages, page styling is actually part of the pages themselves. With CSS, you decide how everything should appear, and enter that information only once!

Style sheets exist, above all, to separate appearance from content. CSS is removing this markup from the code of the actual content of the page and controlling it in a centralized place. By manipulating the design of your pages using one or more external style sheets, you can apply the changes to your site by modifying the style sheet. All of the desired changes CASCADE across your website — even if it's hundreds of pages!

In a table-based layout, what if the client wanted to move the site navigation from the left side of the page to the right?
It might take many hours of repetitive work. If the navigation had been built with CSS, a simple change of the “float” or “position” attribute in the external style sheet would update the page. And since it’s CSS, you’ve also fixed every page that uses that style on the entire website!

Rendering Speed When Using CSS

Using external CSS, browsers can begin rendering pages immediately because there is no presentational markup in the pages code. If the site uses external style sheets for its presentation, the index (home) page of the site will causes the browser to cache the linked style sheet files that the first page used. Since the browser has already cached the information, all of the subsequent pages in the site using the style sheet(s) will load even faster!

In addition to the benefit of cached information, the amount of actual HTML code is MUCH smaller using CSS styling. It takes a browser longer to render web pages using presentational HTML simply because there is so much more code for it to read. Often you can reduce the amount of markup by 50% or more. Less code equals faster loading pages — and less work!

Accessibility and CSS

You hear a lot about accessibility. Most webmasters understand they should be building more accessible into their websites. Unfortunately, only those developers who must write the markup for government & educational institutions have been forced into actually doing it. When considering accessibility, developers tend to assume this means that they just need to add things like alt attributes to their images. Actually, accessibility is a much broader subject, and using CSS will make it easier for you to build accessible sites.


fancy rule divider graphic

Different browsing technologies, each with their own accessibility requirements, can include:

  1. WebTV
    560px in width with horizontal scrolling not available
  2. Screen Reader
    page content read aloud in the order it appears in the HTML
  3. Handheld Device
    very small screen, limited JavaScript support & large images
  4. Screen Magnifier
    very few words may be able to appear on the screen at a time
  5. Slow Connection
    users might turn off images for faster download time
  6. Large Monitors
    very wide screens should also be considered

In a nutshell, to make your website accessible to everyone, you need to provide alternatives to:

  1. Images - using ALT text
  2. Audio & video - by using subtitles or written transcripts
  3. JavaScript - through the noscript tag
  4. Flash - using HTML equivalents
fancy rule divider graphic

CSS "how to do it" icon

Are you convinced of the benefits of CSS?
Ready to learn how to start using CSS style sheets?

Read More - How to Implement a CSS Style Sheet

read more about cascading style sheets icon

– Professional Website Design & Development · Search Engine Optimization · Freelance Graphic Design Services –

Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Kansas City, Independence, Olathe, Kansas, Overland Park, Blue Springs, Missouri, Belton, Excelsior Springs, MO, Gardner, KS, and Gladstone               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Grandview, Missouri, Lansing, Leawood, Leavenworth, Kansas, Lees Summit, Lenexa, KS, Liberty, Merriam, Ottawa, Prairie Village, Raymore, Raytown, MO, Shawnee, Avondale and Basehor, Kansas               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Birmingham, Bonner Springs, Kansas, Buckner, Claycomo, Countryside, KS, De Soto, Edgerton, Edwardsville, Fairway, Garden City, Glenaire, Grain Valley, MO, Greenwood, Missouri, Harrisonville, Houston Lake and Kearney               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Lake Lotawana, Lake Quivira, Lake Tapawingo, Lake Waukomis, Lake Winnebago, MO, Lawson, Levasy, Lexington, Linwood, Lone Jack, Missouri, Louisburg, Mission, Mission Hills, KS, and Mission Woods               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Missouri City, Napoleon, North Kansas City, MO, Northmoor, Oak Grove, Missouri, Oaks, Oakview, Oakwood, Oakwood Park, Odessa, Orrick, Paola, Parkville, Peculiar, Platte City and Platte Woods               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Pleasant Valley, Pleasant Hill, Randolph, Richmond, River Bend, Riverside, MO, Roeland Park, Kansas, Sibley, Smithville, Spring Hill, Sugar Creek, Tonganoxie, Unity Village, Weatherby Lake, Wellington, Westwood, Kansas and Westwood Hills.