, instead they scan the page.
When writing for the web you need to stick to the point and not include excessive details.
One way to do this and get the user's attention is to organize your page by including lists. You can use more lists when writing for the web than you would when writing for print.
Although you can add the styles (via class/id) to any of the list tags they are normally added to the <ul>, <ol> or <dl> this allows you to set different styles for different types of lists.
Unordered List
- position: outside, type: circle
- Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread,
deciduous.
- Strawberry Tree highly recommended use as a shade shrub
or on north exposures, slow growth to 20 feet,
|
html
<ul class="name of class">
<li>First Item<
/li>
<li>Second Item < /li>
</ul>
css
The default for the position is outside therefore is it not really necessary to include that in the style sheet
ul.nameOfClass li{
list-style-position: outside;
list-style-type: disc;
} |
Unordered List
position outside type: square
- Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread,
deciduous.
- Strawberry Tree highly recommended use as a shade shrub
or on north exposures, slow growth to 20 feet,
|
html
<ul class="name of class">
<li>First Item<
/li>
<li>Second Item < /li>
</ul>
css
ul.nameOfClass li{
list-style-position: outside;
list-style-type: square;
}
|
Unordered List
position inside, type: image
- Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread,
deciduous.
- Strawberry Tree highly recommended use as a shade shrub
or on north exposures, slow growth to 20 feet,
|
html
<ul class="name of class">
<li>First Item<
/li>
<li>Second Item < /li>
</ul>
css
ul.nameOfClass li{
list-style-type:circle;
list-position: outside;
list-style-image: url(images/bullet.png);
} |
Unordered List
sans position, sans type:
- Albizia julibrissen Silk Tree
- highly recommended
- deciduous
- Strawberry Tree
- highly recommended
- growth to 20 feet
|
html
<ul>
<li>Albizia julibrissen Silk Tree
/li>
<ul><li>Highly recommended< /li>
<li>deciduous< /li>
</ul>
</ul>
Repeat list for second item
css
Does not have any styles |
Unordered List
- position inside, sans type
- Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread,
deciduous.
- Strawberry Tree highly recommended use as a shade shrub
or on north exposures, slow growth to 20 feet,
|
html
<ul class="name of class">
<li>First Item<
/li>
<li>Second Item < /li>
</ul>
css
ul.nameOfClass li{
list-style-position: inside;
} |
Ordered List
- Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread,
deciduous.
- Strawberry Tree highly recommended use as a shade shrub
or on north exposures, slow growth to 20 feet,
|
html
<ol type="l">
<li>First Item<
/li>
<li>Second Item < /li>
</ol>
css
For the example the style for the marker has been placed in the html tag. For css:
list-style-type:circle;
upper-alpha;
lower-alpha;
upper-roman:
lower-roman;
decimal;
arabic numbers are the default so you do not have to include the styles.
Placing the style in the html is shown below
|
Type Numbering style
All types are placed in the html code for Ordered Lists
Example: <ol type="A"> Upper Case |
1
a
A
i
I
|
arabic numbers
lower alpha
upper alpha
lower roman
upper roman
|
1, 2, 3
a,b,c,
A,B,C
i,ii, iii,
I, II,III |
Defination List
Definition lists are different from first two types of lists in that they consist of two parts the first for a term or title. The other for description/information.
- Term or Title
- Information or defination
- Information or defination
- Term or Title
- Information or defination
- Term or Title
- Information or defination
|
html
<dl>
<dt>Term or Title</dt>
<dd>Information</dd>
<dd>Information</dd>
<dt>Term or Title</dt>
<dd>Information</dd>
<dt>Term or Title</dt>
<dd>Information</dd>
</dl>
|
List - Horizontal Menu
|
html
<ul id="menu">
<li ><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
<li><a href="#">FOUR</a></li>
</ul>
</div>
CSS
#menu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
|
share / bookmark