Pin Me

Using a CSS Alternate Stylesheet

written by: Sam OBrien•edited by: Amber Neely•updated: 8/7/2010

Learn a simple solution for using a CSS alternate stylesheet for your website or the website of a client. A basic, but sound knowledge of (X)HTML and PHP is required.

  • slide 1 of 3

    Why Use a CSS Alternate Stylesheet?

    Web development and design today calls for the separation of style and content achieved by coding cascading style sheets (CSS) to control style or presentation. Most everyone experienced in web development has faced the frustration of CSS coding for different browsers, at different CSS levels, and for difficult customers. Often the solution to these problems is simply to provide a CSS alternate stylesheet or perhaps multiple stylesheets. During my web development and design training, I was introduced to this concept; however, I found the method that I was taught for allowing for the use of a CSS alternate stylesheet very cumbersome. Not only was there an excessive amount of code, a database was required.

    Thanks to another web developer's post on the Internet and the help I received from one of my instructors who didn't teach the cumbersome way, I got the idea of how to achieve this with a few lines of code and no database to hold the sheets. You should already understand extensible hypertext mark-up language (XHTML) and hypertext preprocessor (PHP). The concept is simply to generate dynamic HTML that calls an external CSS alternate stylesheet using PHP; you should know how to link to an external stylesheet.

    You can even safely allow website visitors to choose the style in which they would prefer to navigate the site. First, you code as many stylesheets as you want or need. Second, upload them to the server. Third, write the PHP script to generate the dynamic HTML code needed to call any one of the desired styles, and, if you desire, allow visitors to choose which style they would like to see. I placed all of this code in a file called header.php as I "sliced" up the pages of the site into the header, body, and the footer.

  • slide 2 of 3

    An Explanation of the Code

    Below are screenshots depicting the PHP code needed to generate the dynamic HTML code to call a user-selected CSS alternate stylesheet; the necessary HTML code to give users that freedom; and finally, an idea of what the actual choice will look like to the visitor. The screenshot of the PHP code shows that I began by registering and starting a session; you don't have to use the same name as I did for the session variable (CHOSENSTYLE). Don't forget this important step because, if you do, the chosen style will not carry throughout the site. Remember that the web is stateless, meaning that the pages of a site stand alone unless they're "linked" via sessions.

    Next, check to see if a choice has been submitted and then begin your conditional statement. I chose to use a switch statement because I have four stylesheets from which a user can select. I certainly could have used an if...else...elseif construction, but switch statements create cleaner code when dealing with multiple cases. If, however, you are more comfortable with the if...else...elseif construction, by all means use it; the concept is the same. Finally, I end with an if...else statement that tells the script to echo the HTML code needed to link the chosen alternate stylesheet if one is selected and, if not, to echo the link for the default style. That's all there is to the PHP code needed. You'll now need to "match" XHMTL code to finish the operation and allow the user an interface to control style.

    As you can see, I chose to use radio buttons for visitors to indicate the style they want; the default automatically displays; notice the "checked = checked" in the HTML code that corresponds to the PHP code. Also, notice that the name for the radio button is the exact same name as the superglobal $_POST variable for the switch statement in the PHP script. If you use a different variable name, the script won't work. Notice also that the names of the values for the radio buttons match the names of the alternate stylesheets. This is the code that will generate a sort of user interface for the visitor who wants to select a CSS alternate stylesheet.

  • slide 3 of 3

    The PHP Script, HTML Code, and User Interface