Lists are awesome So let's talk about them

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 or a symbol like ~ to indicate a new list item, but an actual HTML coded list has a lot of benefits over that.
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.



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.

<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.

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.



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 you should probably use outside in combination with margin for your lists



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.

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;

}

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


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! Give it a try!

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