Question
Correcting CSS Errors
Instructions: Open your text editor and then open the cssbest04.html and cssbeststyles04.css files
from the Data Files for Students. Several CSS “best practices” are listed on this webpage, but there
are errors in both the HTML and CSS files that you will need to find and correct. Use Figure 4–46
as a guide to correct these files. You will also use professional web development best practices to
comment, indent, space, and validate your work.
1. Correct
a. Open the cssbest04.html file in your editor and then modify the comment at the top of
the document to include your name and today’s date.
b. Open the cssbeststyles04.css file in your editor and then modify and correct the
comment at the top of the style sheet to include your name and today’s date. Correct the
problem with the h1 style.
c. Enter a tag in the <head> section of the cssbest04.html file just below the <meta> tag to
connect the webpage to the external style sheet.
<link rel="stylesheet" href="cssbeststyles04.css">
Open the webpage in a browser to make sure it is properly connected to the style sheet.
d. The current colors of the webpage are not a pleasing combination. Furthermore, the content
goes “wall-to-wall” in your browser, meaning it spans the width of the browser window with
no left or right margin. To fix this, add a div element to surround the content, and then
resize and center it with CSS by completing the following:
• In the cssbest04.html document, after the opening <body> tag, add a <div id="main"> tag.
• Just before the closing </body> tag, add a </div><!--close main--> tag and comment.
- In the cssbeststyles04.css file, add the following style between the body and h1 selectors to
constrain the content within the <div id=”main”> and </div> tags to 70% of the width of
the screen and to center it.
#main { width: 70%;
margin: 0 auto 0 auto;
}
e. Save both fies, then preview the webpage in a browser to observe the changes. Next, you
will work on the colors. Go to www.coolors.co or any color scheme generation site and pick
three complimentary colors for the body text, body background, and h1 text. Apply the
colors in your style sheet. The color declarations used in Figure 4–46 are:
color: #895D88; (for the body selector)
background-color: #F8F991; (for the body selector)
color: #3D315B; (for the h1 selector)
f. To improve the spacing between the list items, add the following rule to the end of your style
sheet to add a half a line of space between list items:
li { line-height: 150%; }
2. Improve
a. Use http://validator.w3.org to validate your cssbest04.html page. The page flags an error at
Line 34. In your cssbest04.html page, notice that the “Never stop learning” list item contains
an unordered list starting on Line 34. Often, the validator flags the line after the actual error
occurs. In this case, the closing </li> tag on Line 33 is in the wrong position. Move the </li>
tag to below the closing </ul> tag on Line 42. In other words, the “Never stop learning” list
item includes not only those three words, but the entire unordered list of links as well.
b. Save and revalidate the cssbest04.html page. Fix any errors and revalidate until you get the
message “This document was successfully checked as HTML5!” A first step in creating clean CSS
code is to validate your HTML code.
c. Use http://jigsaw.w3.org/css-validator/ to validate your CSS code. Unless you’ve already fixed
it, you should see an error on Line 12 because the final brace } was not included for the h1
selector. Add that character and revalidate your CSS code. Fix any errors and revalidate until
you get the message “Congratulations! No Error Found.”
3. After reviewing the 20 “best practices,” comment on which of these practices you would like
to understand better and why.
After reviewing the links in the “Never stop learning” list item, comment on which of these sites
you would like to explore further and why.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.