I am currently attempting to customize the background color and text color for specific HTML components.
Within my project, there are 3 navigation bars. I aim to establish a default color for all nav bars while also altering the specific color of one of them.
To style all links, I have implemented the following in the CSS stylesheet:
html {
font: 16px Arial, Helvetica, sans-serif
}
a {
color: #1177d1;
}
The 'a' selector effectively targets all anchor elements, but I encounter an issue when trying to change the text color for a particular nav bar to #FFFFFF and background color to #1177d1. The text color remains consistent with the parent code. How do I prevent this?
Below is the HTML and CSS code snippet specifically related to the nav bar in question:
html {
font: 16px Arial, Helvetica, sans-serif
}
a {
color: #1177d1;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul.vertical {
flex-direction: column;
}
nav ul.horizontal {
flex-direction: row;
background-color: #1177d1;
color: #FFFFFF;
}
nav ul li {
flex: 1 1 auto;
list-style-type: none;
}
nav ul li a {
text-decoration: none;
}<nav>
<ul class="horizontal">
<li><a href="home_page.html">Home</a></li>
<li><a href="test_page.html">Services</a></li>
<li><a href="photo_page.html">Photos</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact_page.html">Contact Us</a></li>
</ul>
</nav>