Alternative StyleSheets

by Charlie Calvert for Prog109

Define two stylesheets, using the rel attribute to mark one as alternate

<link href="../styles/basic.css" rel="alternate stylesheet" type="text/css" id="basic">
<link href="../styles/styles.css" rel="stylesheet" type="text/css" id="default">

Now styles.css will be the active stylesheet, and basic.css will sit in the background waiting to be activated. To activate it, simply switch which stylesheet is marked as the alternate.

<link href="../styles/basic.css" rel="stylesheet" type="text/css" id="basic">
<link href="../styles/styles.css" rel="alternate stylesheet" type="text/css" id="default">

We can, of course, use JavaScript to perform this switch.

Create a button, and define an onclick method for it in a JavaScript file:

window.onload = () => {

    const appearanceButton = document.getElementById('appearanceAction');

    appearanceButton.onclick = () => {
        const defaults = document.getElementById('default');
        const basic = document.getElementById('basic');



function enableStylesheet (node) {
    node.rel = 'stylesheet';
function disableStylesheet (node) {
    node.rel = 'alternate stylesheet';

When the user clicks on the button, the default (style.css) stylesheet will be deactivated and the basic stylesheet will be activated.

Note: Don't name a variable default. It is a reserved word. A simple workaround would be to call it defaults. This is what I have done in the code shown above.

        const defaults = document...