Category search : html/css...

Little Known CSS List Styles

Sun Jan 24 02:38:47 2010

Even though HTML is not a programming language, but rather a markup language, it sometimes amazes me how much HTML has to offer. Just today, for example, I was reading a magazine and discovered some very useful CSS list styles. Most of them I has already seen, but those I hadn't still looked useful. As I live in Japan, the Japanese list styles look particularly useful. Anyway, just take a look below to check them all out. Just click on any of the links to see the style effect in real time.

Useful List Styles

1. list-style:none;
2. list-style:circle;
3. list-style:disc;
4. list-style:square;
5. list-style:lower-greek;
6. list-style:lower-roman;
7. list-style:uppper-roman;
8. list-style:lower-latin;
9. list-style:upper-latin;
10. list-style:lower-alpha;
11. list-style:uppper-alpha;
12. list-style:upper-latin;
13. list-style:lower-latin;
14. list-style:decimal;
15. list-style:decimal-leading-zero;

Useful List Styles in Japan

1. list-style:cjk-ideographic;
2. list-style:hiragana;
3. list-style:katakana;
4. list-style:hiragana-iroha;
5. list-style:katakana-iroha;

To use these styles, either put style="list-style:'style';" on the tag you would like to style. Otherwise, import a external stylesheet or use the styles tags at the top of your HTML page and write li{list-style:'style';}

As you can see, there are some really useful ones. It is just such a shame that most coders only get to use some more than others. I would love to see a wider use of these incorporated into the designs of more of the websites that I see on a daily basis. It just seems such a waste not to use them!