I am trying to create site footer for my wordpress site. in HTML I have the following:
<div class="footer-titles">Footer title one</div><br />
<div class="lefttext1">Community <br />
Forums <br />
Contact Us <br />
</div>
In my CSS I have the following:
.lefttext1 {
text-align: left;
font-size: 13px;
color: #ffffff; !important;
line-height: 1.8;
font-weight: 400;
margin-left: none;
padding: none;
list-style-type: none;
}
.footer-titles {
color: #ffffff;
font-size: 18px;
text-align: left;
line-height: 1.9;
font-weight: 600;
}
The background is #333 and I want the font color to be #ffffff but I can't do that. In every time I use inspect element I see this:
#Bottom a {color:#888;}
#Bottom a:hover {color:#111;}
If this was only relevant to the home page, I would use:
.home #Bottom a:hover {color: #ffffff;}
.home #Bottom a:link {color: #ffffff;}
and that's it. But this is not the case because I want the links to be white site wide. I already tried the following code and it didn't work:
.lefttext1 a {
text-align: left;
font-size: 13px;
color: #ffffff; !important;
line-height: 1.8;
font-weight: 400;
}
Please help me make the URL font color white on site wide footer as I need to override the [#Bottom a] on all pages for this specific pseudo selector but I am not sure how to achieve this.
Thanks
Try this code
.lefttext1 a:link, .lefttext1 a:visited, .lefttext1 a:active, .lefttext1 a:hover {
color: #FFFFFF;
}
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Related
Text for link is staying the same color(purple) even though I've never made it that color and want it to be white.
I've tried adding nav:link, nav:active and such but it just changes back to the default with no CSS
nav{
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-align: center;
word-spacing: 300px;
color: #edf5e1;
background-color: #05386b;
text-decoration: none;
}
<nav>
Home
Projects
About
Contact
</nav>
For the text to be all white with no underlines
a tags have their own explicit styling, so you need to override them directly. Just setting the color on the parent nav tag won't change them, you need to style the a tags themselves.
nav a{
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-align: center;
word-spacing: 300px;
color: #edf5e1;
background-color: #05386b;
text-decoration: none;
}
<nav>
Home
Projects
About
Contact
</nav>
You need to apply styling for nav a instead of nav. a have certain styling by default used by the browser.
nav {
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-align: center;
word-spacing: 300px;
color: yellow;
background-color: #05386b;
}
nav a {
color: #fff;
text-decoration: none;
}
<nav>
Home
Projects
About
Contact
</nav>
Yes, you'll need to target the links directly, like this:
nav a,
nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
color: #FFFFFF;
text-decoration: none;
}
You may not need all of the states as shown here, but this will make the link always appear white with no underline.
The actual browser default link color is blue.
For it to appear just replace your CSS selector nav with nav a to set all the properties on the anchor tag instead of the nav element.
nav a {
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-align: center;
word-spacing: 300px;
color: #edf5e1;
background-color: #05386b;
text-decoration: none;
}
On my website, http://thelooter.family, I've got the following CSS code:
#nav a:hover {
color: red;
text-decoration: underline;
font-weight: bold;
}
#nav a:visited {
color: lime;
text-decoration: none;
}
#nav a {
color: lime;
text-decoration: none;
}
#nav #location {
color: skyblue;
text-decoration: underline;
font-weight: bold;
}
and the following HTML code:
<div id="nav">
<p>
Home<br>
Game Cheat List<br>
<img src="" id="2big4u" height="10px" width="10px"/>
Minecraft<br>
<img src="" id="2big4u" height="10px" width="10px"/>
<img src="" id="2big4u" height="10px" width="10px"/>
Crafting<br>
<img src="" id="2big4u" height="10px" width="10px"/>
Little Alchemy
</p>
</div>
The links, when hovered should turn red, right? When hovering on Minecraft, Crafting, or Little Alchemy, they turn red, but Game Cheat List stays lime.
It stays lime green because you have visited the link, and your CSS selectors for a:hover and a:visited are equally "strong", therefore the last selector wins out. To fix it, reorder your CSS selectors by declaring a:hover after a:visited so that a:hover is stronger than a:visited, or increase the specificity of a:hover.
#nav a:visited {
color: lime;
text-decoration: none;
}
#nav a:hover {
color: red;
text-decoration: underline;
font-weight: bold;
}
A Quick Guide to CSS Specificity
The issue lies here:
#nav a:visited {
color: lime;
text-decoration: none;
}
Once the link is visited, it doesnt turn red on hover.
Apply these css changes and it should work fine:
#nav a:hover, #nav a:visited:hover {
color: red;
text-decoration: underline;
font-weight: bold;
}
Check this screenshot
My site works and looks fine using Chrome, Safari, and Firefox but in the Microsoft Edge browser, my navbar breaks. Whenever I visit a page, the background color of the nav link becomes white when its supposed to stay dark blue (#293241). Here is my code:
.nav a:link, .nav a:visited {
display: block;
width: 100px;
background-color: #293241;
color: #FFF;
padding: 7px;
text-decoration: none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
<div class="nav">
test
</div>
Any work around?
Edited a:link and a:visited into two css sections fixed the issue. Like so:
.nav a:link {
display:block;
width:100px;
background-color:#293241;
color: #FFF;
padding: 7px;
text-decoration:none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
.nav a:visited {
display:block;
width:100px;
background-color:#293241;
color: #FFF;
padding: 7px;
text-decoration:none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
<div class="nav">
test
</div>
I have these styles for all my a links globally. I am not able to override the a link style in a div on the same page.
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
Now I want to override the style for anchor link to change its color to white on hover but only in a div of multiple classes unseen and notification container like this one...
<div class="unseen notificationContainer">
<a href="profile?customerId=1365764036258">
<strong>robert</strong>
</a>
sent you a friend request
<a href="friend_request?type=accept¬ificationId=1365764054463">
Accept
</a>
<a href="friend_request?type=reject¬ificationId=1365764054463">
Reject
</a>
</div>
so I add the following to my CSS
.unseen{
background: #09f;
color: #fff;
}
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
When the page loads hovering on first link makes changes its color to white but the other three take the color blue of the background. I have been on this for the past one hour and not it's just irritating. Style for notificationContainer is as below
.notificationContainer{
width: 390px;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
Thanks in advance.
CSS cannot possibly have bugs, only a browser can (unless you mean errors in the CSS specification, etc).
That said, this is a bug in your code and not with the browser:
.unseen a :hover{
color: #fff;
text-decoration: underline;
}
The space between a and :hover means any element that is :hover and within a, much like .unseen a means a elements within .unseen, so that won't work. You need to remove that space:
.unseen a:hover{
color: #fff;
text-decoration: underline;
}
Not really sure what you're after - your question doesn't really make it clear. Forgive me if I've miss-guessed. Does this help? (You can target elements with multiple classes)
<style>
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.unseen.notificationContainer a:hover
{
background: #09f;
color: #fff;
text-decoration: underline;
}
.notificationContainer
{
display: inline-block;
float: left;
border-bottom: solid 1px #eee;
padding: 5px;
}
</style>
and
<div class="unseen notificationContainer">
<strong>robert</strong>
sent you a friend request
Accept
Reject
</div>
I am creating a website and I am unsure of why the links on the page are not showing up as the right colors when hovered over. Here is one of the pages: http://jsfiddle.net/yentup/CR9TK/
The links I am worried about are the links in the content of the page. When hovered over, they are supposed to be red. However, they stay the same color. I am able to force the correct color using !important, but I would much rather avoid this because then all the other links I also have to use !important on to get their correct colors as well. Here is the bit of css that is conflicting, but you can find all the css for the entire page in the link mentioned above:
a:link {
text-decoration: none;
color: #787878;
}
a:hover {
color: #8B2323;
text-decoration: underline;
}
#header ul li a {
text-decoration: none;
text-transform: uppercase;
font-family: 'Quintessential', serif;
font-size: 24px;
font-weight: bold;
color: #909090;
border-left: 1px dotted #d0d0d0;
padding: 8px 14px;
}
#header ul li a:hover {
color: #D2691E;
}
Swap places of a:hover and a:visited .
a:visited {
color: #787878;
}
a:hover {
color: #8B2323;
text-decoration: underline;
}
Should work then as expected.