CODEWITHSUNDEEP
htmlcss
The Furious Bear
The Furious Bear

Reputation: 572

Is there a way to use multiple CSS stylesheets in one masterpage?

I'm creating a web application and have written a CSS stylesheet to apply to all colour, layout, positioning etc. It's about 800 lines in all.

I want to provide the user with the option of selecting a colour scheme preference; at the moment this means I have 6 copies of the CSS file in my project, each with different colour attributes only (about 15 or 20 lines) to represent 6 different colour scheme options.

This seems like a lot of cumbersome duplication; all other CSS attributes remain the same in each copy.

Is there a way to separate the colour attributes into a separate CSS stylesheet to be applied with the general CSS stylesheet to the page?

Upvotes: 0

Views: 149

Answers (3)

Thomas Lai
Thomas Lai

Reputation: 317

just use 

var bleh = $('body');
function changeToBlue() {
    bleh.css("background","blue");
}

Upvotes: -1

user2067005
user2067005

Reputation: 839

Make color style sheets. Lets say your main has a class called

Main.css

.example{
float:right;
width:100px;
height:auto;
}

And you want the color applied to it with a user specified color scheme.

Make the smaller color schemes like so

Color1.css

.example{
color:orange;
}

Color2.css

.example{
color:red;
}

In the main index page would look like this:

<head>
<link rel="stylesheet" type="text/css" href="main.css" />

    <?php
    //user get color scheme from db query
    $color = //user color variable
    if($color == 1){
    echo '<link rel="stylesheet" type="text/css" href="color1.css" />';
    }elseif($color == 2){
    echo '<link rel="stylesheet" type="text/css" href="color2.css" />';
    }
    ?>
</head>

That's the only way I can think of.

Upvotes: 1

fachammer
fachammer

Reputation: 181

One way to accomplish your goal is to extract every CSS-Element which is influenced by coloring and put it in one single selector like:

p, li, #whatever, .someClassInfluencedByColoring{
  color: #[yourColor];
}

you could put this declaration into one CSS-File (for example color.css) and then use import statements like the following in a master CSS-File:

@import url("color.css");

Another way would be to use SASS or LESS and use variables where you define your color once in every stylesheet.

Upvotes: 2

Related Questions