User Controlled Styles with JavaScript and CSS Part Three

Welcome to the third and final part in this series; in parts one and two we created the test HTML page, a series of CSS files and the JavaScript code needed to make it all work at a basic level.  This part of the tutorial is going to look at the method by which we are going to ensure that when a user visits our site and makes some style choices, those choices remain if they navigate away from the site and then later return.

As we left things in part two, the page itself was working and the style control panel could be used to easily change the font size and theme of the page.  Visitors also had the opportunity to create a printer-friendly page consisting of just black and white styles.  Before we look at saving visitors style choices, we're just going to tidy a couple of things up.

We didn't go back to the HTML file and add the relevant event handlers or ID attributes in part two, but if you went ahead and did this anyway, you may have noticed when switching to the print medium style that the controls div loses its background colour and the link text changes to purple to denote a visited link.  This is only a trivial problem admittedly, but to me it just doesn't look professional.  You can fix it by adding the style rules to be applied when no colour stylesheet is in force to the userControlledStyles.css file.