A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

A Simple jQuery Stylesheet Switcher There are lots of reasons you might want to offer your users more than one CSS file for your website: You want to offer a “stylish” low-contrast and an easy-to-read high-contrast version of your site.You have many low-vision readers and want to give them easy access to a customized stylesheet with a larger typeface.Your site is schizophrenic and you want to be able to change the look quickly. Whatever the reason, it’s amazingly easy to create a function that swaps between multiple stylesheets using jQuery. The first step of course is to build several different CSS files, which we’ll then swap between. Once that is done, we can dive into the XHTML and jQuery that makes the magic happen. The XHTML First, we need to create a set of links that will allow the user to swap between CSS files. Here I have three links, each with a “rel” attribute indicating which CSS file the link will load. The jQuery Like I promised, the jQuery is really simple: $("link.changeme").attr("href",$(this).attr('rel'));

How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically JavaScript Style Switcher for CSS by Christopher Heng, thesitewizard.com It may be useful sometimes to provide your visitors with the option to change the appearance of your website. Perhaps you want to provide theme support for your site. Or you may simply want to provide a bigger font size version of your site for older users who may not be able to read the small-sized text you use by default. This article describes how you can use JavaScript to dynamically change the cascading style sheets, or CSS, of your website. Prerequisites One of the assumptions I will make in this tutorial is that you know how to write HTML and CSS. If you have not already done so, you may want to read the following articles as well. Steps to Adding a Style Sheet Switcher in JavaScript Let's assume that we have the following style sheets defined in our HEAD section. Demo You can check out how the script works using the test copy loaded with this page. Browser Compatibility Conclusion Do you find this article useful?

Change style sheet Page last changed today See section 9D of the book. Opera 8 and lower don't support the styleSheets[] array. On this page I try to change the background colour of a PRE, not by accessing the element directly but by changing the entire style sheet of the page. Unfortunately browser incompatibilities are so severe that this script isn't really usable in practice yet. Please note the difference between traditional DHTML and this example script. See also the W3C DOM - CSS compatibility table. Definitions A page contains one or more style sheets which in turn contain one or more rules which contain the actual style declarations. The purpose of our test script will be to change the white background colour of the pre.test to its normal value #EEF0F5. All linked and embedded style sheets are available through the document.styleSheets array. quirksmode.css, the general style sheet for the entire site, is document.styleSheets[0]. cssRules is supported by Explorer Mac, Mozilla, Safari, and Opera. Example

Switch stylesheets with jQuery | kelvinluck.com Update: I’ve released an updated version of this code which is more flexible. Please check it out. I’ve just discovered jQuery which is an awesome JavaScript library. From the horse’s mouth: jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable. As an example of how succinct and easy code written with jQuery can be I put together a little example that allows you to add a stylesheet switcher to your site. The stylesheet switcher allows your visitors to choose which stylesheet they would like to view your site with. The JavaScript code that powers the example looks like this: /** * Styleswitch stylesheet switcher built on jQuery * Under an Attribution, Share Alike License * By Kelvin Luck ( ) **/ I’d appreciate any feedback on the effectiveness of this technique.

Two Line Style Switcher • Simple Tutorial to Swap CSS Files for HTML Web Pages How to Swap CSS Files Separating the content of your web site from the look and feel makes your web site more maintainable and enables you to more easily experiment with different designs. That look and feel belongs in the style sheet (.css file), and this tutorial covers how to let your users switch styles while keeping the underlying HTML exactly the same. You could use this to offer customizable font sizes on your web site or to allow a client to easily evaluate different designs you've created. Let's start with a very simple way to tell a web page to automatically to use a different style each day. Basic HTML Test Page Create a web page as follows: <html><head><title>Day Trader</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body><h2>Live in Style</h2></body></html> This simple web page will always use the same "style.css" style sheet. Having a different design each day for your web site may be fun, but it's not really that valuable. style.css "Execellent.