ansaurus

Question

Answer 1

+1 A:

EDIT: http://stackoverflow.com/questions/671851/reason-for-css-property-precedence

One way is to produce the css file dynamically from a php script.

You would include the file like:

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

And the css.php file would look something like this:

<?php
header('Content-type: text/css');
// whatever you want to ouput depending on the user
?>

zaf 2010-04-27 17:36:31

I don't want to dynamically include a css file. Since only certain classes needs to be changed and not all. Say suppose 100 classes in my default classes and i want to allow user to only change 3 of them. In this case it is not practical to dynamically build a new css file. I want to know which has the precedence? A external css file, inline css or the one which you write in <script type="text/css"></script> and whether all the browsers follow the same practise?

Ankit Rathod 2010-04-27 17:42:04

OK, updated answer with link.

zaf 2010-04-27 17:55:10

Answer 2

+3 A:

Load the default stylesheat in a style tag, and put your dynamic styles in a style tag after that.

Which style to use when different styles target the same element is determined by specificity, and if the selectors are the same, by order. The style that is found last is used.

Guffa 2010-04-27 17:40:07

+1: I was going to say the same thing, but the server reset and lost my response.

Robusto 2010-04-27 17:49:35

Answer 3

+3 A:

The approach mentioned by zaf would require that you reload the page when you want to switch styles sheets. What I find to be a better approach is to add a classname to the body if you have the option of using javascript

<body class="theme-1">
  <div class="main"><div>
</body>

Then each of your style sheets should contain the theme name in the declarations:

--theme1.css

.theme-1 div.main {
  background-color: #eee
}

--theme2.css

.theme-2 div.main {
  background-color: #f30
}

To switch style sheets, you just remove the old theme name and add the theme you want to use.

Then you can even add style sheets dynamically if you provide an interface for the user to customize the look and feel of your page.

New Improved Answer:

I just found a nice solution implemented by the folks at extjs. It involves loading all the stylesheets you want using <link> tags. The trick is that you can set a disabled property on the link element which will cause it not to apply.

For an example, use firebug and look at

http://www.extjs.com/deploy/dev/examples/themes/index.html

Look for styleswitcher.js and look at the function setActiveStyleSheet

function setActiveStyleSheet(title) {
  var i,
     a,
     links = document.getElementsByTagName("link"),
     len = links.length;

  for (i = 0; i < len; i++) {
    a = links[i];
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if (a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

Juan Mendes 2010-04-27 17:45:11

Gufa's approach works except that if you want to go back to a different theme, you need to rewrite the css so that it's now last in the order

Juan Mendes 2010-04-27 17:46:31

Hi Jaun,I am allowing user to use a color picker for selecting a background color of page. So, i dont think this approach too will work. As this static approach, we are defining stylesheets in advance with prespecified colors.Can you tell me which has precedence? External css file, inline css or the one in <script></script>?Till now i have found Guffa's approach to be most suitable for my requirement.

Ankit Rathod 2010-04-27 17:51:09

No, i feel Gufa's approach will work even when different theme is loaded.

Ankit Rathod 2010-04-27 17:54:23

To answer your question about CSS precedence. It goes in order like this: inline, embedded and external. So inline styles will override embedded and external and embedded will override external.

Erikk Ross 2010-04-27 17:58:32

I didn't think there was a difference between css styles on a page or from an external sheet. Inline does override anything else you set though.@Nitesh, you can still use the approach I suggested for body background using body.theme-1 as the selector for the body

Juan Mendes 2010-04-27 19:24:36

ansaurus

tags:

views:

answers:

beginner's question about CSS

related questions