1. What are the last 4 characters of a file that contains nothing but statements like this?
p {
font-family: "Times New Roman", Times, serif;
}
That's correct. Well done!
The correct answer:
.css
Press Tab or click button to advance to next exercise.
2. Type the first 3 characters of CSS code that specifies styling for paragraphs.
That's correct. Well done!
The correct code:
p {
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. Type the first four characters of CSS code that specifies styling for the smallest heading.
That's correct. Well done!
The correct code:
h6 {
Press Tab or click button to advance to next exercise.
4. Fill in the blank.
_______ "Trebuchet MS", Helvetica, sans-serif;
That's correct. Well done!
The correct code:
font-family:
Press Tab or click button to advance to next exercise.
5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to style paragraphs. Tahoma is the first font in the stack.
6. Click in the box and type the next character. I'll autocomplete. Don't type spaces or carriage returns. When the exercise is complete, I'll turn the exercise number green.
Style paragraphs. The font stack is Verdana, Geneva, sans-serif.
p {
font-family: Verdana, Geneva, sans-serif;
}
That's correct. Well done!
Press Tab or click button to advance to next exercise.
7. Fail-safe coding. If you type the wrong character, I'll cancel the keystroke. Type spaces. When the exercise is complete, I'll turn the exercise number green.
Style the largest heading. The font stack is Arial, Helvetica, sans-serif.
h1 {
font-family: Arial, Helvetica, sans-serif;
}
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. Write the second line of styling code that specifies Tahoma, Geneva, and sans-serif as the font stack. Don't bother to indent.
That's correct. Well done!
The correct code:
font-family: Tahoma, Geneva, sans-serif;
Press Tab or click button to advance to next exercise.
9. Write all three lines of styling code for paragraphs that specify Times New Roman, Times, and serif as the font stack. Don't forget the rule about font names that contain spaces.
That's correct. Well done!
The correct code:
p {
font-family: "Times New Roman", Times, serif;
}
Press Tab or click button to advance to next exercise.
10. Write all three lines of styling code for the second-largest heading that specify Verdana, Geneva, and sans-serif as the font stack.
That's correct. Well done!
The correct code:
h2 {
font-family: Verdana, Geneva, sans-serif;
}
Press Tab or click button to advance to next exercise.
11. Write all three lines of styling code for a heading of your choice that specify Arial, Helvetica, and sans-serif as the font stack.
That's correct. Well done!
Example:
h4 {
font-family: Arial, Helvetica, sans-serif;
}
Press Tab or click button to advance to next exercise.
12. If the first font in a font stack is Times, what is the last font in the stack, typically?
That's correct. Well done!
The correct code:
serif
Press Tab or click button to advance to next exercise.
The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.
13. Time goal: 55 seconds. Style the largest heading. The font stack is Arial, Helvetica, sans-serif.
Press Tab or click button to check answer.
The correct answer:
h1 {
font-family: Arial, Helvetica, sans-serif;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 30 seconds. Write the second line of styling code that specifies Tahoma, Geneva, and sans-serif as the font stack. Don't bother to indent.
Press Tab or click button to check answer.
The correct code:
font-family: Tahoma, Geneva, sans-serif;
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
15. Time goal: 60 seconds. Write all three lines of styling code for paragraphs that specify Times New Roman, Times, and serif as the font stack. Don't forget the rule about font names that contain spaces.
Press Tab or click button to check answer.
The correct code:
p {
font-family: "Times New Roman", Times, serif;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 60 seconds. Write all three lines of styling code for the second-largest heading that specify Verdana, Geneva, and sans-serif as the font stack.
Press Tab or click button to check answer.
The correct code:
h2 {
font-family: Verdana, Geneva, sans-serif;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 60 seconds. Write all three lines of styling code for a heading of your choice that specify Arial, Helvetica, and sans-serif as the font stack.
Press Tab or click button to check answer.
Example:
h4 {
font-family: Arial, Helvetica, sans-serif;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 10 seconds. If the first font in a font stack is Times, what is the last font in the stack, typically?
Press Tab or click button to check answer.
The correct code:
serif
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
19. Access this live coding exercise at JS Fiddle. When you've completed the exercise, close the JS Fiddle window, and you'll be returned to this page. (If JS Fiddle displays a warning message saying that your changes will be reset, click Leave this Page.)
Click button to advance.
20. Access this live coding exercise at JS Fiddle. When you've completed the exercise, close the JS Fiddle window, and you'll be returned to this page. (If JS Fiddle displays a warning message saying that your changes will be reset, click Leave this Page.)
Click button to advance.
Congratulations. You've aced all the exercises for this chapter.
Post a review on Amazon for the paperback or the Kindle edition.
Email me to give me a compliment, complaint, or correction. I'll respond.
All of my books include free interactive online exercises that make the knowledge stick.
