Customizing styles: User-Controlled Style Sheets – Part III
In this third part and final part of our article series about user-controlled style sheets, we will learn how to make switching between style sheets both reversible and persistent across all pages of your website for your visitors.
Customizing styles: User-Controlled Style Sheets – Part III (Page 1 of 6 )
Welcome to Part III of the series "Customizing Styles: User-controlled Style Sheets." It’s our last article in this series, aimed specifically at swapping entire style sheets in Web documents, making the style change reversible and even persistent across different Web pages.
Hopefully the methods to be explained here will boost your already vast knowledge of style sheets and have applications beyond this article. But, wait! Did you say you’re already an expert on the subject? Okay, good for you, but I must consider the kind people who wish to learn more about it. Sounds fair. So, join me in this last trip. We’re going to make the whole style sheet swapping process a really fun experience. Let’s get started.
To swap or not to swap. That is the question.
In first place, we need to tackle the problem of making the style change process really reversible. This sounds like common sense, since we want to give users the possibility to alternate between different style sheets, and offer a straightforward way to return to the default style sheet loaded initially. At this point, we’re talking about a simple but real style-switching tool, which might be implemented with minor effort. Thus, let’s declare the two corresponding external style sheets, "default.css" and "accessible.css" respectively, in the <head> section of the Web document, just as we did in the previous examples:
// disable default style sheet
// get style sheets
// exchange style sheets
// disable previous active style sheet
// enable new style sheet
// execute code when page is loaded
Before we start explaining the function code, let’s complete the listing, showing the necessary HTML to make the style change work. It is as follows:
<p>Content for div1 goes here...Content for div1 goes here...Content for div1 goes here...</p>
<p>Content for div2 goes here...Content for div2 goes here...Content for div2 goes here...</p>
<p>Content for div3 goes here...Content for div3 goes here...Content for div3 goes here...</p>