|
How to Style a List
By Stephen Bucaro
Lists are a very common structure found on Web pages. Many lists use the default
styles, which makes them somewhat boring. In this article, I show you how to get
control of your lists and how to use style rules to make them more interesting.
Below is a basic unordered list <ul> with no style applied.
- bread
- butter
- milk
- cheese
- pasta
- pasta sauce
This might be a typical grocery list. Not only are the grocery items on the
list a bit boring, but the appearance of the list itself is a bit boring. This list
uses the default bullets. You can use the list-style-type property, as shown
below, to specify which of the standard bullets to use.
- bread
- butter
- milk
- cheese
- pasta
- pasta sauce
<ul style="list-style-type: square">
<li>bread</li>
<li>butter</li>
<li>milk</li>
<li>cheese</li>
<li>pasta</li>
<li>pasta sauce</li>
</ul>
 Note that I'm
using inline style definitions here. Many web designers disapprove of the use of
inline style because it doesn't reduce the amount of code compared to html, and because it
doesn't create a single global place to define all styles. However, there are several
advantages to using inline style.
Most professional web designers don't have complete control of their code, for example
advertisers may provide blocks of code, and in that code they may define styles that
conflict with the designer's styles. This can occur even if you define special class names
or ids for your styles.
Global style sheets may become large and unwieldily, making it time consuming to find a
style definition. With global style sheets a web designer can literally loose control of
the situation. With inline style, the rules are right in the tag, and they over-ride any
further away definitions.
Contrary to what most web designers think, it's not the amount of code that slows
web page loading. Compare the image file sizes to the web page file size. It takes a
lot of code to equal the weight of even one small image.
The real problem with using a large amount of code on a web page is when the code
is not properly formatted. Then it looks like a bunch of incomprehensible gibberish.
So lets not be so disapproving of the use of inline style.
| 
Free Downloads
RSS Feed