Fixing the Problems

Fixing the Problems

Problem 1In the body rule set, the font family name Times New Roman contains whitespace. Any font with whitespace should be wrapped in quotation marks. Listing 22.2 shows the problem and Listing 22.3 shows the corrected code.

Listing 22.2. CSS Code Showing an Unquoted font-family Name

body
{
    font-family: times, times new roman, serif;
}

Listing 22.3. CSS Code Showing a Quoted font-family Name

body
{
    font-family: times, "times new roman", serif;
}

Problem 2The border property in the #container rule set does not have border-style specified. This border will not be displayed because the default border-style is none. A border-style dotted, dashed, solid, double, grooved, ridged, inset, or outset should be specified. Listing 22.4 shows the problem and Listing 22.5 shows the corrected code.

Listing 22.4. CSS Code Showing an Incorrect border Declaration

#container
{
    border: 1px gray;
    background-image: url("background.jpg");
    background-repeat: repeat-x;
    background-attach: fixed;
    width: 700;
}

Listing 22.5. CSS Code Showing a Correct border Declaration

#container
{
    border: 1px solid gray;
    background-image: url("background.jpg");
    background-repeat: repeat-x;
    background-attach: fixed;
    width: 700;
}

Problem 3The background-attach property does not exist. The correct property is background-attachment. Listing 22.6 shows the problem and Listing 22.7 shows the corrected code.

Listing 22.6. CSS Code Showing an Incorrect Property

#container
{
    border: 1px solid gray;
    background-image: url("background.jpg");
    background-repeat: repeat-x;
    background-attach: fixed;
    width: 700;
}

Listing 22.7. CSS Code Showing a Correct Property

#container
{
    border: 1px solid gray;
    background-image: url("background.jpg");
    background-repeat: repeat-x;
    background-attachment: fixed;
    width: 700;
}

Problem 4The width value in the #container rule set does not contain a unit of measurement. Browsers will have to guess whether the author requires the width to be rendered in points, picas, pixels, ems, exs, millimeters, centimeters, inches, or percents. Listing 22.8 shows the problem and Listing 22.9 shows the corrected code.

Listing 22.8. CSS Code Showing a Width Measurement Without a Specified Unit Value

#container
{
    border: 1px solid gray;
    background-image: url("background.jpg");
    background-repeat: repeat-x;
    background-attachment: fixed;
    width: 700;
}

Listing 22.9. CSS Code Showing a Width Measurement in Pixels

#container
{
    border: 1px solid gray;
    background-image: url("background.jpg");
    background-repeat: repeat-x;
    background-attachment: fixed;
    width: 700px;
}

Problem 5In the <h1> rule set, the color value is specified as none. This is an invalid value. The value should be specified in hexadecimal RGB, keywords, user interface keywords, or decimal RGB. The author might also prefer the element to inherit its color from the parent, in which case inherit should be used. Listing 22.10 shows the problem and Listing 22.11 shows the corrected code.

Listing 22.10. CSS Code Showing an Incorrect Color Value

h1
{
    font-size: 200%;
    color: none;
}

Listing 22.11. CSS Code Showing a Correct Color Value

h1
{
    font-size: 200%;
    color: inherit;
}

Problem 6Some authors prefer to use upper- and lowercase class names. For the class to be applied, the uppercase and lowercase letters must be exactly the same within the HTML code and within the class selector.

Let's assume the HTML code contains an IntroductionText class. In this lesson, the author has specified .introductionText. The selector does not match the HTML classname, so the rule will not be applied. Listing 22.12 shows the problem and Listing 22.13 shows the corrected code.

Listing 22.12. CSS Code Showing an Incorrectly Spelled Classname

.introductionText
{
    font-weight: bold;
}

Listing 22.13. CSS Code Showing the Correctly Spelled Classname

.IntroductionText
{
    font-weight: bold;
}

Problem 7In the <h2> rule set, the font-size declaration is missing a semicolon. Browsers will read the next declaration, font-weight: normal;, as part of the font-size declaration. This combined declaration is invalid, so both declarations will be ignored. Listing 22.14 shows the problem and Listing 22.15 shows the corrected code.

Listing 22.14. CSS Code Showing a Declaration with a Missing Semicolon

h2
{
    font-size: 120%
    font-weight: normal;
    color: #34a32;
}

Listing 22.15. CSS Code Showing the Corrected Declaration

h2
{
    font-size: 120%;
        font-weight: normal;
    color: #34a32;
}

Problem 8The hexadecimal number within the <h2> rule set is missing a digit. Hexadecimal numbers must be three or six digits. Listing 22.16 shows the problem and Listing 22.17 shows the corrected code.

Listing 22.16. CSS Code Showing an Incorrect Hexadecimal Number

h2
{
    font-size: 120%;
        font-weight: normal;
    color: #34a32;
}

Listing 22.17. CSS Code Showing a Correct Hexadecimal Number

h2
{
    font-size: 120%;
        font-weight: normal;
    color: #34a323;
}

Problem 9There is an additional comma at the end of the multiple selectors p, ul,. This will cause the entire rule set to be ignored. Listing 22.18 shows the problem and Listing 22.19 shows the corrected code.

Listing 22.18. CSS Code Showing a Comma at the End of the Selectors

p, ul,
{
    font-size: 80%;
    color: 333;
}

Listing 22.19. CSS Code Showing the Corrected Multiple Selector

p, ul
{
    font-size: 80%;
    color: 333;
}

Problem 10The color #333 is missing a # symbol for hexadecimal values. Although some browsers will apply this incorrect declaration, others will not. Listing 22.20 shows the problem and Listing 22.21 shows the corrected code.

Listing 22.20. CSS Code Showing a Color Value Without a # Symbol

p, ul
{
    font-size: 80%;
    color: 333;
}

Listing 22.21. CSS Code Showing the Corrected Declaration

p, ul
{
    font-size: 80%;
    color: #333;
}

Problem 11The a:hover pseudo-class will not be applied because it comes before the a:link pseudo-class. The order must be swapped. Listing 22.22 shows the problem and Listing 22.23 shows the corrected code.

Listing 22.22. CSS Code Showing the a:hover Pseudo-class Before the a:link Pseudo-class

a:hover
{
    color: red;
}

a:link
{
    color: blue;
}

Listing 22.23. CSS Code Showing the Pseudo-classes in Correct Order

a:link
{
    color: blue;
}

a:hover
{
    color: red;
}

Problem 12The #container p { color: black; } rule set will style all paragraphs within the #container element to the black color. The next rule set, p.intro { color: #900; }, is designed to style the first paragraph in the #container element to the #900 color.

However, the p.intro rule set will not be applied because the #container p rule set has more weight. Selectors that contain IDs have more weight than selectors with classes. All paragraphs inside the #container will still be styled to the black color.

For the p.intro rule set to be applied, the selector must be changed to #container p.intro, which gives it more weight. Listing 22.24 shows the problem and Listing 22.25 shows the corrected code.

Listing 22.24. CSS Code Showing a Rule Set Without ID

#container p
{
    color: #000;
}

p.intro
{
    color: #900;
}

Listing 22.25. CSS Code Showing a Rule Set with ID

#container p
{
    color: #000;
}

#container p.intro
{
    color: #900;
}