

The basic list format is avaiable everywhere on dA, you do not need a premium membership to create a list. Of course you could just use

Especially when you have single points that exceed a single line a HTML list, a line break appears at a spot you cannot control and therefore you will end up having no indentation and it will just look messy.
You do need it, if you want to use Journal Skins aka personal CSS.
So, let's get started.
Basics About Lists
There are two kinds of list: ordered and unordered.
Ordered means you will get a numbered list from 1 to how many items your list has.
Unordered means you will get bullet points in front of every item.
- Cowherb
- That news announcer hears the girl crying. I called him "the computer programmer". Becky calls him George. Those drivers painted the room green. I kept the milk cold.
- Backheel
Unordered list
- Infrugal
- I called him "the barber". That garbage man elected her chairperson. That manager keeps the milk cold. Sue elected Bill captain of our team. Those barbers name the dog Fido.
- Cancelier
Every element of a is contained in its own wrapper:
<
li>list item<
/li>
All list items are contained in an ordered or unordered wrapper:
<
ol>…<
/ol>
or <
ul>…<
/ul>
Ordered list<
ol><
li>Cowherb<
/li><
li>That news announcer hears the girl crying. I called him "the computer programmer". Becky calls him George. Those drivers painted the room green. I kept the milk cold.<
/li><
li>Backheel<
/li><
/ol>
Unordered list<
ul><
li>Infrugal<
/li><
li>I called him "the barber". That garbage man elected her chairperson. That manager keeps the milk cold. Sue elected Bill captain of our team. Those barbers name the dog Fido.<
/li><
li>Cancelier<
/li><
/ul>
Nested Lists
You can place lists inside each other. This will result in an indented list inside another list element. If you put an unordered list into another list, the bullet point will change from the regular filled circle to a hollow circle, as this is the second level in the bullet point hierarchy.
- Cowherb
- Infrugal
- Feandra
- Cancelier
- That news announcer hears the girl crying. I called him "the computer programmer". Becky calls him George. Those drivers painted the room green. I kept the milk cold.
- Backheel
<
ol><
li>Cowherb
<
ul>
<
li>Infrugal<
/li>
<
li>Feandra<
/li>
<
li>Cancelier<
/li>
<
/ul><
/li><
li>That news announcer hears the girl crying. I called him "the computer programmer". Becky calls him George. Those drivers painted the room green. I kept the milk cold.<
/li><
li>Backheel<
/li><
/ol>
Lists on dA
An "unstyled" list will be contained with a CSS in dA's stylesheet. It is not unstyled per se, it has been styled by dA, but it has not been styled by you with a personal CSS.
By not resetting or styling all properites of a list, you may run into conflicts with the dA styling, so I prefer to "call on" every property when I create a new CSS, often simply resetting to zero or to
display: none;
.More on the properties for lists right below this paragraph.
List Styling
You can apply any CSS to lists. Both the containers
<
ol>…<
/ol>
and <
ul>…<
/ul>
, as well as the single wrapper <
li>…<
/li>
can be styled to your preference. There are three list specific properties that help you control the look of a list: list-style-type, list-style-image and list-style-position.
There are lot of options for what kind of style you want your list to have; the distinctions here are between bullets, numerals and letters. F.e. the default bullet point is disc, for consecutive numbering you would use decimal or upper-roman if you want to use Roman numerals. Letters are among others avaiable in Latin lower-latin or Greek lower-greek.
list-style-image
You can either display no image by setting the property to none (which would be the default setting aka if you don't want an image, done set this property) or link to an image by setting the image ULR url(http://…/list.png) as the property.
list-style-position
This property lets you set the horizontal position of whatever bullet point/numbering/image you are using in correlation to the text of each element and text outside of the list.
outside will set the style element left outside of the text and list area.
inside will align the style element with text that runs outside of your list; this will cause long elements, that run over one line, to be aligned with the bullet point and not the first letter of the element.
To avoid an over float of second lines in list elements and bullet points, a combination of outside and margin-left should be used.
Examples Of List Styling
Here is a small selection of how you can style lists.
Unordered list with a hollow circle
ul {list-style-type: disc;
list-style-image: none;
list-style-position: inside;
margin: 0;
}
This is a simple approach to list styling, simply replacing the default bullet with another one.
- Nekmit
- Novanoid
- Yeinydd
Ordered list with Roman uppercase numerals
ol {list-style-type: upper-roman;
list-style-image: none;
list-style-position: outside;
margin: 0;
}
You will notice how the
list-style-type
, in this case upper-roman
numbering, becomes right aligned text if set to list-style-position: outside
. Changing to
list-style-position: inside
would result in left-aligned numbering and stair-steps where the list elements begin. If you like to align things properly like me 
outside
in combination with margin
for your lists 
- Hysleria
- Toogit
- Hooppler
Ordered list with lowercase Latin letters
ol {list-style-type: lower-latin;
list-style-image: none;
list-style-position: outside;
margin: 0 0 0 20px;
}
The combination of
list-style-position: outside;
with margin: 0 0 0 20px;
will give the same result as a combination of inside
and zero margin
. The difference becomes visible when a list element contains a lot of text or a nested list. - Dropperclear
- Yboiveth
- Qiameth
More Bullet Points, Numerals & Letters
Please refere to list-style-type | MDN for a list of all avaiable options to style your list.
Replacing bullet points with images
To customize a list further, it is often necessary to create a new bullet point and integrate it as an image into the styling. Common images for this are checkmarks, plus symbols, arrows etc.
If you set the property
list-style-position: inside;
the image will automatically define the horizontal position of the list element and place it next to the image. ul {list-style-type: none;
list-style-image: url("…/finger.png");
list-style-position: inside;
margin: 0;
}
- Alerrawia
- Peachflame
- Pulappli
What Won't Work
- You cannot set individual images for each list element. If you want a numbered list, you will have to use the options that are avaiable via the list-style-type property.
- You cannot set a different color for the text inside a list element and the style element (unless you use an image for that).
Other Uses For Lists
Build a Horizontal Drop Down Navigation Menu With Lists
This is how the HTML set up for a navigation menu made from a list would look like.
You should use a container for the whole list, to seperate the styling of this list from other "regular" lists inside the content. In HTML5 the
<
nav>
element should be used. Add it into the CSS by adding nav
in front or whatever custom class you choose. How To Set Up the HTML
<
ul>
<
li><
a href="#">Home<
/a><
/li>
<
li><
a href="#">Infrugal<
/a>
<
ul>
<
li><
a href="#">Cowherb<
/a><
/li>
<
li><
a href="#">Backheel<
/a><
/li>
<
li><
a href="#">Feandra<
/a><
/li>
<
/ul>
<
/li>
<
li><
a href="#">Waterrhino<
/a>
<
ul>
<
li><
a href="#">Dropellet<
/a><
/li>
<
li><
a href="#">Jeebus<
/a><
/li>
<
li><
a href="#">Noodile<
/a><
/li>
<
li><
a href="#">Drearien<
/a><
/li>
<
li><
a href="#">Kaloolon<
/a><
/li>
<
/ul>
<
/li>
<
li><
a href="#">Cancelier<
/a>
<
ul>
<
li><
a href="#">Norrisology<
/a><
/li>
<
li><
a href="#">Ybuwyn<
/a><
/li>
<
li><
a href="#">Fuffapster<
/a><
/li>
<
li><
a href="#">Astauand<
/a><
/li>
<
/ul>
<
/li><
/ul>
Don't be scared. This is just another nested list

This means, that you will have to write the whole list in ONE LINE; deleting all manually entered line-breaks!
Having it in one line will make it a lot shorter, too. Just a bit harder to look at.
This is what it will look like with no special styling:
Next is the CSS for the lists!
ul {background: #FFFFFF;
height: 30px;
list-style-image: none;
list-style-position: inside;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
ul li {display: inline-block;
position: relative;
margin: 0px;
padding: 0px;
}
li ul {display: none;
position: absolute;
left: 0px;
top: 30px;
margin: 0px;
padding: 0px;
}
ul li a {display: block;
background: #17c3e5 ;
color: #FFFFFF;
height: 30px;
line-height: 30px;
margin: 0px;
padding: 0px;
text-align: center;
text-decoration: none;
width: 120px;
}
ul li a:hover {background: #369eb3 ;
}
li:hover ul {display: block;
}
Here is why I did what I did!
ul
This will refer to the whole list and will be the whole width of your layout unless defined otherwise.
The list styling is reset; image, style and position are not defined. Margin and padding at 0 is added to avoid spaces.
The height has to be defined and should be the same as the link elements further down the CSS.
The center aligned text will position the menu in the middle of the unordered list.
ul li
display: inline-block;
takes care of the list elements being in one line and not each on a separate line.position: relative;
enables aligning the drop down elements contained in a nested list later on. This styling will work on all levels of the list where a list element is inside an unordered list.
li ul
position: absolute;
aligns the element with the list element it is contained in. The exact numbers are set to 0px for the left side and 30px for the top; referencing the height of the overall unordered list, so it starts right under it without space. display: none;
is set so that the dropdown elements are not visible all the time, but only on hover, see further down. ul li a
display: block;
is necessary to display the whole content of the link element. The height resembles the overall height and the list element the link is in. It should also be resembled in the line height, for the text to be vertically centered. (No padding is needed for this!)
ul li a:hover
Simply changing the background color of the element.
li:hover ul
display: block;
is necessary to make th drop down menu visible again. It overwrites the display: none;
styling from before. What Else?
There is basically nothing you can't do: you can adjust colors, background, fonts, colors, sizes, alignment etc whatever way you want. You just need to overwrite the regular list stylings and then you are free to go.
You can also transform it into a vertical navigation element, see link below.
This Drop-Down Menus, Horizontal Style · An A List Apart Article helped me figure out exactly how to create a menu list. The article may be old, but the principle hasn't changed, as you can see it still works.

I found dabblet.com today, a live HTML / CSS editor that let's you see what you're doing!

As usual I will link you to CSS reference - CSS | MDN, because it is the best and easiest reference site for CSS (and HTML) questions.
Conclusion
- If you make a list, use the list HTML for a better layout result. (Basic lists are free for all.)
- Lists can be customized to almost all your needs!
- You can easily use a list for ohter purposes, f.e. building a navigation menu.
Do not hesitate to ask me questions if you don't understand anything or want clarification 
Happy creating


Have a suggestion?
Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.