Multiple styesheets

JavaScript
1

Hello,

This is somewhat of a cheeky request as my knowledge of jQuery or JavaScript is close to nothing as I find it very confusing. I am creating a personal website that uses alternative style sheets (just background and text colours changes for colour blind visitors) and there are four styles in total; however, I also have a jQuery menu that has style sheets, again just background and text colours change.

I have two questions:

  1. Is there a way of getting two lots of style sheets to change at the same time or is this impossible?
  2. Would it be best to have a default style sheet and the alternatives style sheets only to have listed the changes or the complete style sheet code?

I don’t do this for a living, it’s more of a hobby, yet I will require very clear guidance as code has never been by forte.

Many thanks in advance.

2

You can apply a certain class to the body, like

document.body.className = 'alternate-style-1';

The corresponding styles would then look like e.g.

/* The default style */
div {
  background-color: red;
}

/* The alternate style */
.alternate-style-1 div {
  background-color: blue;
}

These alternate styles will always have a higher specifity due to the prepended class, so they will override the defaults no matter where they appear (but you’d usually just put them after your default styles anyway).

Yes, only define the alternate styles (actually, only the relevant properties) where they differ from the defaults – everything else would be redundant and of course harder to maintain. Such as

div {
  font-size: 200px;
  background-color: red;
}

.alternate-style-1 div {
  background-color: blue;
}
1 Like
3

Hello m3g4p0p,

Many thanks for your suggestions. Assuming I understand correctly “document.body.className = ‘alternate-style-1’;” class name must be applied to both style sheets so they change in sync?

It did make sense to only list the very few items that change rather than having the complete code.

Kind regard,

4

You only need one style sheet where you define the defaults as well as the alternate styles. The alternate styles just only take effect when you’re adding that class to the body.

5

Hello meg4p0p,

Apologies about the late reply. Yes, I have given this much thought and realised that I can merge the two CSS files into one CSS file and then it’s much easier to manage.

Many thanks for your assistance,

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.