Finally, for the
third-level list items, styled using the selector li li li, a background override provides
a unique bullet point image (a hollow square).
li {
text-transform: uppercase;
padding-left: 20px;
font-weight: bold;
color: #666666;
}
li li {
text-transform: none;
background: url(better-list-square.gif) 0 2px no-repeat;
font-weight: normal;
color: #333333;
}
li li li {
background: url(better-list-hollow-square.gif) 0 2px no-repeat;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
114
Required files The HTML and CSS documents from the basic-boilerplates
folder as a starting point.
What you??™ll learn How to style a list for displaying code online (complete with
exercise headings and line numbers).
Completed files display-code-online.html and display-code-online.css from
the chapter 3 folder.
1. Create the list. Code blocks require terminology and descriptions, meaning that a
definition list can be used to mark them up. For this example, the code block from
the preceding ???List style shorthand??? section will be used. Within the wrapper div,
create a definition list and give it a class value of codeList. For the term, add a
description of the code, and for the definition, add an ordered list, with each line
of code within its own list item. Each line of code should also be nested within a
code element.
- Writing out list styles in full
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url(bullet.
Pages:
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193