@import url(/style/global.css);'; $_SESSION['switchcss']=$stylesheet; break; case 'leftsidebar': $stylesheet = ''; $_SESSION['switchcss']=$stylesheet; break; case 'different': $stylesheet = ''; $_SESSION['switchcss']=$stylesheet; break; case 'nostyle': $stylesheet = ''; $_SESSION['switchcss']=$stylesheet; break; // Our default stylesheet default: $stylesheet = ''; $_SESSION['switchcss']=$stylesheet; } } ?> @import url(/style/redntan.css);';?>

HTML & Cascading Style Sheets

My primary web design skills are hand coded HTML & CSS. I've had experience doing production level HTML at some Boston area universities & corporations, producing high volumes of HTML documents in collaborative environments. I've also done several independent, consulting, and contract projects creating custom CSS layouts and templates for dynamic sites & HTML email, and converting .PSD files to HTML / CSS pages.

I'm able to write code to any specified HTML or XHTML DOCTYPE, level of CSS support or target browsers & platforms, including HTML for email.


The purpose of this CSS exercise is to demonstrate website redesign done exclusively with stylesheets; The HTML markup for this page remains exactly the same. We'll use a little PHP to set a new CSS file as you progress through the links.

For starters let's change the color palette.

See? It's fun already, though changing the color scheme alone could be done with a table layout. Since we're using CSS positioning we can start moving layout elements.

So just by swapping stylesheets - specifying new background images where needed - we can move sidebar to the left.

Now we've done away with the original layout style entirely and adopted this cheerful nautical theme! The layout elements aren't just shifted, but completely rearranged and background images also replaced.

Now for a change of pace take a look at the page with no styles applied.

Here's how the page renders with no stylesheet (except for this <div>). The HTML is written with minimal inline styles and no inline HTML attributes like align or font. Because no tables are used for layout the content flow is logical and structured with heading, paragraph, and list elements providing the framework.

Classes and IDs are in place so the HTML is like a blank canvas waiting for CSS to provide layout and formatting. Finish.

That completes the tour


Valid XHTML 1.0!This site is written in valid XHTML* with the the benefits of well-formedness and interoperability. While much of the advantage of those benefits is yet to be realized, the strict adherence to standards and jettisoning of deprecated tags yields code that is consistent and lightweight - easy to maintain and easily read by search engine spiders, browsers, and screen readers.

It's still possible to take advantage of some of these features when writing HTML 4.01 and at the same time prepare a site for eventual conversion to XHTML by following these guidelines:

Why validate? Aside from the merits of creating a standards compliant document, validation eliminates coding errors as sources of unexpected rendering and makes accounting for genuine bugs much easier.

Valid Cascading Stylesheets

Valid CSS!This site features CSS layout* (tables only for tabular data) and was designed with the following goals:

The first two were accomplished by using a combination of relative widths and absolute positioning, the third by using percentages for font size. Total file of the CSS is under 5kb, achieved by using shorthand declarations and maximizing the advantages of inheritance.

(archive) table vs css layout file size comparison

(archive) cross-browser compatiblity (w/ netscape 4 example)