body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #ffffff;
padding: 20px;
}
5. Style the wrapper. Add the following property values to the #wrapper rule to define
a fixed width for it and then center it (via the margin property??™s auto value).
#wrapper {
font-size: 1.2em;
line-height: 1.5em;
margin: 0 auto;
width: 500px;
}
6. Style the text. Add the h1 rule as shown, thereby styling the level-one heading:
h1 {
font: 1.5em/1.8em Arial, sans-serif;
text-transform: uppercase;
}
7. Add the blockquote and blockquote p rules as shown. The former adds margins to
the sides of the block quote, thereby making the text stand out more, while the latter
(a contextual selector) styles paragraphs within block quotes only, making them
italic and larger than standard paragraphs. Once you??™ve done this, save your files
and preview the web page in a web browser; it should look like the following
image. (Don??™t close the browser at this point.)
The items with ampersands and semicolons, such as — and ”, are HTML
entities??”see Appendix C (???Entities Reference???) for more details.
AN INTRODUCTION TO WEB DESIGN
21
1
blockquote {
margin: 0 100px;
}
blockquote p {
font-style: italic;
font-size: 1.2em;
}
8. Duplicate creating-and-styling-a-web-page.css and rename it creating-andstyling-
a-web-page-2.css. Open creating-and-styling-a-web-page.html, and
amend the @import value, linking to the newly created CSS document:
@import url(creating-and-styling-a-web-page-2.
Pages:
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80