By miasmo on

I am not very experienced with CSS, so perhaps this is a dumb question, but:

I have created a Zen subtheme using Zenophile. I have made numerous changes in layout.ccs, html-elements.css, and my_subtheme.css. When I try to see what's happening in Firebug, some of the css is crossed out because it's being overridden by other stylesheets. I am having a hard time figuring out why the layout looks like it does, and the whole thing is becoming a big complicated mess. There is another stylesheet called sidebars.css, which I have not touched but seems to also be overriding some of my changes in layout.css.

Can anyone offer me some general advice as to how to organize these stylesheets? Should I consolidate them into fewer sheets? Should I be making my changes to a single sheet? What is the logic and general strategery for this? Any advice will be greatly appreciated.

⋅ Categories: Drupal 6.x

Comments

jarek foksa’s picture

jarek foksa commented

First and foremost you must have a good grasp of how CSS specificity and cascade work. This article on Smashing Magazine should be a good start.

Some of the rules provided by core modules or Zen stylesheets are tricky to overwrite because they are defined with very specific selectors. Here is an example of such rule from system.css:

html.js .resizable-textarea textarea {
  margin-bottom: 0;
  width: 100%;
  display: block;
}

You will not be able to overwrite it with textarea or .resizable-textarea textarea selectors because they have lower specificity than html.js .resizable-textarea textarea selector. Even html.js .resizable-textarea textarea might not work if your custom stylesheet is loaded before system.css from core. So you should pay attention not only to order in which you write your rules but also how specific they are.

Sometimes it's easier to completely disable some core stylesheets. I always disable defaults.css, node.css and system-menus.css because I have found that I would be overwriting most of their rules anyway.