How do you style two unordered list on the same page in CSS?

Question

I am trying to add a different styling to the second unordered list under the navBar2 section. I've tried using a class like ul.navBar2 to apply it on the second div section but I can't get it work.

ul {
list-style-type: none;
color: white;
margin: 0;
}

li {
display: inline;
float: right;
}
li a{
text-decoration: none;
color: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
}

li a:hover {
background: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
color: #171717;
 }

<div id="navBar1">
<nav>
<ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">Sign Up</a></li>
</ul>
</nav>

<div id="navBar2">
<ul color: black; font-size: 20px;>
    <li><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
</ul>
</div>

Answer 1

I'm confused why adding a class to the ul hasn't been suggested.

<nav>
    <ul class="ul_class1">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Sign Up</a></li>
    </ul>
</nav>
<div id="navBar2">
    <ul class="ul_class2">
        <li><a href="#">home</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">gallery</a></li>
    </ul>
</div>

css:

.ul_class1 li {
    //My CSS
}

.ul_class2 li {
    //My CSS 2
}

For future reference inline styles are written <ul style="color: black; font-size: 20px;">

Answer 2

<ul color: black; font-size: 20px;> <ul color: black; font-size: 20px;> is invalid HTML and won't work. You can use a style attribute instead: <ul style='color: black; font-size: 20px;'> <ul style='color: black; font-size: 20px;'>

A second detail: You wrote: "I've tried using a class like ul.navBar2". First of all, your element is <div id="navBar2"> , so that's an ID, not a class, which would address as ul#navBar2 instead of ul.navBar2 . And second, if you want to change the style of the li elements inside the ul indise that div, you'd have to use the selector #navBar2 li { ... } .

Answer 3

What about something like this? You can keep the nav tag if you want, but they'd purely be for content separation / personal styling:

CSS Section:

<style>
  #navBar2 ul {
    list-style: none;
  }
  #navBar2 ul li {
    font-weight:bold;
  }
</style>

HTML section:

<div id="navBar1">
    <ul>
       <li><a href="#">About Us</a></li>
       <li><a href="#">Downloads</a></li>
      <li><a href="#">Sign Up</a></li>
   </ul>
</div>

<div id="navBar2">
    <ul style="color: black; font-size: 20px;">
       <li><a href="#">home</a></li>
       <li><a href="#">services</a></li>
       <li><a href="#">gallery</a></li>
   </ul>
</div>

Hope this helps - any more questions about styling, etc just ask!

PS - unsure if it was a copypasta error, but the closing div for #navBar1 wasn't there :)