Question

I am attempting to create a global style sheet for my site.

It has been working well up untill it reached the 1471 lines. Now some id’s and class tags are styled and working whilst others are not.

When I take away a bunch of styles from the sheet, the ones that was not working then begin to work.

I have no idea why this is the case and nor do I know how to fix it.

I would prefer not to create separate style sheets for different features (such as buttons and tool tips etc).

Any help is much appreciated.

Answer 1

First of all, make sure to check for syntax errors in your CSS.

Assuming you already did that, usually this kind of thing happens when you are trying to style something externally that is already being styled at a level closer to the element. Basically, the order of precedence is this:

1. Inline styles
2. Block css inside the html view
3. External style sheets

For example, lets say you have this:

<div id="test" class="testclass" style="position:absolute;"></div>

and then in your external style sheet you have:

#test {
position:relative;
}

The in-line style is going to get precedence because it’s higher up on the chain.

The same is true of specificity. The more specific a rule is, the higher its precedence.

For example, this:

.testclass #test {
position:absolute;
}

is going to take precedence over this:

.testclass {
position: relative;
}

because it is more specific. So keep these things in mind, and also obviously keep in mind that each view has to specify which style sheet(s) to look for, and see if that doesn’t fix your issue.