Check shorthand properties carefully to see whether you left out any
property values when you created the rule. The problem with shorthand
properties is that they assign values to all properties for which they are
shorthand—even if you set only one value! For example, background:blue; sets
background-color to blue, and it also sets background-image to none,
background-repeat to repeat, background-attachment to scroll, and
background-position to 0% 0%. If a rule containing background:blue; has a
higher cascading priority than an overlapping rule that assigns background-
image to url("image.jpg"), you will not see the background image because the
shorthand property background:blue; overrides it and sets background-image
to none.
Shorthand properties include margin, border, padding, background, font, and
list-style.
font is a particularly troublesome shorthand property because it combines
so many properties into one, and all these values are inherited! These
properties include font-family, font-size, font-weight, font-variant,
font-style, and line-height. Remember that assigning even one value to
font, such as font:1em;, causes the browser to set the default values for all
these properties!
Verify a browser loads all your style sheets. You can make sure each one is
referenced through a statement within the section of your
HTML document, or through @import statements in style sheets. If you are not
sure a style sheet is being loaded, you can place a unique rule in the style sheet
to see whether it gets applied. Such a rule would be something obvious, like
*{border:1px solid black;}.
Avoid using @import statements. If you use @import statements, verify they
occur as the first items in the style sheet to ensure they have a lower priority
than the rules in the style sheet.
Verify style sheets are loaded in the order you want by listing
statements and @import statements in order of ascending priority. Rules at the
same level in the cascading order are overridden by rules in style sheets linked
or imported later. But remember that rules with a higher cascading priority
always override rules with a lower priority no matter in what order the rules
occur in a style sheet or whether they occur in style sheets linked or imported
later.
Verify the server sends text/css as the Content-Type header for CSS style
sheets. Mozilla browsers refuse to use a style sheet unless it has a content type
of text/css. You can view the HTTP headers in Mozilla browsers by using the
Web Developer Toolbar and selecting the menu option View Response
Headers.
Remove HTML elements that may have been put in a CSS style sheet, such
as
