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;
}
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;
}
My problem is that the .row a color is also affecting my contact link to be white, and even tho I try changing it to ex. red it does not work, but the hoover works so it becomes green.
.row a {
color: white;
text-decoration: none;
}
a.contact:link {
color: red;
}
a.contact:hover {
color: green;
}
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>Contact</li>
</ul>
</div>
<div class="contact">
<h2>Phone:</h2>
<p>00000000</p>
</div>
</div>
I have also tried adding a class inside like this with no luck,
<p><a class="contact" href="tel:+0000000" target="_blank">0000000</a></p>
How do I change my phone link to have a different color?
but the hoover works so it becomes green.
Given the code you have, that won't be the case. It would be if you either set the class on the link (as in your second example) or used the class in a descent combinator (as you did in for the row class).
If you change that then you would get the behaviour you describe.
:hover works but :link does not because you have visited the link.
:link only applies to unvisited links (its companion is :visited).
Since the link is visited, you have no styles that match it other than .row a.
You can remove the requirement for the link to be unvisited (i.e. a.contact or .contact a depending on if you move the class attribute or not) or add a style for visited links (e.g. .contact a:link, .contact a:visited {}).
All what you need to change is this two classes:
.contact a {
color: red;
}
.contact a:hover {
color: green;
}
Because you select the element by class name and then all anchors inside of them.
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.
I have a style sheet that provides special styling for all <A> elements:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
However, I don't want to apply this styling to <A> elements that serve as page anchors (e.g. elements with a name attribute.) So, I create another class to override the general rule for <A> elements:
.anchor-text {
}
.anchor-text a:hover {
text-decoration: none;
}
I then apply it like this:
<a href = "">
A Hyperlink (this should underline on hover)
</a>
<a class='anchor-text' name='foo'>
Anchor text (this should NOT underline on hover)
</a>
However, using both Chrome and Firefox, BOTH the link text and the anchor text show an underline when I hover over them. So, why is the anchor-text style class not overriding the general rule for <A> tags?
!important isn't the problem. It's because your selector was .anchor-text a:hover instead of .anchor-text:hover
Here's a JSFiddle
CSS
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.anchor-text {
}
a.anchor-text:hover {
text-decoration: none;
}
HTML
<a href = "">
A Hyperlink (this should underline on hover)
</a>
<a class="anchor-text" name="foo" href="">
Anchor text (this should NOT underline on hover)
</a>
If you want it to work without a need to use a class, you can use:
a[name]:not([name='']) {
text-decoration: none !important;
}
Fiddle: http://jsfiddle.net/Et389/
fiddle
a.anchor-text:hover {
text-decoration: none;
}
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.