This is my CSS code that is supposed to reformat links:
a {
color: #120000;
text-decoration: underline;
}
This is my HTML code:
<div id="intro" class="grid_9">
<h1>This site just might change your life</h1>
<p><a href="#" class=button>Browse Our Features</a></p>
</div>
The problem is that the header (but only this one) is being affected in the same way as the links. How can I fix this?
Just add a class to the <a> tags that should not follow it or use the existing one depending on whether or not that class is specifically for that purpose. Then, use the :not() selector:
a:not(.button) {
color: #120000;
text-decoration: underline;
}
Fiddle: Fiddle
Also, the header would only follow the CSS for the <a> if it were wrapped in an <a> tag. If this is true, give that <a> tag the set class.
Related
I am working on an HTML email signature, which has to be done using rudimentary HTML. I have to use very simple CSS, tables and declare inline CSS for everything. All in all it works fine, but I have an issue with links. I can stripe the link to have no underline or color:
<a style="text-decoration: none; color:inherit!important;" href="https://#">link</a>
But don't know it is possible at all to add :hover entity inline?
a: hover {text-decoration: underline;}
Any ideas are welcome!
There's no equivalent :hover in inline css.
You can give your anchor tag a class or id and change the property you need in there
<a class="anchor"> link </a>
Inside your css stylesheet
.anchor{
text-decoration: none;
}
if you don't want to use external stylesheet you can add a onmouseover attribute to the element like so
Link
The inline style have higher priority.
simply remove the text-decoration: none; from the element.
a{
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<a style="color:inherit!important;" href="https://#">link</a>
another way is to add !important, but it's considered a bad habit:
a:hover{
text-decoration: underline !important;
}
I have an HTML page where the links are specified blue by default for most of the body. I speficy it like this (using SASS):
a:link {
color: $link_new; // This is a blue colour
}
I have a navigation menu that has a blue background, so just in the header, I want to change the links to white. Up until recently, my header was contained in a DIV tag that had the ID "header". My code is like this:
#header a:link {
color: #ffffff;
text-decoration: none;
}
Recently, I thought I would change the div to be a <header> tag. Just change <div id="header"></div> to <header></header>. So, in my CSS, I have:
header a:link {
color: #ffffff;
text-decoration: none;
}
But, when I do this, the link text stops being white! I change nothing else, so I don't see how this can be. I reverted the <header> back to <div id="header">, and my links go back to being white, as they should be.
I don't get it. Does a <header> tag inherit differently or something? Why would the header tag pull the colour from the a:link declaration, and not the more local header a:link declaration?
Here is what the link element looks like under the ` when using the Firefox developer inspector:
And here is what it looks like with a <header> element:
As you are not using HTML5 (by seeing your Doctype) so you cannot used header element directly . As per HTML5 specification header is treated as HTML element. So simply change your Doctype and use this one <!DOCTYPE html> then you can use <header> element.
You need to add :link after a
Like this
header a:link {
color: #fff
}
You need to change a:link to a.
header a {
color: #ffffff;
text-decoration: none;
}
Please check the Jsfiddle demo
in first code you written code by using selector '#header a' and after you use <header> tag than you give style by using 'header a'
in this case ID's priority is high than class or element selector
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
http://css-tricks.com/specifics-on-css-specificity/
I began to learn html'n'css, but I've encountered one thing that I cannot explain. I have a html file, that has a div which acts like a link (in the application I am setting the div size and want for the whole box to act like a link). I cannot remove the text underline decoration for the text in the div though (Link1 in the Example is always underlined). The selector should be "any div within a link element", and because the link is red, I think it is correct.
I managed to do this by introducing a special class for removing the underline explicitly (Link2 in the Example is ok), but I would like to have all the menu styles in one place.
The question is, whether can someone explain why the removing deco like this (Link1) does not work. Moreover, I would like to ask if the organization of the menu is a good style, or if I should reorganize the code, e.g: having this for example:
<div>Blabla</div>
and the style:
a.menuitem {...}
a.menuitem div {width:...;}
Here is the minimal (non-)working Example:
<html>
<head>
<style>
a div.menuitem {
text-decoration: none;
color: red;
}
.remove-under {
text-decoration: none;
}
</style>
</head>
<body>
<a href="./index.html">
<div class="menuitem">Link1</div>
</a>
<a href="./index.html" class="remove-under">
<div class="menuitem">Link2</div>
</a>
</body>
</html>
Thanks a lot!
Semantically speaking a <div> should not go inside an <a>. div tags are block elements where anchor tags are inline elements - and block elements should never go inside inline elements. Instead use <span> if you need to stylize something different inline but in your case, additionally, you can add a class to the <a> which would work better.
Here is your new code:
<a href="./index.html" class="menuitem">
Link1
</a>
<a href="./index.html" class="remove-under menuitem">
Link2
</a>
You can have multiple classes to an element by putting a space, so Link2 has the class "remove-under" and "menuitem"
Update your CSS to remove the underline:
.remove-under {
text-decoration:none;
}
In order to get your whole a tag to be a link (not just the text) add the follow css for your menuitem class:
.menuitem {
display:block;
width: 100px;
height: 50px; /* or whatever your desired width and height */
background: red; /* to show that the whole anchor will be link, not just text */
}
This is not the ideal solution. You really should not be putting block level elements inside inline elements.
However, if you absolutely must get it working, you can add display: inline-block; to the div.
a div.menuitem {
text-decoration: none;
color: red;
display: inline-block;
width:100%;
}
.remove-under {
text-decoration: none;
}
You have 2 problems here:
You can't do something like this
<div></div>
because a is an inline element. What you do here is an invalid HTML code. DO it like this:
<div></div>
You try to apply text-decoration:none on the div element and you should apply it to the a element.
a {text-decoration:none;}
I've assigned the class "greenbutton" to a link in my html, but none of the changes I make to this class on my CSS take effect.
home.html.erb
<p><a class="greenbutton" href="#">Sign Up</a> to learn more</p>
custom.css.scss
.greenbutton a:link, .greenbutton a:visited {
font-size: 14px;
text-decoration: none;
}
The weird thing about this is that when I assign this class to the preceding paragraph tag, the changes take effect. Any thoughts?
The CSS you're trying should either be applied to the <p> or modified to a.greenbutton. What you're specifying is an anchor within an element classed greenbutton. e.g.
.greenbutton a { } /* anchor inside .greenbutton-classed element, like:
<p class="greenbutton">
Foo
</p>
*/
a.greenbutton { } /* anchor with .greenbutton class applied, like:
Bar
*/
Your selector is wrong:
.greenbutton a:link
This targets anchor links within an element that has the class "greenbutton". What you want is for the class to be on the anchor:
a.greenbutton:link
Css class should be like this.
a.greenbutton, a.greenbutton:visited {
font-size: 14px;
text-decoration: none;
}
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/