How to style a list of links with CSS?

Question

any tips on how i can use CSS to style these links in a small side widget to look hot using css? (here is my html code)

i would love a clean and simple layout

    <div id="related_links">
   <ul>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li>
    <li><a alt="SQL Server Audit Service" title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li>
    <li><a alt="Upgrade to Microsoft SQL 2008" title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li>
   </ul>
</div>

Answer 1

You can go about this in so many ways.

To seperate your related links from any other links on the site do the following:

#related_links a {

}

remember to add hover and linked styles as well:

  #related_links a:hover {

   }

  #related_links a:link {

    }

Answer 2

They key is to style the A tags and to "de-style" the list.

#related_links ul, #related_links li {
   list-style-type:none;
   margin:0;
   padding:0
}

/* this is for a horizontal menu if you want one */
#related_links li {
   float:left;
}

#related_links a {
   display:block;
   background-color:#202020;
   color:#ffffff;
   padding:5px;
   margin-right:2px;
   margin-bottom:2px;
}

Answer 3

put all these links into a class

   <div id="related_links">
   <ul class="stylelinks">
    <li><a title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li>
    <li><a title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li>
    <li><a title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li>
    <li><a title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li>
   </ul>
</div>

and css style sheet will have

<style type="text/css">
ul.stylelinks {
color: #666666; /*do your desired styling*/
}
</style>

More effects can be added using:

ul.stylelinks a:hover {

}
ul.stylelinks a:active {

}
ul.stylelinks a:link {

}
ul.stylelinks a:visited {

}

Answer 4

I think A List Apart already covered this many years ago: http://www.alistapart.com/articles/taminglists/

Vertical

(credit: A List Apart)

#related_links {
    width: 12em;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande',
    Verdana, Lucida, Geneva, Helvetica, 
    Arial, sans-serif;
    background-color: #90bade;
    color: #333;
    }

#related_links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

#related_links li {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }

#related_links li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }

html>body #related_links li a {
    width: auto;
    }

#related_links li a:hover {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }

Horizontal

Here's almost the same example that I've touched up with a few formatting changes.

#related_links {
    background-color  : #90bade;
    color             : #333;
    font-family       : Tahoma;
    font-size         : .7em;
    padding           : 1em;
    }

#related_links li {
    border-bottom     : 1px solid #90bade;
    list-style-type   : none;
    display           : inline-block;
    }

#related_links li a {
    background-color  : #2175bc;
    color             : #fff;
    border-left       : 10px solid #1958b7;
    border-right      : 10px solid #508fc4;
    font-weight       : bold;
    padding           : .5em;
    text-decoration   : none;
    }

#related_links li a:hover {
    background-color  : #2586d7;
    color             : #fff;
    border-left       : 10px solid #1c64d1;
    border-right      : 10px solid #5ba3e0;
    }

If you don't want the background spanning the whole screen

#related_links, #related_links ul{
   display            : inline;
   }

How to remove spaces

To remove spaces between the items, you'll have to either float the list items, or remove the whitespace between the end of one and the beginning of another: From:

<ul>
   <li>1</li>   
   <li>2</li>   
   <li>3</li>
<ul>

To:

<ul>
      <li>1</li
     ><li>2</li><!--   
   --><li>3</li>
<ul>

Notice: the method after 1 does not ends the list tag until the next line, not allowing whitespace between the two list items. Method 2 is similar, it uses a comment, though, to ignore any whitespace between the second and third list items.

Again, you could always just float the li in the CSS