After years of using the <a> tag I've never found an answer to a long-asked question.
To crack down on the stylings of a <a> tag I usually apply four styles:
.element:link{text-decoration:none;color:#CCC;}
.element:hover{text-decoration:none;color:#CCC;}
.element:active{text-decoration:none;color:#CCC;}
.element:visited{text-decoration:none;color:#CCC;}
Because as most of you probably know, browsers tend to apply a default underline and royal blue colour to links.
When I say What is the bare minimum styling for a element is there a way I don't have to apply all of these styles? Will the :hover, :active and :visited inherit the :link style? and is it compatible across all browsers?
P.S.
I know that the above is the same as
.element:link, .element:hover, .element:active, .element:visited{text-decoration:none;color:#CCC;}
So please don't answer with that (:
The bare minimum is no styling at all -- so that the browser will automatically apply its default styles.
The usual default is indeed royal blue for link, red or purple for visited, and nothing in particular for the rest.
Answered because #Rob said I should put it here
a.element{}
or
.element {}
You just use
.element {text-decoration:none;color:#CCC;}
and that's it.
If you want to additionally style :hover or :active state, you do it after .element {}
If you want it to apply to all your links, you can use
a {text-decoration:none;color:#CCC;}
Related
So basicly what is happening is that:
I have and H3 tag, inside I have a Style tag, which contain multiple properties:
The H3 tag is the one im having problems
As for syntax, its ok, but it still doesnt cahnge the color of the h3.
Please help!
i think other classes from your css applied , so what you need to do is either you need to remove that class or Simply Write
<h3 style="color: black !important;">Any text</h3>
but !important is highly not recommended . for better practice make it class base.
If you inspect the particular Tag (i.e. h3), you should be able to see that the current property of color which you are applying is getting overridden.
To overcome this issue, you can do two things:
Improve the Code Specificity
use !important next to the property as follows:
<h3 style="color: black !important"> Header 3 </h3>
Note: It is never recommended to use !important
Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
MDN Docs
The title says most of it. Is there a CSS keyword which overrides !important at one higher level or is there some feature like this planned in any newer CSS spec?
Of course, I know that !important is a bit likely to be used by noobs and that in many cases it is not the best way to go as stylesheets may really suck if badly written. However, sometimes it's useful and even needed.
The strongest style in CSS I can think of is an inline style with !important like this:
<span id="bluebeaver" style="color: red !important;">I am a happy blue beaver</span>
Now let's assume that I cannot edit the HTML and must modify the style from an external stylesheet.
It would be really great to have something like:
#bluebeaver {
color: blue !important 2;
}
If they had levels for it like for instance with z-index.
Is there any solution to this or anything planned with newer CSS specifications?
So far I did not find anything.
Can you show a CSS solution to override an !important inline style or is there definitely no possibility?
Simply remove the style attribute from the element using JavaScript:
document.getElementById("bluebeaver").removeAttribute('style');
Then use your external stylesheet to apply whatever CSS you want.
Two reasons why creating higher levels of !important is not a good idea:
It sets a bad precedent.
Adding !important2 would be caving in to poor-coding habits on a global scale. It would be the W3C sending a signal that anything goes.
You've also opened the door to !important3, !important4, etc. Where does it end?
Lowering standards and expectations is not a good way for the industry to make progress.
It may not even solve your problem.
Consider this: The person who set that inline style to color: red !important, obviously wanted that rule to have the highest priority.
If your idea became real, and there were higher levels of !important, let's say going up to !important10, guess what that person would have used? And you'd still have the same problem, but you'd be here asking if there were any plans for !important11.
No, there is no keyword or other way to make a declaration more important than !important. There is no known activity to change this.
In general, it is possible to override a declaration that has !important by using a rule that also has it and that has higher specificity. However, a declaration in a style attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important.
There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style attribute.
The highest order I know of is targeting elements that have inline styles applied. You can actually select the element's style data attribute in the CSS selector to override its style! Check this out:
.blue[style]{
color:blue !important;
}
<div class="blue" style="color:red;">SO VERY IMPORTANT</div>
Of course you can even get more specific by targeting the style specifically, such as .blue[style="color:red;"].
You can modify the colour of HTML element using javascript.
document.getElementById('bluebeaver').style.color=blue;
Demo : https://jsfiddle.net/041fhz07/
Try Specificity: If two selectors apply to the same element, the one with higher specificity wins.
Try to style your element the more specific you can. Maybe use:
#bluebeaver span {}
Take a look to this link: CSS Specificity: Things You Should Know
if you want to use CSS only you just declare the new style with !important, the last "important" wins. though I'd avoid using it in the first place unless completely necessary.
it should only be used for styles that are essential for your page/app to work, not things that are expected to change.
another solution is to use JS to remove and/or add classes/id to change the style of the element when you don't want to change the CSS itself.
div.prop1.imp1.imp2 {
background-color: red !important;
}
div.prop1 {
background-color: black;
}
div.prop1.imp1 {
background-color: white !important;
}
If you can't do this since not all elements have the .imp1 class on the list in JavaScript, and you are adding say a highlight on something with a button click (.imp2) . You can specify the 'more important' .imp2 class above the others with !important on it.
This makes the property with the additional imp2 class more important than the .prop1.imp1 style because it is loaded first in the css.
Here is my code:
.blue {
color:#6E99E1;
font-size:9px;
}
<span class="blue">::CLICK HERE:: to view our New Equipment inventory. <br /><br /></span>
I've somehow triggered something that prevented the <a> tag from inheriting color of parent <span>.
Just an addendum to the other responses, if you want your <a> tags to inherit the colour from their parent you can use
a {color: inherit; }
By default an anchor tag does not inherit attributes like color if an href attribute is present.
Check out the difference between these two on a page:
<span style=color:green>test</span>
<span style=color:green><a>test</a></span>
The following link is to the w3 c:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in
such a way as to make them obvious to
users (underlining, reverse video,
etc.). The exact rendering depends on
the user agent. Rendering may vary
according to whether the user has
already visited the link or not.
.....
Usually, the contents of A are not
rendered in any special way when A
defines an anchor only.
This is an answer to the question as well as a reply to Kevin's answer and its comments.
Anchor tags do inherit color, linked or not. The only reason they don't in practice is because they already have their color set in the browser's default stylesheet. The same can be said for the underlining of the link (which, I presume, you didn't notice, because you actually want it or had already changed it yourself).
In Firefox, you can see this in Firebug if you toggle "Show User Agent CSS" (or you can have a look at Firefox's internal stylesheets directly. You can see the browser's defaults in Webkit's Web Inspector and Opera's Dragonfly as well. I don't think you can in IE.
I don't know of any site which has an overview of all browser's defaults. CSS2's "informative" HTML4 stylesheet as well as the YUI reset stylesheet would be a good starting point, but neither of them mention any (link) colors (the HTML4 stylesheet does mention the underline).
To find out which properties are inherited in general, you can use the CSS2 reference property index table (see the "Inherited?" column). SitePoint also mentions it in its CSS reference.
So if you want to make sure your link inherits its color from its parent instead of from the browser's default stylesheet, you would ideally do something like this:
.blue a:link {
color: inherit;
}
You could set it for the different pseudo-classes separately (so :visited, :hover and :active as well), or for the a tag altogether.
However, IE6 and IE7 don't support the inherit keyword, so if you want to support them too, you'd have to set the color explicitly.
I think a doesn't inherit color by default. (certainly it has always worked that way on my sites). Why not change
.blue {
color:#6E99E1;
font-size:9px;
}
to
.blue, .blue a{
color:#6E99E1;
font-size:9px;
}
Firebug will show you exactly which style rules are applied to which elements. It's perfect for this.
(A non-CSS possibility: Do you have link/alink/vlink attributes on your <body> tag?)
Edit: Duh, silly me, the others have it right - <a href> doesn't inherit colour. But Firebug is still a good tool for this kind of problem (even if I'm not. 8-)
In addition to firebug (which should be your first port of call), the IE developer toolbar will also tell you where a given style is sourced from, just in case IE - shock, horror - should be different.
You need to explicitly set the color of the links to override the default blue color.
You are likely seeing the a:visited colouring. Try this:
.blue, .blue:link, .blue:visited {
color:#6E99E1;
font-size:9px;
}
I am currently restyling a website, but part of the site takes a string from the CMS and puts it into a description area. The description often has its on HTML, such as bullet points.
The problem is the designs we received also use bullet points to style certain aspects, which make everything within this description area styled entirely incorrectly (tiny width for ULs, background applied to H2, etc).
Is there any kind of tag that will reset the styling of everything within it?
Thanks in advance.
Edit: I've gone for this solution, which works when I apply the class 'CMSReset'. It resets the main offenders, thanks for the help:
div.CMSReset, div.CMSReset *
{
margin:0pt !important;
padding:0pt !important;
vertical-align:baseline !important;
width:auto !important;
background:none;
color:inherit;
}
short and simple: no, you'll have to reset the stylings taht need to be reseted on your own.
a workaround would be to use an iframe wich would prevent the inner content against inherited styles, but that solution is even worse in my opinion.
this other topics might also be interesting for you:
reset multiple css styles for one single div element
how to not inherit? or how to reset inherited width to the value before? (css)
Generally, people override CSS Styles in 2 ways:
1) They define an inline style on the attribute itself so:
<div style="background-color:#FFFFFF"></div>
Would override any other style.
You can also apply a style via an id (#IdName) which will have precedence
2) They redefine the style at that level of the document. You can use the !important css modifier (but this isn't universally supported).
If you've blanket applied styles, like div or body > div then these can be difficult to override and often require restructuring, or rethinking, your styles and classes.
So instead doing it using css:
<style type="text/css">
a:visited {
color: red;
}
</style>
Could it be done using inline code. Something like this doesn't work:
<a href="http://google.com" style='a:visited:color:red'>Google.com</a>
You can't do this, the specification (CSS2 here) covers it briefly here:
Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.
:visited along with the others modifiers are all pseudo-classes, and there was never a standard syntax setup to do what you're trying. Honestly this is the first time I've ever seen it requested, so I don't think it'll be added to the specification anytime soon...sorry that answer sucks, but it is what it is :)
Just to add one motivation to achieve this inline style for the various a href states:
in some page it could appear text with link in one are where the background is different from the overall background.
The main CSS for the "a" gives them one color that is not good on that particular and singular area.
For this reason, to give the user the idea that the link is a link, you need to color that link differently from the others.
For me it worked to set some style="color: #5070BB;" inside the <a href=".." tag, but maybe that neither the a:visited nor the a:hover colors are good for that background and it would be useful to set them inline.
Yes, it is definitely a singular and lonely situation, but that is a real case.
Ciao!
Sure you can....
<a href="https://www.yahoo.com/" target="_blank"style="text-decoration: none; border-bottom: 1px solid pink;color:pink !important;">
some link
</a>
jfiddle
No, that's not how inline styles work. It is in the specification, however browsers don't seem to support it.
No. Pseduoclasses (e.g :first-child, :hover) are used as selectors based on behavior and relation to other DOM elements. Inline styles contain rules. Even if at some point browsers do support this, it'll feel weird.
As far as I know, it isn't supported ... but to add some clarification for the reason for wanting to do this, since it would definitely be the sub-optimal way to do it on a regular web page, the reason would be to use in HTML email, which, except for certain good email clients, does not support regular style sheets, so it's necessary to define all styles inline to ensure good support across email clients (Gmail and Outlook (ugh) come to mind.)
Of course, it's possible to use some other program that lets you import a stylesheet and automatically convert it to inline styles, which is much easier to manage (that's what I do), but you're still using inline styles in the end-analysis.