Dynamic Style Sheets?

Is it possible to create a dynamic Style Sheet?

I would like to create web page for my portfolio where a user could select a choice (e.g. radio button) and have that change what is in my CSS Style Sheet so that a particular element changes across the board.

Does that make sense?! :-/


We can grow old together!


The only immediate issue with JavaScript for the use of conditional styles would be if scripting were disabled. While the PHP (server-side) solution may seem like extra work where perhaps it could otherwise be done through active DOM manipulation, I wouldn’t want to push the client-side solution if it’s going to be used extensively and is required to have a set effect. In this case it’s physical features being made active, not just a degrading mechanism, IMO PHP is still the best way forward. :slight_smile:

See, what you’re asking for is the CSS to change itself which isn’t possible because CSS isn’t a dynamic language, it’s static like HTML. When HTML changes dynamically it’s not due to the HTML, it’s due to the PHP altering the HTML. Therefore the only way to change the code would be to use scripting or PHP or something to make the dynamic changes as the code is rendered. Which is why you’d need to use scripting - to make the stuff happen as you need it.

I thought it was either Santa (pre-diabetes) or Darwin (looking particularly curious) :smiley:

Yes it is possible… you would need to set no-caching to the CSS file (as you said) in htaccess (actually perhaps if the code changes it won’t fetch the cached version) and you would use something like this (you could do a style.php file)… http://fwebde.com/css/php-dynamic-css/

Instead of using $_GET which loads variables in the URL string, he could use $_POST which would keep the information clean from the URL and strictly on the server side

For something like this, you don’t even need jquery.

You could use just plain vanilla javascript and probably end up using a lot less code. The demo I posted earlier is fairly basic but it wouldn’t take much to expand that to do more.

Just kidding! :smiley:


Could you use PHP to “build” a CSS stylesheet on the fly?

What I was envisioning - forgetting fast - is an ability to be able to click check boxes or radio buttons in a control panel and then have it change the style of elements.

Not the same as having 3 stylesheets on hand, mind you, but a way to tweak things more.

Say I want to change all control from white to light blue, and make my background dark blue from white, and my text from black to white. I could click those element boxes and voilà, things change.

Next maybe I’d make the control yellow, text red, and leave the background white.

I just think that would be a good way to do a “website color scheme picker” as well as show people the power of CSS!


Worse? :nono:

Kalon, that is sorta what I was envisioning, although I like the link Alex posted which used PHP better since it is more user-proof!

Thanks just the same!



I didn’t have time to try that code, but that looks pretty close to what I wanted, and it is better because it can’t be disabled like Javascript!

Thanks!! :tup:


Meh, depends on how important changing styles is. If changing colour doesn’t change content, I don’t see why it can’t be in JS.

If it’s changing something important, then I’d start getting worried (display: none/block).

That’s an interesting caveat. In that case would a Javascript solution actually be better? That would manage the switching on the client-side in script so you wouldn’t have to worry about caching. It is at least another option. Alex has a good bead on the PHP solution. For a JS solution, I’d look at different jQuery options. Changing styles directly is one of the most basic jQuery options, and adding / removing classes is only slightly more complicated. Like the PHP, it would not be terribly difficult. For simple things like switching colors, I would do something like have a color picker (you can build your own, but there are also downloadable plug-ins in the UI libraries). When you pick a color, take the value and pass it to jQuery and change the color inline based on the input color. For more complicated transformations, define classes and use jQuery to add / remove the classes based on your application input.

Indeed you can, if you visit the link I provided earlier it explains how to make a PHP powered stylesheet. :slight_smile:

Lol, I’m only 44 :slight_smile:
Sometimes it feels like 100 though :cool:


He isn’t 100 (or close to it), his avatar is just of an old man.


Thanks for the links! (I’ll check them out tomorrow.)


P.S. Are you like 100?! :slight_smile:


As Ryan pointed out, that is done with a script. You will find several examples by doing a search for “Style Sheet Switcher”.

Here is a tutorial that Eric put together.

Did you follow my original question? (It’s late and my brain is fading…)

I was thinking if you could change your CSS on the fly then you could give your website a whole different look (or elements inside it).

How would you use Javascript or PHP to do this?

There isn’t a why to change the CSS file itself on-the-fly sorta like how you can use PHP to change a web page’s HTML on-the-fly?


You would need to incorporate JS into the mix (or PHP) depending on if you want it automatic or not

But CSS alone can’t do this.