1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang=en>
<head>
<title>Classification Properties</title>
<link rev=Made href="mailto:liam@htmlhelp.com">
<link rel=Start href="../index.html">
<link rel=Prev href="../box/index.html">
<link rel=Up href="../properties.html">
<link rel=Glossary href="../../glossary/glossary.html">
<link rel=Copyright href="../../../copyright.html">
<link rel=StyleSheet href="../style.css" type="text/css">
<link rel=StyleSheet href="../aural.css" type="text/css" media=aural>
<meta name="author" content="John Pozadzides/Liam Quinn">
<meta name="description" content="Descriptions of the classification properties of Cascading Style Sheets, level 1.">
<meta name="keywords" content="html authoring, newsgroup, web design group, web page design, help, frequently asked questions, internet help, site creation, page creation, site design, page design, site layout, page layout, html, hypertext markup language, hyper text markup language, questions, graphics, validation, validators, www pages, html 3.2, wilbur, help files, tutorials, articles, reference material, guide, wdg, style, stylesheet, style sheet, css, cascading style sheets, classification properties, answer">
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">
<h2><img src="../wdglogo1.gif" width=250 height=83 alt="The Web Design Group"></h2>
<h1 align=center>Classification Properties<img src="../css.gif" alt="" align=right width=99 height=73 hspace=5></h1>
<hr>
<ul>
<li><a href="#display">Display</a></li>
<li><a href="#white-space">Whitespace</a></li>
<li><a href="#list-style-type">List Style Type</a></li>
<li><a href="#list-style-image">List Style Image</a></li>
<li><a href="#list-style-position">List Style Position</a></li>
<li><a href="#list-style">List Style</a></li>
</ul>
<hr>
<h2><a name="display">Display</a></h2>
<table cellpadding=5>
<tr>
<th valign=top align=left><b>Syntax:</b> </th>
<td valign=top>display: <value><br></td>
</tr>
<tr>
<th valign=top align=left><b>Possible Values:</b> </th>
<td valign=top>block | inline | list-item | none<br></td>
</tr>
<tr>
<th valign=top align=left><b>Initial Value:</b> </th>
<td valign=top>block<br></td>
</tr>
<tr>
<th valign=top align=left><b>Applies to:</b> </th>
<td valign=top>All elements<br></td>
</tr>
<tr>
<th valign=top align=left><b>Inherited:</b> </th>
<td valign=top>No<br></td>
</tr>
</table>
<p>The <strong class=css>display</strong> property is used to define an element with one of four values:</p>
<ul>
<li><strong class=css>block</strong> (a line break before and after the element)</li>
<li><strong class=css>inline</strong> (no line break before and after the element)</li>
<li><strong class=css>list-item</strong> (same as <strong class=css>block</strong> except a list-item marker is added)</li>
<li><strong class=css>none</strong> (no display)</li>
</ul>
<p>Each element typically is given a default <strong class=css>display</strong> value by the browser, based on suggested rendering in the HTML specification.</p>
<p>The <strong class=css>display</strong> property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value <strong class=css>none</strong> will turn off display of the element to which it is assigned, including any children elements!</p>
<hr width="67%" align=center>
<h2><a name="white-space">Whitespace</a></h2>
<table cellpadding=5>
<tr>
<th valign=top align=left><b>Syntax:</b> </th>
<td valign=top>white-space: <value><br></td>
</tr>
<tr>
<th valign=top align=left><b>Possible Values:</b> </th>
<td valign=top>normal | pre | nowrap<br></td>
</tr>
<tr>
<th valign=top align=left><b>Initial Value:</b> </th>
<td valign=top>normal<br></td>
</tr>
<tr>
<th valign=top align=left><b>Applies to:</b> </th>
<td valign=top>Block-level elements<br></td>
</tr>
<tr>
<th valign=top align=left><b>Inherited:</b> </th>
<td valign=top>Yes<br></td>
</tr>
</table>
<p>The <strong class=css>white-space</strong> property will determine how spaces within the element are treated. This property takes one of three values:</p>
<ul>
<li><strong class=css>normal</strong> (collapses multiple spaces into one)</li>
<li><strong class=css>pre</strong> (does not collapse multiple spaces)</li>
<li><strong class=css>nowrap</strong> (does not allow line wrapping without a <a href="../../html40/special/br.html"><BR></a> tag)</li>
</ul>
<hr width="67%" align=center>
<h2><a name="list-style-type">List Style Type</a></h2>
<table cellpadding=5>
<tr>
<th valign=top align=left><b>Syntax:</b> </th>
<td valign=top>list-style-type: <value><br></td>
</tr>
<tr>
<th valign=top align=left><b>Possible Values:</b> </th>
<td valign=top>disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none<br></td>
</tr>
<tr>
<th valign=top align=left><b>Initial Value:</b> </th>
<td valign=top>disc<br></td>
</tr>
<tr>
<th valign=top align=left><b>Applies to:</b> </th>
<td valign=top>Elements with <strong class=css><a href="#display">display</a></strong> value <strong class=css>list-item</strong><br></td>
</tr>
<tr>
<th valign=top align=left><b>Inherited:</b> </th>
<td valign=top>Yes<br></td>
</tr>
</table>
<p>The <strong class=css>list-style-type</strong> property specifies the type of list-item marker, and is used if <strong class=css><a href="#list-style-image">list-style-image</a></strong> is <strong class=css>none</strong> or if image loading is turned off.</p>
<p>Examples:</p>
<pre><code class=css>LI.square { list-style-type: square }
UL.plain { list-style-type: none }
OL { list-style-type: upper-alpha } /* A B C D E etc. */
OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */</code></pre>
<hr width="67%" align=center>
<h2><a name="list-style-image">List Style Image</a></h2>
<table cellpadding=5>
<tr>
<th valign=top align=left><b>Syntax:</b> </th>
<td valign=top>list-style-image: <value><br></td>
</tr>
<tr>
<th valign=top align=left><b>Possible Values:</b> </th>
<td valign=top><a href="../units.html#urls"><url></a> | none<br></td>
</tr>
<tr>
<th valign=top align=left><b>Initial Value:</b> </th>
<td valign=top>none<br></td>
</tr>
<tr>
<th valign=top align=left><b>Applies to:</b> </th>
<td valign=top>Elements with <strong class=css><a href="#display">display</a></strong> value <strong class=css>list-item</strong><br></td>
</tr>
<tr>
<th valign=top align=left><b>Inherited:</b> </th>
<td valign=top>Yes<br></td>
</tr>
</table>
<p>The <strong class=css>list-style-image</strong> property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the <strong class=css><a href="#list-style-type">list-style-type</a></strong> property.</p>
<p>Examples:</p>
<pre><code class=css>UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x { list-style-image: url(x.png) }</code></pre>
<hr width="67%" align=center>
<h2><a name="list-style-position">List Style Position</a></h2>
<table cellpadding=5>
<tr>
<th valign=top align=left><b>Syntax:</b> </th>
<td valign=top>list-style-position: <value><br></td>
</tr>
<tr>
<th valign=top align=left><b>Possible Values:</b> </th>
<td valign=top>inside | outside<br></td>
</tr>
<tr>
<th valign=top align=left><b>Initial Value:</b> </th>
<td valign=top>outside<br></td>
</tr>
<tr>
<th valign=top align=left><b>Applies to:</b> </th>
<td valign=top>Elements with <strong class=css><a href="#display">display</a></strong> value <strong class=css>list-item</strong><br></td>
</tr>
<tr>
<th valign=top align=left><b>Inherited:</b> </th>
<td valign=top>Yes<br></td>
</tr>
</table>
<p>The <strong class=css>list-style-position</strong> property takes the value <strong class=css>inside</strong> or <strong class=css>outside</strong>, with <strong class=css>outside</strong> being the default. This property determines where the marker is placed in regard to the list item. If the value <strong class=css>inside</strong> is used, the lines will wrap under the marker instead of being indented. An example rendering is:</p>
<pre><samp>Outside rendering:
* List item 1
second line of list item
Inside rendering:
* List item 1
second line of list item</samp></pre>
<hr width="67%" align=center>
<h2><a name="list-style">List Style</a></h2>
<table cellpadding=5>
<tr>
<th valign=top align=left><b>Syntax:</b> </th>
<td valign=top>list-style: <value><br></td>
</tr>
<tr>
<th valign=top align=left><b>Possible Values:</b> </th>
<td valign=top><a href="#list-style-type"><list-style-type></a> || <a href="#list-style-position"><list-style-position></a> || <a href="../units.html#urls"><url></a><br></td>
</tr>
<tr>
<th valign=top align=left><b>Initial Value:</b> </th>
<td valign=top>Not defined<br></td>
</tr>
<tr>
<th valign=top align=left><b>Applies to:</b> </th>
<td valign=top>Elements with <strong class=css><a href="#display">display</a></strong> value <strong class=css>list-item</strong><br></td>
</tr>
<tr>
<th valign=top align=left><b>Inherited:</b> </th>
<td valign=top>Yes<br></td>
</tr>
</table>
<p>The <strong class=css>list-style</strong> property is a shorthand for the <strong class=css><a href="#list-style-type">list-style-type</a></strong>, <strong class=css><a href="#list-style-position">list-style-position</a></strong>, and <strong class=css><a href="#list-style-image">list-style-image</a></strong> properties.</p>
<p>Examples:</p>
<pre><code class=css>LI.square { list-style: square inside }
UL.plain { list-style: none }
UL.check { list-style: url(/LI-markers/checkmark.gif) circle }
OL { list-style: upper-alpha }
OL OL { list-style: lower-roman inside }</code></pre>
<hr width="60%" align=right>
<p align=right>Maintained by <a href="mailto:john@htmlhelp.com">John Pozadzides</a> and <a href="mailto:liam@htmlhelp.com">Liam Quinn</a></p>
<hr>
<p class=toolbar align=center><img src="../wdglogo-small.gif" width=105 height=40 alt="Web Design Group ~ "><a href="../index.html">CSS Index</a> ~ <a href="../structure.html">CSS Structure</a> ~ <a href="../properties.html">CSS Properties</a></p>
<p align=center><small><a href="../../../copyright.html">Copyright ©</a> 1997 John Pozadzides and Liam Quinn. All rights reserved.</small></p>
</body>
</html>
|
