|
There are 3 main Classification Properties: display, white-space and list-style-type. In this section we will discuss each in turn.
- display
This property has four possible values: block, inline, list-item and none. It applies to all elements, <strong> has been use in this example.
<html>
<style type='text/css'>
<!--
body { background-color: #000000; font-family: comic sans ms }
-->
</style>
<body text=blue>
<p>This is
<strong style="color: white; display: block">block</strong> then
<strong style="color: white; display: block">block</strong> then
<strong style="color: white; display: inline">inline</strong> then
<strong style="color: white; display: inline">inline</strong> then
<strong style="color: white; display: list-item">list-item</strong> and
<strong style="color: white; display: list-item">list-item</strong>
</body>
</html>
- white-space
The white space property can have the values: normal and pre. This applies to all block-level elements.
<html>
<style type='text/css'>
<!--
body { background-color: #000000; font-family: comic sans ms }
-->
</style>
<body text=blue>
<p>This is pre
<ul style="color: white; white-space: pre">
<li>First list item
<li>Second list item
</ul>
<p>This is normal
<ul style="color: white; white-space: normal">
<li>First list item
<li>Second list item
</ul>
</body>
</html>
In this case you can see that pre adds a blank line before each list item.
- list-style-type
This determines what style of list item is displayed: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha or none.
<html>
<style type='text/css'>
<!--
body { background-color: #000000; font-family: comic sans ms }
-->
</style>
<body text=blue>
<p>This is square:
<ul style="color: white; list-style-type: square">
<li>First list item
<li>Second list item
</ul>
</body>
</html>
In the next section we will learn about Positioning Properties.
|
