Demo

Clean Separation of Data and Presentation

By using CSS to radically separate content from presentation, changing the layout of a page is simplicity itself. It is trivial to redesign the appearance of a site, or to provide alternative stylesheets. As an illustration of this, the "Change Stylesheet" link above (not displayed in Netscape 4) will change the stylesheet of this page (unsupported in Opera). Note that you are not downloading a new page, the URL in the location bar of your browser is the same before and after. All that changes is which CSS stylesheet is applied to one and the same page. It is trivial to set a cookie so that your preferred stylesheet would be remembered the next time you visit this page, or to set your preference for an entire site. By using CSS and not markup to style pages you can utilise the power of markup to do what it is intended for: to capture the logical structure of your data.

Dynamic Effects Without Javascript

CSS allows for the creation of dynamic effects such as highlighting or altering elements when the mouse pointer hovers over them, and making visible previously invisible content such as the "pop-up" boxes which appear when the mouse pointer is over the screenshot links (not supported in Opera). Similarly CSS allows us to change which DZR logo is displayed in the top left corner of the page in the "serious" theme and in the "playful" theme, and to change which stylesheet link is displayed after "Change Stylesheet:" above (not displayed in Netscape 4). Previously such effects were only achievable through javascript. The dynamic effects on this page are written purely in CSS - no javascript is involved.

No Tables or Frames

Many website designers continue to insist that using markup, such as tables and framesets, to layout pages is a necessity because there is no other way to achieve the kinds of complex designs that their clients demand. This page demonstrates that that is simply false. In browsers which support fixed positioning the logo, title and screenshots sidebar remain fixed in place while the rest of the page scrolls, thus obviating the need for framesets, whilst in browsers which do not support fixed positioning (IE on Windows) this feature degrades gracefully and the page as a whole harmlessly scrolls. Similarly, no tables have been used to achieve the multicolumn layout, which even Netscape 4 does a reasonable job of displaying correctly. Table and frame based designs typically render pages inaccessible to users of mobile devices, text-only consoles and search engine robots. This page uses nothing but logical, structural markup, used in conjunction with CSS.

[ Return to DZR Home Page ]