I'm new to css. Here's my html
Add Note
The class "clickme" is part of a jquery function and the id is supposed to change the size from the standard of other links but it isn't making the text smaller.
#noteaddbutton{
font-size:13px;
}
a:link{
font-size:18px;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
It is working for me. I am using FF8. You can try this.
#noteaddbutton{
font-size:13px !important;
}
I think a:link is taking precedence over #noteaddbutton. Try using
a.clickme:link{ font-size: 13px;}
CSS is read starting at the top and going down (cascading style sheet). The element you are attempting to style has the following qualities about it,
<a> tag
#noteaddbutton
.clickme
In your css, you are styling all <a> tags and #noteaddbutton, but the <a> style is after the style just for the ID. Since the ID style is before the <a> style, the <a> style takes precedence.
You can fix this by doing two things...
1.) Putting the ID styles below the <a> styles:
a:link{
font-size:18px;
text-decoration:none;
}
#noteaddbutton{
font-size:13px;
}
2.) Putting !important after the font-size attribute on the ID style
#noteaddbutton{
font-size:13px !important;
}
You can put #2 anywhere you like.
Try making the class !important allowing it to take precedence:
a:link{
font-size:18px !important;
text-decoration:none;
}
It works for me, by example in this fiddle: http://jsfiddle.net/GFnK7/2/
First link is 13px and on yellow background for me (Fx9, WinXP).
The 2nd link has a dummy destination that you shouldn't have visited for now. I see it on lightgreen bg, 18px and then after a click on violet bg, if and only if layout.css.visited_links_enabled is set to true in about:config.
The 3rd link is identical to the 2nd one.
The pseudo-class :link applies to un-visited links. With a value of # for href, you'll soon have visited this URL ;) (after one click on any href="#" link)
Note: a selector with an id should be more specific than another selector with only a pseudo-class and an element (:link with a). This is (1,0,0) against (0,1,1) in terms of selector specificity.
Related
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
I have this code:
<div id="NAHC-topText">
<h2>Link To Somewhere</h2>
</div>
I want to have CSS remove the underline and change the hover colour as the user rolls over the link. The link loads simple html.
I don't see to be able to implement this in the div tag successfully.
Any clues?
Thanks
So just set the appropriate values in CSS.
a {
text-decoration: none;
}
a:hover {
color: red;
}
Depending on your actual need, you may want to change the selector to #NAHC-topText a instead of just a.
In adittion to Sirko's answer , if you want to affect only
<a>
within Yours
<div id="NAHC-topText"> <h2>
Your stylesheet should look like this , in order to exclude any other anchors and headers.
#NAHC-topText h2 a {text-decoration:none;}
#NAHC-topText h2 a:hover {color:red;}
But of course there is nothing wrong with Sirko's answer , only it would affect all Your Anchors within the particular document.
Also if You want the underline only to display upon hover , you simply define
a {text-decoration:none;}
a:hover {text-decoration:underline;color:red;}
with the particular selector of Your choice
now that i red Your question again , this applies vice versa for the opposite situation
when You want it first underlined , and upon hover without underline , you simply swap the condition for each situation.
<style>
#NAHC-topText a{text-decoration:none;}
#NAHC-topText a:hover{color:red;}
</style>
#NAHC-topText a:hover{
color: red;
text-decoration:none;
}
Why is it that the links on this page (and all others but best to demo) sharing the link style accross all pages. To demo this click on Portfolio then go back, you will see the link text turns white, even though this should only be for the "message" element (blue with rounder corners) at the bottom of the page?
This is my CSS
.message {
background-color:#54a0d9;
border:1px solid #54a0d9;
color:#fff;
}
.message h2 {
font-size:22px;
color:#fff;
}
.message a:link, a:visited, a:hover, a:active {
color:#fff; }
and HTML is a normal link inside an element (which is not a child of the message element.
Surely that should only apply to the Message elements?
I've done some research on whats causing this but so far nout...
Separating selectors by commas means to consider them completely separately. So here:
.message a:link, a:visited
Means to apply this style to a:links inside of elements with a class of "message", and also to a:visiteds. Note that the latter does not have to be inside of an element of class message. Simply put .message in front of each comma-separated term to fix it.
Hello I'm having some issues with CSS on my blog. My Wordpress theme has a post styles section in the CSS file which have a class "Entry" in which "a" attribute is defined for the links inside the article area.
I generated a button from css generator and inserted the button in an article that is pointing to some other website using href. My CSS file has something like this,
.Entry a{color:black;text-decoration:underline};
.button {background:black;color:white And some other Styling};
I used this code to display the button.
Go to this link
Without the use of class="button", the link follow the Entry a property. But when I use class with it, it display the button with the mixture of Entry a and class button styles. I don't want the button to use Entry a properties. Any help?
You could rewrite the first rule using the CSS3 :not pseudo-class selector as
.Entry a:not(.button) {color:black;text-decoration:underline}
This will do what you need, but it's not supported by IE versions earlier than 9.
A true cross-browser solution is more involved: you would need to "undo" the attributes that .Entry a applies in your .button rule. For example:
.Entry a {color:black;text-decoration:underline}
.button {color:white;text-decoration:none;background:black}
Update: I forgot something quite important.
If you do go the "undo" route you will need to make sure that the "undoing" selector has specificity at least equal to that of the first selector. I recommend reading the linked page (it's not long) to get to grips with the concept; in this specific case to achieve this you have to write a.button instead of simply .button.
For avoid .Entry a CSS styles to be applied at when you use the selector .button you should overwritte with the selector .button all the properties defined in .Entry a
For example:
.Entry a{color:black;text-decoration:underline};
.button {color:white;text-decoration:none;background:black;color:white And some other Styling};
This happens because .Entry a has a higher specificity than .button. The result is that your element receives its actual background property from .button but its color and text-decoration properties come from .Entry a.
There are a few ways to "fix" this:
Increase the specificity of the .button selector.For example, if you only use .button on a tags, you could change the selector to a.button. This new selector would have the same specificity as .Entry a (one tag value and one class value), so the "winner" is decided by the source order. If a.button comes after .Entry a in the CSS file, a.button takes the upperhand.
Decrease the specificity of the .Entry a selector.Do you really need to target only a tags inside .Entry elements? Can you get away with simply making it a base style for all a tags? If you can, you can simply change .Entry a to a. This new selector has only one tag value, which is less specific than the one class value in .button.
Define extra selectors on .button.For example, you could use .button, a.button so that the second selector takes over where the first selector fails. Be warned that this could get very messy when you encounter this same problem with other tags such as input or button tags.
Use !important.Never do this, as you'll get yourself in trouble if you ever try to make a .big-button class which needs to override some .button styles.
If you want to learn more about specificity, here's a good article about what it is and how it's calculated.
Well in CSS3 you could do this:
.Entry a:not(.button)
That will restrict your .Entry a rule from affecting any elements with .button.
If CSS3 is not an option (i.e. you need to support IE <= 8) you'll need to overwrite whichever inadvertent styles are being inherited. So for example if your button is ending up with an unwanted border from .Entry a, overwrite this in your .button rule, e.g.
.button { border: none; /* more button styles */ }
You could overwrite any styles in .button class that are defined in .Entry a
E.g. if you dont want your text to be underlined you could use text-decoration: none
.Entry a{
color: black;
text-decoration: underline;
}
a.button {
background: black;
color: white;
text-decoration: none;
/*And some other Styling*/
}
Also don't use semicolons after braces }; in your css. simply use a brace to close }
The simplest thing would be to "undo" the specific styles that your element inherits from the styles for .Entry a. For example, to undo the text-decoration style, you could use text-decoration:none.
If you only need it to work for newer browsers, then you could use the not() selector #Jon has mentioned.
Here's a screenshot of the problem:
Notice that we're on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:
#nav {
border-top:10px solid #A7C1D1;
height:45px;
padding-left:100px;
padding-top:20px;
margin-left:0;
color:#000;
}
#nav a {
color:#000;
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#nav a:hover {
color:#93AFBF;
}
#nav .active {
color:#93AFBF;
}
Before, I had the CSS for #nav .active to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue.
Here is the HTML rendered for the page:
<div id="nav">
home · stalk · link3 · link4
</div>
If I take away the CSS for #nav a:visited then the CSS for #nav .active works, but now the visited links are blue when I want them to stay black.
Use
#nav a.active {
color:#93AFBF;
}
The #nav a:visited has higher specificity w3 specs than #nav .active and thus gets applied.
Try
#nav a.active
{
color: #93afbf
}
That should do it.
try:
#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}
You are confusing the active pseudo class
Site Point Refrence
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Similar Problem
Border property is not inherited while color property it is. So you inherit the color property for your link from the #nav, while the border property was the one declared in the "active" class rules. You should declare the color property for the link with the "active" class as suggested by Gaby
Tonight I found an unusual one. (A link color that I couldn't change.) I went into the inspector and first found the text-decoration-color property set. But no, that would be too easy. I scroll down to color and find this :not selector, which a theme author created. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:
#the-post .entry-content a:not(.shortc-button) {
color: white !important;
}
My suggestion is to go into your inspector (F12) and find the "Computed" tab and look where the colors are coming from. Usually it's straightforward where the color is coming from, and the inspector will even tell you which file and which line number set the color. Then the decision is, do you have access/permission to that file? Or maybe you have access, but do you necessarily want access to that file?
If you want to avoid changing the source of the color, for whatever reason, you can just re-declare the color again further down the page, like in your footer, or immediately after the theme is loaded, whatever the case may be. Of course given the option, it's usually preferable to find the root of the problem and then you end up using less CSS code which loads faster and is easier to maintain.