Required files The HTML and CSS documents from the basic-boilerplates
folder as a starting point, along with the images better-listhollow-
square.gif, better-list-shadow.gif, better-listsquare.
gif, and better-list-star.gif from the chapter 3
folder.
What you??™ll learn How to style a three-level list to look great, using background
images and overrides.
Completed files better-looking-lists.html and better-looking-lists.css
from the chapter 3 folder.
Creating better-looking lists
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
112
1. Create the list. Within the HTML document??™s wrapper div, add the following code:
- List - 1.1
- List - 2.1
- List - 2.2
- List - 3.1
- List - 3.2
- List - 3.3
- List - 2.3
2. Amend the body rule. Add some padding to the body element so that page content
doesn??™t hug the browser window edges during testing:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
3. Style the list elements. This kind of heavily styled list typically requires you to
define specific property values at one level and then override them if they??™re not
required for subsequent levels. This is done by adding the three rules in the following
code block. For this example, the top level of the list (styled via ul) has a
star background image that doesn??™t repeat (the 1px vertical value is used to nudge
the image into place so it looks better positioned), and the list-style-type value
of none removes the default bullet points of all lists on the page.
Pages:
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191