Share this Page URL

Chapter 5. Layout > Switching Layouts on the Fly - Pg. 182

Layout 182 Switching Layouts on the Fly One of the greatest strengths of CSS is its versatility in presenting the same content using different layouts, being able to simply swap a style sheet to create a completely different look. This control over the layout need not merely be limited to the creator of the Web site, but can equally be shared with visitors, giving them the freedom to choose between multiple style sheets or even to mix and match styles from a variety of style sheets. In this example, I'll show you how to allow the visitor to choose among three completely different styles, all applied to the same content. To switch layouts on the fly: 1. default.css Create your default CSS file (Code 5.16). This is what visitors will see before they choose an alternative style sheet. Example 5.16. The style sheet default.css is used when the page first loads, before the visitor chooses an alternative style. body { background-color: #fff; color: black; font-family: Arial; } 2. style1.css Create as many alternative CSS designs as you want, placing each in its own external file with its own unique name (Code 5.17). Place all of these files with the default CSS file into a folder called css. Example 5.17. The style sheet style1.css is one of the alternative style sheets available to the visitor. body { background-color: #000; color: white; font-family: Times; } 3. index.html Create and save a new HTML file (Code 5.18). For this example, I'm saving it as index.html. Steps 4­10 apply to this file. Example 5.18. As the page index.html loads, it checks a cookie to find the style sheet it should use to display its content. If the cookie has not been set, it uses the default. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>DHTML &amp; CSS Advanced | Switching Layouts on the Fly</title> <script type="text/javascript" src="cookieLibrary.js"></script> <script type="text/javascript" language="javascript"> function getDataCookie(cookieName) { var data = ''; if (navigator.cookieEnabled) data = getCookie(cookieName); if (data == '') data = 'default';