Question

I made a list and using the ul tag added an id, but the only way I can seem ot get my list to be styled is by actually styling the ul and li tags but if i do that all my lists will look the same. If you dont understand heres the code –

 <ul id="navigation">
                <li><a href="http://www.google.com">Home</a></li>
                <li>Premium</li>
                <li>FAQ</li>
                <li>Disclaimer</li>
            </ul>
            <ul id="login">
                <li>Login</li>
                <li>-</li>
                <li>Register</li>
            </ul>

But I dont want both of these lists to be styled that way I want them to be different and the only way I can get the style to take effect is to do –

#navigation{
color:#808080;
float:left;
margin-top:50px;
font-family:"Myriad Pro", Times, serif;
}

#login{
color:#808080;
float:right;
margin-top:50px;
font-family:"Myriad Pro", Times, serif;
}

ul li{
display:inline;
text-decoration:none;
padding:15px;
 }

So my question is how can I apply padding 15px to the navigation list and not to the login list I tried putting it in the navigation css code but it did nothing 🙁

thanks!!

Answer 1

Best way to do it is to put the generic styles first , then the more specific styles after

ul li {
  display:inline;
  text-decoration:none;
}

#navigation, #login {
  color:#808080;
  margin-top:50px;
  font-family:"Myriad Pro", Times, serif;
}

#navigation {
  float:left;
}

#login{
  float:right;
}

#navigation li {
  padding:15px;
}