body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
}
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
}
a {
text-decoration: none;
}
h1 {
font: bold 1.5em Georgia, serif;
text-shadow: 0.1em 0.1em 0.2em gray;
}
h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.5em;
text-align: center;
}
dt {
font-weight: bold;
}
strong {
font-style: italic;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#info p {
font-style: italic;
}
.price {
font-family: Georgia, serif;
font-style: italic;
}
p.warning,
sup {
font-size: small;
}
.label {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
}
h2 + p {
text-align: center;
font-style: italic;
}
Extracted text: 4. Make the h1 heading purple (R:153, G:51, B:153, or #993399) by adding a new declaration to the existing h1 rule. Note that because this value has all double digits, you can use the condensed version (#939). 5. Make the h2 headings light brown (R:204, G:102, B:0, #cc6600 or #c60). 6. Make the background of the entire page a light green (R:210, G:220, B:157, or #d2dc9d). Now might be a nice time to save, have a look in a browser, and troubleshoot if the background and headings do not appear in color. 7. Make the background of the header white with 50% transparency using the hsla API. 8. There is already a rule that turns underlines off under links (text-decoration:none), so we'll be relying on color to make the links pop. Write a rule that makes links the same purple as the h1 (#939). 9. Apply an 4px border-radius to the header 10. Make visited links a muted purple using the hsl API (convert this hexadecimal color to hsl: #937393). 11. When the mouse is placed over links, make the text a brighter purple (the hue value should remain the same) and add a white background color (#ff). This will look a little like the links are lighting up when the mouse is pointing at it. Use these same style rules for when the links are in focus. 12. When a link is clicked, add a white background color and make the text turn a vibrant purple (#ff00ff). Make sure that all of your link pseudo-classes are in the correct order.