Difficulty level: intermediate to advanced.
Example 1: The basics
For this example we will create a unordered list (ul) that will show a disc next to a list item (li) only in a particular area, and will hide them in the rest of the website. You can then decide which lists you want to style in your website.
Note:
Make sure you do this in a development website, and in any case have a backup of the files you are going to work on.
We will take a div and name it "content". The name of your div may be different. In it we will place the ul list to style:
<div id="content">
<ul class="unordered_list_in_content">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
In your stylesheet you would use:
ul { list-style-type:none } /* This will turn off all list-style-types in your theme */
#content ul.unordered_list_in_content { list-style-type: disc }
You should now see your list with discs in the area that you chose, and not in the rest of the website.
Example 2: Let's have some fun with lists styles
To turn off all list-style in a theme use:
ul {list-style:none}
instead of
ul {list-style-type:none}
You can do something like this:
ul {list-style:disc inside}
instead of
ul {list-style-type:disc}
So your final stylesheet would look like:
ul {list-style:none}
#content ul.unordered_list_in_content { list-style: disc inside}
Note: If you have more than one stylesheet in your theme you will have to make sure there are no list-styles overriding your css, otherwise it still might not show.