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;
}
Related
I am creating navbar. Transparent by default, but a certain color(including text/hyperlinks) once hovered over it. I can't seem to find a way to remove purple color from visited hyperlinks. Tried :visited and reformatting to make sure everything is as DRY as a beginner can make it be.
HTML:
<body>
<div class="topnav" id="Topnav">
Shop
Our Story
Contact
</a>
</div>
</body>
CSS:
body {
margin: 0;
}
.topnav {
background-color: transparent;
overflow: hidden;
height: 6rem;
display: flex;
align-items: center;
color: black;
}
.topnav:hover {
background-color: black;
color: red; /* Hyperlinks supposed to inherit this color when hovering navbar*/
}
.topnav a {
margin-left: 2rem;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
font-family:Poppins,Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
I was thinking of using && and "IF" statement to check hover state in JS to hook it up, but there must be a css-pure solution...
P.S. Don't mind the colors, it's for test.
This sets the links blue whether visited or not - and sets the links red on .topnav hover whether the links are visited or not.
.topnav a {
color: blue;
}
.topnav:hover a {
color: red;
}
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
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 a element and I want to change the color of the links within it, but all other links on my page are styled using the following CSS:
a:link {
color:#22b14c;
text-decoration:none;
}
and here is the nav:
<nav id="Nav">
Home |
Library |
Contact |
About
</nav>
and the nav css:
#Nav {
margin-top: 20px;
background-color: #000000;
color: #f2f2f2;
font-size: 40px;
font-family: "Calibri";
text-align: center;
}
I tried a span inside the nav element but that didn't work. How can I change the color for these links only inside the element?
Are you looking for this:
#Nav a{
color: #f2f2f2;
text-decoration:none;
}
#Nav a:hover {
color: blue;
text-decoration: underline;
}
#Nav a {
color: #f2f2f2;
}
#Nav a:hover {
color: red;
text-decoration: underline;
}
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.