iPage Hosting
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $4.95/mo
Globat $4.44/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
CSS Code Tutorial Chapters:
- Introduction
- Basics of CSS
- All About Selectors
- Background and Color
- Fonts and Text
- Links
- Lists
- Margin
- Padding
- Border
- Good CSS Design
- Resources
visit our other tutorials:
web design tutorial
html code tutorial
CSS Lists, < ul > and < li >
Do you remember your old friends UL (unordered list) and OL (ordered list)? Cascading style sheets have a few enhancements for these lists.
Dave has a
New Course for your iPad!Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!
Most people have wanted a way to use an image for each point of an unordered list. Cascading style sheets make this trick really easy to do. Make a small graphic (background transparent are preferred). Then you can link to it with a style similar to this:
ul { list-style-image: url(smallimage.gif); }
But what if you have a sub-list, that is, a UL within a UL. You don't want the second one to have the same image? You can define a special style for UL only within UL, similar to this:
ul ul { list-style-image: url(smallimage2.gif); }
If you use both styles in the same sheet, the points of the main list will be preceded by smallimage.gif, and the points in the sublist will be preceded by smallimage2.gif. You can continue on, adding more UL as you please. Just don't go too deep into sub-lists, you'll confuse your viewing audience!
Remember all those fun outlines you did in school (or maybe the one you did this morning on the job)? CSS gives you a way to auto-format your ordered lists to meet nearly any style. It's similar to the list-style-image used above, it's called the list-style-type property. It can be one of these values: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.
So, if you want the OL to have I, then A, then 1. then, a, then finally i., you could do this style sheet:
OL { list-style-type: upper-roman; }
OL OL { list-style-type: upper-alpha; }
OL OL OL { list-style-type: decimal; }
OL OL OL OL { list-style-type: lower-alpha; }
OL OL OL OL OL { list-style-type: lower-roman; }
<ol>
<li>Web Design
<ol>
<li>HTML
<li>CSS
<ol>
<li>Intro
<li>Basics
<ol>
<li>Inline
<ol>
<li>You can include styles
inline using style=""
</ol>
</ol>
</ol>
</ol>
</ol>
It looks like this:
- Web Design
- HTML
- CSS
- Intro
- Basics
- Inline
- You can include styles inline using style=""
- Inline
| < Ch. 6 part 2 | > continue to Ch. 7 part 2 |
iPage Hosting
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $6.95/mo
Globat $4.44/mo
Free Domain Name If you Order Today!