HTML and CSS Reference
In-Depth Information
Problem Solving: Finding and Fixing Style Sheet Errors
As a style sheet increases in size and complexity, you will likely encounter a major head-
ache: a Web page whose appearance in a browser does not match the style you planned for
it. Once you recognize that a syntax error in your style sheet likely caused the browser to
ignore some of your style rules, you need to figure out where the error is. The following are
some errors that can cause your style sheets to fail:
•
Missing semicolons
—All style properties need to be separated by a semicolon. If you omit
a semicolon, all subsequent properties within the affected style rule will be ignored.
•
Missing curly braces
—Every style rule must be enclosed within a set of curly braces.
Failure to close off the style rule will cause that style rule and all subsequent rules to be
ignored.
•
Missing closing quotes
—If you use quotes within typeface names or other text strings,
you need to enclose the entire text within either double or single quotation marks.
Omitting a closing quotation mark will cause the rest of the style sheet to fail.
•
Typos
—All selector names, style properties, and style values need to be typed correctly.
•
Improper application of a style
—Some styles are associated with all elements, but some
are not. For instance, you can't change the color of an inline image using the back-
ground-color style, no matter how much you might want to.
•
Conflicting properties
—Remember the general principle that
the more specific style
outweighs the less specific
. A style rule in one part of a style sheet might be superseded
by a rule somewhere else in the file.
•
Inherited properties
—Properties are also inherited down the document tree. A style
property applied to a
section
element affects all nested elements unless you override it
with another rule.
If a problem persists after finding and fixing these common errors, try other techniques
to locate the source of the trouble, such as removing style rules one by one until you locate
the source of the trouble. Also consider using the
!important
keyword to temporar-
ily force the browser to apply a rule regardless of specificity. Finally, many browsers now
include debugging tools to assist you in writing your CSS code. Use these tools whenever
you encounter an error that you can't easily find and fix.
You've completed your work on creating and editing the text styles used in the Sunny
Acres home page. In the next session, you'll explore how to design styles for hypertext
links and lists, and you'll learn how to use CSS to add special visual effects to your
Web pages.
