Most Common Errors - Web Standards: Mastering HTML5, CSS3, and XML - page 470

Listing 15-21. The Correct Markup for Listing 15-19
<div id="main">
<p>The is the main content of the site.</p>
<p>The second paragraph should look like the first one.</p>
<p>In fact, all paragraphs of the document have the same styles.</p>
</div>
Listing 15-22. The Optimal CSS Rules
#main p {
margin: 10px 15px 5px;
font-size: 1.4em;
color: #1d4c90;
}
If this is not a unique section of the page, the id attribute could be omitted, and the CSS ruleset could be
modified in order to be applied to p elements in general.
Color Errors
CSS validation often results in color warnings that indicate potential problems with foreground and background colors.
For example, if a very light font color is used on a white background, it might be hard or even impossible to read the
content. In such cases, the W3C CSS Validator gives the message “Same colors for color and background-color in
two contexts.”
However, some of these messages can be considered as false positives since there are cases when visibility is
not a problem at all (transparent or overlapping layers, text on background image, and so on). To be on the safe side,
the text must remain readable even if other components of the page (for example, background image) cannot be
downloaded.
Incorrect Locations
Incorrect location errors are typically caused by not properly closed rulesets. They should be checked one by one
near the line indicated by the W3C CSS Validation Service error message “The element can't appear here in the
context CSS 2.1.”
Transparent Backgrounds
Transparent surfaces are popular throughout the Web. The transparency of a div is usually set as shown in Listing 15-23.
Listing 15-23. A Typical but Nonstandard, Browser-Dependent Ruleset for Transparency
#transdiv {
opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
}