CSS and (X)HTML

What is CSS?

Cascading Style Sheets (CSS) is, simply put, a method of sending a set of instructions on how to render the appearance, and even the layout, of a web page to the viewer's web browser.

Historically, web pages began as simple text documents with very few options for formatting text. Later technology enabled the use of elements other than type, such as images in web documents. We naturally began to search for methods to lay out text and images that resembled printed layouts, with text that could wrap around images, provide neat-looking headers, create text columns, etc. The most common way to accomplish this used tables to place text and graphics within and to create columns. Often this type of layout required nesting one table within another within an other ...a virtual nightmare for both the web designer to maintain, and for a web browser to render. Load times of pages containing table-based layout are longer. Place-holding "transparent" graphics also slow down performance. Minor changes in the table design can break the entire look of the layout.

The logical next step was to create a way for a web site's content to be separated from its appearance. The World Wide Web Consortium (W3C) began developing an ever-evolving way for the web designer to control the layout and appearance of his web sites without using tables: CSS.

Maybe you've been using some CSS to style portions of the content of your web pages, such as text colors and colors and sizes of page headings. Maybe now you are ready to learn more about using CSS to totally control the look and layout of your sites. My goal is not to teach you how to do this, for there are plenty of good books and web sites already out there. Instead, I hope to share a little of what I've learned, and provide you with references to existing materials.

I personally prefer using external style-sheets for my web sites and either importing them or linking them in the <head> tag of my XHTML documents. My reason for doing so is that I then need only make changes or additions in one document rather than in a handful. It also allows for flexibility of styles between pages if certain pages in the site require special formatting.

What is "standards-based" web design?

Standards-based web design simply means that you're using the current CSS and markup (XML, XHTML, HTML, for example) standards set by the W3C. It means that you're using CSS and markup that is well-formed and validates. How do you know if your "code" will validate? The W3C offers a validation service for both CSS and markup. See the External Links section in the Sidebar for links to the validators. They are worth a bookmark!

Why use standards-based web design? Avoiding proprietary markup and CSS assures cross-browser compatibility. The newer browser versions support the W3C standards (finally!), and more will in the future. This makes for forward-thinking design. Standards-based pages require less bandwidth. They allow for greater accessibility, and are better optimized for search engines, thereby providing your site with a greater viewing audience.

If you're concerned that you can't make a "pretty" web site, or one with "bells and whistles" because you're using standards-based design, have a look at the CSS Zen Garden.

What is XHTML?

XHTML is Extensible Hypertext Markup Language, codes that identify parts and characteristics of documents. It combines XML and HTML. It was developed as a transitional language between the two. There are some differences between the two that take some getting used to, but making the change from HTML to XHTML is fairly easy. I've included a link that will get you started in the External Links in the sidebar.

Putting It Together

With advances in the technologies that people use to view web sites, it becomes even more important to design using CSS and web standards. Hardware with new screen sizes seem to spring up daily (cell phones, hand-held devices, etc.). Standards-based design is a good beginning to making your web content more accessible to users who must use adaptive hardware and software (text-readers, aids for low vision, etc.). If standards-based design makes the designer's job easier, makes the browser's rendering easier, the web-server's job easier, and the end-user's experience better, why NOT implement standards-based design?