The use of Cascading Style Sheets, more commonly known as CSS, is slowly becoming the norm in professional website design. Though there are some disadvantages to using CSS, the benefits far exceed the disadvantages. The following information is presented as a summary of the beneficial aspects of CSS styling, and to offer some insight on where CSS can be utilized in the future. A wealth of information is available on the Internet regarding this topic. Some suggested links for reading are listed below this article.

Benefits and Capabilities of CSS:

Maintenance - Basically, you can build hundreds of different pages and change them all instantly by updating the code in only one CSS style sheet. It's also easier then diving into numerous tables nested within tables just to make a small change.

Accessibility - By separating the document structure from the presentation, it makes it much easier to allow your site to be viewable on other media viewing devices such as cell phones and hand held devices.

Cross browser compatibility – conform to web standards and make allowances for browsers that do not comply with current web standards. Cleaner Look - Not only does it allow you to keep the code of your page to a minimum to it also allows your to tweak every little feature of the site allowing you make your site more aesthetically pleasing. As well as creating a much more professional look for your overall site.

Cut down on load time – less xhtml / html code in the web page. Browsers will cache the style sheet after loading the first page. The remaining pages of your site will load even faster.

Increase code efficiency – little or no format tags.

Ultimate control of positioning elements in the body.

Disadvantages of CSS:

Some browser versions still in use do not support certain attributes of css.
CSS contains no variables. To make a change to a constant in the style sheet you must do a “replace-all”.
Sometimes gives inconsistent browser support.
Lack of control for shapes

How CSS was used on this web site:

Format the look and position of elements across all pages of the site. Reduce the code contained in each page for faster load times. Ease of adding additional pages to the site.

Other pertinent points for the future use of CSS:

Cascading Style Sheets, more commonly known as CSS, is slowly becoming the norm in professional website design. c. Optimize the site for search engines – cleaner page code is easier for search engine spiders to find relevent information about your site that can be indexed, resulting in better search engine results. d. Multi-platform accessibility – with css you can create specific styles for different viewing devices, such as tablets and smaller hand held devices (i.e. smart phones and organizers).

Simply put, the biggest upside to using CSS is the ability to have total control over the entire look of your website and it's features. If you need more motivation for whether or not to use CSS, as opposed to regular HTML coding, more information can be gleaned from the following websites:

http://www.adobe.com/devnet/dreamweaver/articles/why_css.html

http://www.searchenginejournal.com/benefits-of-css-in-search-engine-optimization/4149/

http://www.articlesbase.com/web-design-articles/advantages-and-disadvantages-of-using-css-833019.html

http://www.cameronolthuis.com/2006/04/benefits-of-css/

http://www.adobe.com/devnet/dreamweaver/articles/why_css.html

http://www.w3.org/

Some reasons likely to cause a problem with a web page include: content not loading, layout does not work in different resolutions, and specific browser problems. Testing Standards for html, xml, scripting, etc. all compound the process of isolating the problem.

Screen resolution issues have been handled in the past by use of tables. By using a table grid layout to hold content you can then control the size of the table relative to the screen size. Although tables are still used today, CSS provides another layout control method for insuring proper content display.

Browser incompatibility is more difficult to troubleshoot. Variables that may cause web page problems include: what browser you are using, what version of that browser, is the browser compliant with the w3c web standards, does the browser incorporate support for html tags that are not considered standard by other browsers, are you using features (scripting) on your web site that may be unsupported by some browsers or that may pose security issues.

Resolving all of these variables may be impossible for every browser. Setting priorities is important to making your site functional. As the major browser market share includes IE7 (soon IE8) and Firefox it is important to make your pages compatible with those browsers. Of these two, Firefox is the more web standard compliant browser. There is a "Web Developer" plug-in available for Firefox that uses a toolbar to provide on-line analysis of web content right in your browser window. Using Safari and Google’s Chrome may still present some problems, but it may be impossible to display perfectly in all of these browsers.

Aside from the functional issues described above, there may be fundamental issues with the web document including code structure or syntax. A local or on-line validator is essential to troubleshooting your web page problems. An on-line validator that works exceptionally well in evaluating against current web standards is the one provided by the World Wide Web Consortium (http://validator.w3.org/). The validation process will also give clues to why specific content may not be loading, such as graphics, sounds, scripts, etc. There is another nice analysis tool located at http://watson.addy.com/, which allows you to select aspects of your site you wish to analyze, including download speed, browser compatibility, and links.

http://www.angelfire.com/nm/thehtmlsource/troubleshoot/


Simple design elements used on this page.

Hierachy of information on page is clear by use of headings and sub-headings. Link colors compliment the page colors. Background does not interrupt the text. Graphic uses alt tag. Alignment of the text is well set in from the left and right margins so that the readers eye has an easier time finding the beginning of the next line. The text is left justified for consistancy. Colors complimented in the site by use of a good color palette. Proximity of related headings and of links to their related paragraph make it easy to see that these items are related. Contrast on the page allows easy identification of all items. While giving good contrast the colors are still allowed to flow on the page.


 


Personal/Hobby:

Skip Barber Motorsports Park
http://www.barbermotorsports.com/index.php
Content is image oriented, including images as links and text contained in a graphic frame. Information is current. The site utilizes current techniques for site exposure including facebook, twitter, and Youtube social networking. There is even a sign-up for email updates related to park events. The site is written in xhtml and incorporates php and javascript scripting languages. Most formatting appears to be done via a single css style sheet. The page format is a three column layout with top navaigation. The site also made use of some tables, contained in div tags and using classes from the style sheet, to list results information. There was no bottom (text based) navigation, which limits accesibility for certain users. This is too simple to add to the site and I found it unacceptable, even for a graphically driven site. The site was easy to navigate without missing links or page load problems.

Local:

City of Saint Petersburg, FL
http://www.stpete.org/
Uses two css style sheets and embedded styles. One style sheet appears to be for formatting the page, the other seems specific to the menu systems. The site has many interactive elements that are coded using javascript. The site uses a top navigation bar with titles that inc major sub divisions in the site. Each nav button expands to a comprehensive drop down list of links covering almost every page in the site. A nice feature added is a sub-navigation bar to the far right of the regular nav bar at the top. This sub-nav bar includes a link (“accissibility”) that loads an alternate page, giving more friendly accessibility options to the heavily scripted home page. The navigation works well for this site. However, the multitude of services offered creates a learning curve during the first visit or two. The site is constantly updated to reflect current events, from city meetings to entertainment.

Technical:

Web Source
http://www.web-source.net/
The first thing I noticed about this site is that it uses most of the width of the browser for content. I immediately tried to resize my browser window and found that the page did resize very well. The site offers products (for sale) and tools & tips for free with a free membership registration. I found the site layout confusing. Several different navigation areas are presented at the top of the page. The content area has well labeled sections, but are all placed close together. The author of the site lists her credentials and years of experience in addition to the purpose of the site. This led me to look at the source code. I was amazed to find such old-school coding in a site that claims to have instructional resources and tools availabe. Some items to notice in the code were:

  • No document type definition.
  • Heavy use of tables to organize layout
  • Cluttered navigation at the top of the page.
  • Cluttered layout.

The site does make use of a single css style sheet. Based on the viewable code, I am not certain what aspects of the site are being controlled with the style sheet. The heavy use of tables and font tags in the html code indicate these controls were not a part of the style sheet. In addition, alignment of elements such as links and paragraphs were also addressed inline with the html code. I appreciate the information found on sites like this one. A person new to web site design would not know that these techniques were not current with the web community. I feel the author should demonstrate their expertise in the field by updating their own site to show current practices, or at least some transitional phase.