Html & CSS for Lists
Html for Lists
| <ul></ul> | This is a unordered list. This tag starts and ends the list. It will have a little circle (bullet) at the front of each list item. You can change the circle to another shape with css. There is default styling for this tag. They are Display:block, list-style-type:disc, top and bottom margins of 1em and padding-left:40px. |
| <ol></ol> | This is a ordered list. This tag starts and ends the list. Each list item will be numbered starting at number 1. You can change the one to roman numerals with css. There is default styling for this tag. They are Display:block, top and bottom margins of 1em and padding-left:40px. |
| <li></li> | This is a list item. This starts and ends each list item. Each list item will have a bullet or number before it. |
| <dl></dl> | This is a description list. This starts and ends the list. Use the <dt></dt> and <dd></dd> tags with this tag. This makes a list that looks like a word with a definition after it. There is default styling for this tag. They are Display:block and top and bottom margins of 1em. |
| <dt></dt> | This is a definition term in a <dl></dl> type list. This would be the word you want to define. There is default styling for this tag. It is Display:block. |
| <dd></dd> | This is the description or definition of the word in the <dt></dt> tag. There is default styling for this tag. They are display:block and margin-left:40px. |
Unordered List
<ul>
<li>This is a unordered list. What you see is its default
styling. It has a circle in front of each list item.
</li>
<li>Text goes here.
</li>
<li>Text goes here.
</li>
</ul>
- This is a unordered list. What you see is its default styling. It has a circle in front of each list item.
- Text goes here.
- Text goes here.
Ordered List
<ol>
<li>This is a ordered list. What you see is its default
styling.It has a number in front of each list item.
</li>
<li>Text goes here.
</li>
<li>Text goes here.
</li>
</ol>
- This is a ordered list. What you see is its default styling. It has a number in front of each list item.
- Text goes here.
- Text goes here.
Definition List
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
<dt>RWD</dt>
<dd>Responsive Web Design</dd>
</dl>
- HTML
- Hypertext Markup Language
- CSS
- Cascading Style Sheet
- RWD
- Responsive Web Design
Here is the CSS I had to add to the definition list. The definition list has no default left padding or margins, so I added some.
dl {
padding-left:40px;
}
CSS for Lists
List-style-type
This css is to change the list-style-type. The
list-style-type changes the little circle or number that is in
front of each list item to another type of marker.
The choices for a unordered list are:
- circle
- square
- none
This is the css:
ul {
list-style-type: square;
}
The choices for a order list are:
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- decimal
- decimal-leading-zero
- lower-latin
- upper-latin
- none
This is the css:
ol {
list-style-type: upper-roman;
}
Other notes
There are 2 more things to change with css if you want.
This is the css:
ul {
list-style-position: outside;
list-style-image:url('pic.gif');
}
List-style-position: The choices are outside(default) and inside.This is where the
marker appears.
list-style-image:url('pic.gif') allows you to use a small picture
for a marker.
The list has margins and padding by default. To get rid of the default
margins and padding on your list:
ul {
margin: 0;
padding:0;
}
You can assign the list tags a selector for other styling. You can put links in the li tags. Experiment.I will nest lists on the Table of
Contents page.
/*This is a css comment.*/
Only the programmer will see this. The user visiting
your page will not see it. Html comments are different than css comments.