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

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;
        }

<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>

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;
       }

<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>

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