CODEWITHSUNDEEP
css
webmasters
webmasters

Reputation: 5831

Different color schemes inside one stylesheet

I have different styles for my theme (different color schemes).

First I load the default css and secondly a css stylesheet with particular colors, etc depending on what color scheme I want to use.

Testing the speed of my site, I have noticed a delay because I need to load two style-sheets.

Is there a way to put all styles inside one file and not use two different ones? Also this has to be cross browser.

Upvotes: 1

Views: 2990

Answers (6)

Tom Gaulton
Tom Gaulton

Reputation: 393

For the color overrides you could nest them within an id selector, and give that id to the body element in order to choose a color scheme. This will allow you to store many themes in one file.

For example

/* defaults */
h1 { color : black; }

/* light theme */
#light h1 { color : grey; } 

/* neon theme */
#neon h1 { color : pink; }

Then set the body class, as

<body id="neon">

If you are using LESS you can easily wrap the top-level style around your entire colour scheme to keep the layout neater. e.g.

#light {
    h1 { color : grey; } 
    p { color : silver; }
}

Upvotes: 2

austincheney
austincheney

Reputation: 1199

I have various color schemes inside a single stylesheet. To demonstrate changing the color scheme go to http://prettydiff.com/ and change the value on the color scheme list to a different value. All this does is just change the class attribute on the body tag, which then refers to different CSS properties in the one CSS file.

The stylesheet is at http://prettydiff.com/diffview.css

Upvotes: 0

3on
3on

Reputation: 6339

You could use less and minify you CSS.

You should use a multiple classe like for example you could to thisM Or just minify you CSS.

<h1 class="big-text theme-blue"></h1>

then in you css you use rules such asM

.big-text.theme-blue

Upvotes: 0

mathieu
mathieu

Reputation: 31202

Depending on your server side technology, you should "bundle" your CSS and JS, so they will get served to the client as one file. This will also enable you to compress and minify your .js and .css.

Upvotes: 0

martinczerwi
martinczerwi

Reputation: 2847

When copying all the styles into one file, you could define two classes for body, and prefix all the styles with the according class.

So you could have <body class="scheme1"> and your CSS-Rules would be like .scheme1 h1 {}

Upvotes: 0

Andrew Rasmussen
Andrew Rasmussen

Reputation: 15099

You should not really notice a huge delay in loading two style sheets vs loading one.

However, to answer your question, you can copy all of the contents of the second stylesheet file to the end of the first one and you should end up with the same result.

Upvotes: 0

Related Questions