The Markup and Declaratives: A No-Javascript CSS Style Switcher

In the previous installment of Taming the Wild Wild Web, we discussed a new method for switching the CSS of a page without using Javascript.

Now is the time when we’ll begin constructing an example to showcase such server side functionality.

To begin, we’ll build a simple HTML page that has both a default and an alternate stylesheet.

First, let’s get to the markup:
You can view the entire HTML markup here.

The most important part of our document is the declaration for the two style sheets.

<link rel=“stylesheet” type=“text/css” href=“default.css” title=“Default” />

<link rel=“alternate stylesheet” type=“text/css” href=“alt.css” title=“Alternate” />

The corresponding styles for our document can be found here and here, respectively.

It is worth noting that in this example we redeclare our properties and values for every selector, but in a production level implementation you may want to only use a core style sheet and have the selectors’ properties and values that change only be present on your CSS files that will get the swap.

Notice that we have a link in our footer that references our PHP file which will route our style change request.

In the next installment of Taming the Wild Wild Web, we’ll go over the procedural aspects of this PHP router and the server side includes necessary to give our page its dynamic style switching capability.