TNT's Bootlegged CSS Demo

Same Page, Different Stylesheets

Ok. We admit it. We lifted this code from a demo at W3Schools and tweaked it for our purposes. We got rid of the Lorem Ipsum and replaced it with delectable verbiage from Cupcake Ipsum because our spell checker in VSCode was going bonkers.

This page uses <div> and semantic elements to group different sections of the HTML page. It demonstrates how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:

Stylesheet1, Stylesheet2, Stylesheet3, Stylesheet4, Stylesheet5, Stylesheet6

Don't want styles?!

Select No Stylesheet to see how the page looks like with an empty stylesheet.

What about the JavaScript?!!...

Yeah, JS was used to select various style sheets. Make the page wider to see some info about it...

    function chooseStyle(ndx){
        var styleLink = document.getElementById("styleLink");
        var aSheetPrefix = "styles/styleSheet";
        console.log("...chooseStyle...");
        var chosenSheet = aSheetPrefix + String(ndx) + ".css";
        styleLink.href= chosenSheet;
        console.log("chosenSheet = " + chosenSheet);
        if(ndx == 0){
            specialStyleLink.href="styles/none.css";
        }else{
            specialStyleLink.href="styles/specialStyles.css"; 
        }
    }//end chooseStyle

    <li class="menuitem" onclick="chooseStyle(1);">Stylesheet 1</li>