On my side, i want all links in texts etc to be red.
All headlines should be black.
AND All linking headlines should be black as well.
Problem: As soon as I set ...
a:link {color:#d11112; text-decoration: none;}
...all my linking headlines turn red as well.
How do I keep them black?
Here is my headline css:
h2 { font-size:18px; line-height:23px; color:#000000; padding:0px; font-weight:bold; text-align:center; text-transform: uppercase; }
You might want to add
h2 a { color:000000; }
somewhere after
a:link {color:#d11112; text-decoration: none;}
Also, lose the :link, as suggested in the comments.
Just so you're aware, when you do a:link this is setting the color for an unvisited link.
You need to set the color for the a element inside of your h2 tags.
So you need to change it to:
h2 a { font-size:18px; line-height:23px; color:#000000; padding:0px; font-weight:bold; text-align:center; text-transform: uppercase; }
One thing you can try is an attribute selector. This lets you select only elements based on the value of a specific attribute or attributes. Therefore, to select only <a> elements you're using as anchors, you could try something that selects <a>s with an id but not a href, or something like that.
For instance, you could have this rule:
a:not([href]) {
color: black;
}
However, it wouldn't be compatible with IE 6 (then again, what is?)
CSS works in a nested way, so assuming your <a> tags are within the <h2>, that is:
<h2>
...
</h2>
it'll apply first the <h2> styles and then the <a> styles, so you end up with red links. However, you can make it apply the h2 CSS to those links as well by using CSS selectors instead of just the h2 tags, for example:
h2, h2 > a {[your style here]}
where h2 > a means <a> tags nested within an <h2>.
Related
I know that this question has been asked here before, but none of the answers provided there seem to be working for me.
I have a stylesheet setting the color of all links to, let's just say, red. All the rest of the text on the page is plain 'ol black. I have a particular H1 element that is a link, but I do not want this H1 element to be red, like all other links. Instead, I just want it to be regular black, like all other text. No matter what I seem to try, though, it stays red as all other links.
This is the code I have in my stylesheet:
a:link {text-decoration: none; color: #B83131;}
a:visited {color: #B83131;}
I have tried specific styling for the specific H1 tag, but it doesn't help. I tried giving the H1 tag a class name and styling that class, but it didn't help. I feel like I am missing something here...
Did you set it to the anchor?
h1 a:link { color: black; }
If your markup resembles the below:
<h1>
Bleh
</h1>
Then you should be able to add the CSS rule as:
h1 a { color: #000; }
I'm trying to create my website so you can tell where you are just by the colour of the elements in each div. The website is only one page and I'm using jQuery to slide out sections of the website when you click to open that section (As opposed to having seperate .html's).
To show them which section they have open I'm making all links in each section the same colour as the text that opens that section. However I also want to have<a> </a> tags which aren't links to add a bit of colour to the site and to attract viewers to key bits of information. For this reason I want to only apply link effects to <a> </a> tags which are actually links... So I've tried this:
#box1 a{
color: #68cff2;
}
#box1 a:link:hover{
color: #ffffff;
background-color: #68cff2;
}
This works for the background-color as in it only changes the background colour for <a> </a>'s that have a href="..." but it doesn't change the color of the font for such links... is there any way to sort this?
The :link pseudo-class only applies to unvisited links, as opposed to all links. Remember that you have visited links to account for as well. You may need to repeat the selector for visited links, as I notice that you haven't done so:
#box1 a:link:hover, #box1 a:visited:hover {
color: #ffffff;
background-color: #68cff2;
}
(or just use #box1 a[href]:hover instead, more info)
I should add, though, that you shouldn't be using <a> tags to mark up things that aren't links and don't serve as anchors either, just to "add a bit of colour to the site and to attract viewers to key bits of information". That's not what they're designed for. A more semantic alternative would be something like <em> or <strong>, though of course you have to remove the italic or bold style if you don't want it:
#box1 a, #box1 em {
font-style: normal;
color: #68cff2;
}
#box1 a:hover{
color: #ffffff;
background-color: #68cff2;
}
Then you won't need to specify the :link and :visited pseudo-classes, since you can basically guarantee that all your remaining <a> elements are links.
Is there a need for a:link:hover{}? Just try using a:hover {}
a:hover will also affect the anchor tags, which can be confusing to end-users if they behave in the same way as links.
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.
I have the following markup:
<a><div class="action_button">Log In</div></a>
I have styling on .action_button to make it bigger and have a background etc.
I also have styling on .action_button:hover to make it have a lighter background and an inset shadow when the user hovers on it.
How do I apply styling to the anchor tag that surrounds it, but only when it surrounds a .action_button div.
For example, this works:
a:hover {
text-decoration:none;
}
But it affects all links, I only want to affect those that surround the .action_button divs.
Why not just:
<a class="action_button"></a>
CSS:
.action_button {
text-decoration: none;
display: block;
/* other styles */
}
I don't see the point of having a DIV inside an A. If you want the anchor to be a block, just set display: block on that anchor directly.
a .action_button:hover{
text-decoration:none;
}
I would change the code around slightly - the <a> should be nested inside the <div>, as the div is a block element and the anchor tag is inline.
Then you can simply use the following:
<style>
.action_button a {text-decoration:underline; }
.action_button a:hover {text-decoration:none; }
</style>
I think you need to add a class to the "a" element that contains the button. you can't build a selector that works in the other direction.
You can use JQuery to add a class to every "a" that has a div with the class .action_button
$("a").has("div.action_button").addClass("myclass");
And then, obviously, use that class to select your "a" tags.
http://api.jquery.com/has/
I've tried this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
font-color: red;
font-weight: bold;
}
and this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
color: red;
font-weight: bold;
}
but I still end up with a gray font on my H3 text.
Why?
Either you have another color set for the id #ambrosia and that is taking precedence over the generic selector, or you have another tag inside the h3 which has a color assigned to it.
Or, in your html you have the #ambrosia applied to the h3 tag, but in your css, you have specified an h3 element which is inside an #ambrosia element. If you are wanting to use <h3 id="ambrosia">, your css should be
h3#ambrosia { color: red; }
You likely have other CSS that has a more specific selector that's giving your <h3> that font color, identifying that selector and/or posting your markup would help us provide a more specific selector that would override the font color.
You should use Chrome's "Inspect Element" option.
Right click on the line and choose Inspect Element and it will show you the path of the CSS evolution of your element.
the color: red; syntax is correct. however it is possible that you have some other styles in your css file that are conflicting.
you might try using the "firebug" firefox plugin. it will allow you to select the element and see exactly which style is applied to the element and if your class is being overridden