Taming Lists – Comp 416

    Different ways to style the "less intrusive bullet"
       a) Style within the opening tag.  This is fine for development when
          you are experiementing but should be removed from finished,
          production code.
          
             <ul style="list-style-type: circle;"\>
             
       b) Create a CSS class
       
             <ul class="lessIntrusiveBullet"\>
             
          along with the CSS rule
          
             .lessIntrusiveBullet { list-style-type: circle; }
             
          This class can then be applied to any HTML element.  However, since it is 
          meaningful only for unordered list, overspecifying the CSS rule will not
          change its application but will be clearer to anyone reading your style sheet.
          
              ul.lessIntrusiveBullet { list-style-type: circle; }
              
        c) Create an id     
        
            <ul id="lessIntrusiveBullet"\>
         
            ul#lessIntrusiveBullet { list-style-type: circle; }
            
           Sinces ids must be unique, this rule can be applied only once to a document.
           It is used primarily for page layout elements that appear only once per page:
           header, navigation panel, main page content, footer, etc.
           
        d) Make it the default for all unordered lists
        
           ul { list-style-type: circle; }
           
           You can alway override the default when needed.
           
        e) Make it a contextual default. For example, in the navigation panel (a div 
           element), you may have a list of anchors that are formatted differently from
           lists and anchors appearing elsewhere in the page.
           
           div#navigation ul { list-style-type: circle; }
           div#navigation a { color: rgb(27, 144, 178);
                              text-decoration: none; }
                              
           These rules will apply only within your navigation panel
           
           <div id="navigation">  …  </div>
             
  

Boxing elements is a useful diagnostic style during web page development. You may need to see where a block element starts and ends, especially for accurate alignment. Note that Firebug helps with this (see also the Layout panel). Additionally, using the 'outline' property rather than 'border' has the advantage that an 'outline' does not actually occupy space in your layout whereas a 'border' does (but usually only a single pixel).

The examples below improve the layout by using 'margin' and 'padding'.

Lists do not have to be vertical they can be horizontal. Use 'display'.

Comma separation (like bullets) can be added by hand (labor intensive). You should let CSS do the work by using pseudo classes :after and :before. This is an example of CSS generating content (text, the commas).

Breadcrumbs are the most common use of inline lists. Use the CSS 'content' property to gain additional control over the separators generated by the CSS rules.