I'm currently exploring how to style an element differently across my website. Specifically, I have a green background for the list in my navigation bar, but I'm also creating a list in the body that is inheriting the same formatting from the nav bar.
My query is regarding how to create an ID or CLASS to remove the styling applied in my navigation bar and apply my own custom formatting to the list in the body. I've tried searching YouTube videos and Google for a solution, but all I found were methods for styling multiple selectors simultaneously.
How can I override the CSS from my navigation bar for the list in the body?
For my CLASS, I attempted using 'ul.amazon01 { background-color: none;}' but it didn't work as expected.
Here is the HTML code for my navigation bar:
<div class="flex-container">
<div class="box1">
<ul id="nav01">
<li class="dropdown">
<a href="#" class="dropbtn"># Menu</a>
<div class="dropdown-content">
<a href="index.html"></a>
<a>#</a>
<a href="#</a>
<a href="#</a>
<a href="#</a>
<a href="#</a>
</div>
</li>
</ul>
</div>
</div>
ul {
list-style-type: none;
margin: 0;
padding: 0.25rem;
overflow: hidden;
font-size: 1rem;
background-color: green;
border: 3px solid darkgreen;
}
This is the code snippet I intend to use in the body of my page:
<ul class="amazon01">
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
CSS
ul.amazon01 {
background-color: none;
}