Setting font colors in CSS for links
I'm trying to make navbar links in one color, while the main window has links in a different color. I am using a CSS stylesheet and it works, but I think my main rule for a
is overriding any other rules I have set as the navigation bar .leftside
has incorrect colored text. I even tried !IMPORTANT
it but still doesn't fix anything unless I remove the rule a
in the CSS sheet. Can anyone tell me what I am doing wrong?
HTML:
a {
text-decoration: none;
color: #303030;
}
.leftside {
position: relative;
float: left;
margin-top: 70px;
width: 10%;
height: 600px;
background-color: #4C4C33;
margin-bottom: 10px;
color: white;
}
<div class="leftside">
<a href="gallery.html">Image Gallery</a>
</div>
source to share
The text inside .leftside
has color white
. But inside it .leftside
exists <a>
. You have defined separate style definitions for <a>
, so the color has been .leftside
overridden . Overriding is the main idea of CSS ( Cascading StyleSheet):
The rule to use is selected by cascading from more general rules to the required specific rule. The most specific rule is selected. ( source )
To fix the problem, you need to assign a color <a>
internally .leftside
, which can be done with a more specific selector .leftside a
:
a {
text-decoration: none;
color: #303030;
}
.leftside {
position: relative;
float: left;
margin-top: 70px;
width: 10%;
height: 600px;
background-color: #4C4C33;
margin-bottom: 10px;
color: white;
}
.leftside a {
color: white;
}
<div class="leftside">
<a href="gallery.html">Image Gallery</a>
</div>
source to share
from your css and html. I don't see you setting a specific color for your links in the div.leftside. Here's an example of how I set the css for a link (using the ". Leftside: selector ):
Html
<div class="leftside">
<!-- navigation link will be red -->
<a href="gallery.html">Image Gallery</a>
</div>
<!-- non-navigation link will be default color -->
<a href="http://google.com" target="_blank">Visit Google</a>
CSS
a {
text-decoration: none;
color: #303030;
}
.leftside {
position: relative;
float: left;
margin-top: 70px;
width: 10%;
height: 600px;
background-color: #4C4C33;
margin-bottom: 10px;
color: white;
}
/* here is the selector for the link within the .leftside */
.leftside a {
color: red;
}
Additional Notes
You can also create links based on state. so to create your .leftside links you would do the following (inspired by W3Schools )
/* unvisited link */
.leftside a:link {
color: #FF0000;
}
/* visited link */
.leftside a:visited {
color: #00FF00;
}
/* mouse over link */
.leftside a:hover {
color: #FF00FF;
}
/* selected link */
.leftside a:active {
color: #0000FF;
}
source to share