I've found myself faced with a page full of lists and links that I need to style individually. No matter what I try, the fonts and colors keep getting overridden by an unknown user agent stylesheet. I've experimented with styling the divs using classes, ids, and inline styling, but none of them seem to override the user agent stylesheet.
<div id="dafoot">
<ul id="footList">
<li class="footTop">
<a href="index.html">Home</a>
</li>
<li class="footTop">
<a href="bikes.html">Bikes</a>
<ul class="footUnder">
<li class="footSubBottom"><a href="mBikes.php">Moutain</a></li>
<li class="footSubBottom"><a href="rBikes.php">Road</a></li>
<li class="footSubBottom"><a href="kBikes.php">Kids</a></li>
<li class="footSubBottom"><a href="sBikes.php">Specialty</a></li>
</ul>
</li>
<li class="footTop"><a href="activities.php">Activities</a>
<ul class="footUnder">
<li class="footSubBottom"><a href="seminars.html">Seminars</a></li>
<li class="footSubBottom"><a href="cff.html">Cycle for Fit.</a></li>
<li class="footSubBottom"><a href="choose.html">Choose your bike</a></li>
<li class="footSubBottom"><a href="rides.html">Rides</a></li>
</ul>
</li>
<li class="footTop"><a href="contact.html">Contact</a>
<ul class="footUnder">
<li class="footSubBottom"><a href="visit.html">Visit us</a></li>
<li class="footSubBottom"><a href="info.html">Contact Info</a></li>
</ul>
</li>
<li class="footTop"><a href="qa.html">Q & A</a>
<ul class="footUnder">
<li class="footSubBottom"><a href="faq.html">FAQ's</a></li>
<li class="footSubBottom"><a href="ask.php">Ask a Q</a></li>
</ul>
</li>
<li class="footTop"><a href="about.html">About</a>
<ul class="footUnder">
<li class="footSubBottom"><a href="history.html">History</a></li>
<li class="footSubBottom"><a href="staff.html">Staff</a></li>
<li class="footSubBottom"><a href="employ.html">Employment</a></li>
</ul>
</li>
</ul>
<a href="owner.php">Owner Portal</a>
</div>
CSS
/**/
/* Styling for the footer list */
/**/
#dafoot{
float: left;
margin-bottom: 10px;
margin-left: 10px;
margin-top: auto;
line-height: 15px;
width: 1077.5px;
margin-top: 10px;
position:relative;
color: white;
background-color: white;
}
#footlist{
font-size: 25px;
color: #ffbb00;
list-style: none;
}
a .footTop{
color: white;
font-family: Georgia;
}