UL class not working? Only LI works? - html

Question

I just started HTML/CSS two days ago.. Please go easy on me. I'm currently building a website. For some reason, I cannot get the the HTML class/id to render with CSS. To make it work, I have to make a class for each list. How do I make it so that the class for ul as a whole? (When I take out the <li class="name_here>, all the styles don't work anymore)
HTML
<div>
<ul class="navi">
<li class="navi"><img src="../images/bestfoodservicesweb_07.jpg" width="104" height="67" />
<img src="../images/bestfoodservicesweb_09.jpg" width="105" height="67" />
<img src="../images/bestfoodservicesweb_11.jpg" width="110" height="67" />
<img src="../images/bestfoodservicesweb_13.jpg" width="105" height="66" /></li>
</ul>
</div>
<div>
<div>
<ul class="lastbit">
<li><img src="../images/bestfoodservicesweb_34.jpg" width="85" height="29"/></li>
<li><img src="../images/bestfoodservicesweb_37.jpg" width="62" height="16" /></li>
<li><img src="../images/bestfoodservicesweb_38.jpg" width="69" height="16" /></li>
<li><img src="../images/bestfoodservicesweb_39.jpg" width="100" height="16" /></li>
</ul>
<ul class="lang">
<li class="lang"><img src="../images/bestfoodservicesweb_41.jpg" width="29" height="14" /></li>
<li class="lang"><img src="../images/bestfoodservicesweb_43.jpg" width="39" height="17" /></li>
</ul>
<ul class="social">
<li class="social"><img src="../images/bestfoodservicesweb_27.jpg" width="30" height="29" /></li>
<li class="social"><img src="../images/bestfoodservicesweb_29.jpg" width="30" height="29" /></li>
<li class="social"><img src="../images/bestfoodservicesweb_31.jpg" width="30" height="29" /></li>
</ul>
</div>
</div>
CSS
.navi {
list-style: none;
display: inline;
margin-left: 5px;
position: relative;
top: 5px;
}
.lastbit {
list-style: none;
display: inline-block;
}
.lang {
list-style: none;
display: inline;
}
.social {
list-style: none;
display: inline;
}

Answer 1

You should read up more on selectors in CSS. In a nutshell what you are doing with this:
.social {
list-style: none;
display: inline;
}
is saying that everything with the class social gets the given styles applied to it.
When you have that class on each of the li elements it applies as you want. However when you are putting that class on the ul it is applying the styles to the ul and not the li. To fix this you need to specify that you want the styles on the li by changing the selector slightly:
.social li {
list-style: none;
display: inline;
}
The above says that all li elements that are descendents of items with class social should have the styles which is what you want.

Answer 2

Not exactly sure what you are trying to do, but you might try something like this.
.lastbit li {
list-style: none;
display: inline-block;
}
Your markup can then be:
<ul class="lastbit">
<li></li>
...
</ul>
This will apply the style to all the li elements of the ul you mark with that style.

Answer 3

To style all lists, use:
ul{
/* styles here */
}
To style all of the items in the list, use
li{
/* styles here */
}
To style all of the anchors in all of the items in the list, use
li a{
/* styles here */
}
Also, just so you're aware, your first ul has the class name "navi" and so do the items within the list. It also only has one <li>, although you likely want 4 (since you have 4 links in it).