Multiple CSS option for users [closed]

Answer 1

If you are asking "How can I switch between the two stylesheets when a user clicks one of the links", I would sugest the following approach:

• Leave your default stylesheet as is.
• Preface all your style declarations in your second stylesheet with some unique class, i.e. alternative-css
• When the user clicks on the "alternative" link, add a class to a high level element (such as , or wrapper

For example:

HTML:

    Main Style
    Alternative Style
    

        
Some text
    

Stylesheet:

#wrapper {
    background: #000;
}
p {
    color: #fff;
}

Alternative Stylesheet:

.alternative-css #wrapper {
    background: #fff;
}
.alternative-css p {
    color: #000;
}

JS:

$('#main').click(function(){$('body').removeClass('alternative-css')});
$('#alt').click(function(){$('body').addClass('alternative-css')});

PS: I know you didn't tag this question with jQuery... but this is meant more as a concept and it shouldn't be too hard to write the click handlers in vanilla JS.