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;
}
Related
Background: I am trying to fix two annoyances in the appearance of the audio element in Chrome and while attempting to do so I came across two issues I would like to understand better. This is about Chrome 89 on MacOS. I nicely manage to style inside the audio element, using pseudo selectors. Finding out about the names of the pseudo selectors works nicely when looking inside of the shadow dom with the dom inspector. For example, the following two rules work exactly as expected:
::-webkit-media-controls-timeline {background-color:pink;}
audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;}
Question: However, two things do not work as expected and I want to understand why.
Problem 1: Styling the first letter in the remaining-display div does not work. The following rule is not effective.
audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}
This is astonishing, since the browser dispplays this
<style>div:first-letter {color:red;}</style> ... <div>e xample</div>
as expected. Why would I be unable to style the first letter? (The idea of this is to get rid of the most annoying leading / symbol in the remaining time display).
Problem 2:
Why would I be unable to style an element with a different pseudo attribute in a different part of the shadow DOM. More precisely the following rule is not effective:
::-internal-track-segment-highlight-before {background-color: blue;}
I see no difference to the other case above where the color styling worked. (The idea of this is to increase the too small contrast between two parts of the track segment.)
Add on: I managed to improved the contrast a bit using
audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}
but the issue remains why the one method worked and the other did not work.
You are using Chrome, with "Show user agent shadow DOM" turned on
There are 2 types of shadowDOM
let's call it "userland" shadowDOM,
the (open or closed) shadowDOM created by a (3rd party developer) Custom Element/Web Component
This type is available since the W3C Web Components standard was implemented
"user-agent" shadowDOM created by each Browser (Vendor),
implementing input , audio , video, select etc. tags
but each Browser can have a different implementation.
This shadowDOM content can only be accessed if the Browser vendor has enabled access. (with shadowParts or related tech)
And in general it can not be accessed.
WebKit does have some pseudo selectors to change some settings
See: Is it possible to style html5 audio tag?
But they are not CSS selectors that get you full access to shadowDOM by creating complex selectors.
Some Font and Styling settings do cascade into shadowDOM only to have a consistent style in the whole page.
See: https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
So that is why your color:red works, and :first-letter doesn't
That is why filter works; and background-color doesn't
alternative
https://github.com/dascritch/cpu-audio is a decent Web Component replacing the standard <audio> tag, that gets you styling in all browsers
Note the notation: (open) not (user-agent)
video::-webkit-media-controls-timeline {
background-color: blue !important;
}
work better for highter contrast.
(tested in video tag)
I tried to solve this but I'm still blocked on an error like this lol.
I don't understand why my CSS does not apply to my HTML elements.
a{
text-decoration: none;
}
.test{
text-decoration: none;
}
<a href="#" class="test">
<div id="blue-card" class="card h-150">
<div class="card-body">
<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
<p class="sub-info-card">Utilisateurs actifs</p>
</div>
</div>
</a>
I first tried with only the balise in CSS and after it doesn't work I tried with the "test" class. But it still doesn't work.
The other CSS of my page work. It is only on my balise ..
if anyone have an idea on how to solve my problem pls!
Thanks,
So, the behavior you experience is that defining CSS rules separately, based on the tag name or class name are not applied, yet, if you specify your CSS as an attribute value, then it's applied. Let's think together:
Rule by tagname
a{
text-decoration: none;
}
You reasonably expect this rule to be applied on the anchor, but it's not the case. This evidently means that some other CSS rule (or Javascript) overrides it. Browser Dev Tools can aid you, just right-click anywhere on your page and click on Inspect (or a similar choice). Inside the Dev Tools panel you should see an Elements tab, which shows the HTML and clicking on elements you should see CSS rules on the right-hand side, like on the picture below:
So, I advise you to click on the anchor where you expect your rule to be applied and see what CSS applies there. The rule that you intend to specify here will appear striked through, because something with higher priority overrides it (another case is that a rule with similar prio level is evaluated later and overrides this one). You should be able to see which text-decoration rule is applied and you can gently hover on that rule and click on its checkbox to disable it for now. This will enable the rule applying on this attribute with the second priority level in the hierarchy and so on. This process is not yet a solution, it's exploring the problem. After this exploration you will know what the problem is.
Rule by class
.test{
text-decoration: none;
}
The situation is either similar with the one described in the previous section (rule override due to higher priority or similar priority but later in the code), or, it's possible that for some reason the test class is removed from the tag. So, in the Elements tab of the browser console you will see whether that element still has the class. If not, then experiment by editing the tag and writing that class into it and see whether your rule applies or not. If the tag has the class, but the rule does not apply, then we have a similar issue as the one described in the previous section.
Solution
The best solution is to find out what the problem is, why are there other rules applied on this element and act accordingly. For now, you can apply a rule like
a.test#test {
text-decoration: none;
}
and of course add test as an id to your tag, as below:
<a href="#" class="test" id="test">
and if this still doesn't work, then there is a high chance that the other rule which causes you trouble has !important. If that's the case, then try removing the other rule. If that's not an option, then look at what the selector of the other rule is and make sure that the selector of your tag contradicts it.
It wasn't immediately clear from your initial post exactly what display problem was occurring. But in your comments you indicated an undesired text decoration is showing up, presumably in one of the html elements. Your initial post appears to show your initial efforts to correct the undesired decoration by re-defining the a element's css in your style.css sheet, which is intended to override the bootstrap css.
But your problem really appears to be related to which css is most specific to the element being displayed. The closer a style is to an element, the more precedence it has.
Each of the html elements within your a element have classes applied to them "card h-150","card-body","info-card","sub-info-card". That's a lot of classes to sort through.
<a href="#" class="test">
<div id="blue-card" class="card h-150">
<div class="card-body">
<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
<p class="sub-info-card">Utilisateurs actifs</p>
</div>
</div>
</a>
How those classes interact will take precedence over your a definition because they are more specific, in other words, closer to the element.
Trying to correct the problem by redefining the a element with an override like text-decoration: none!important will certainly work, but it is not good practice (see first answer here). You should look closely at what the invoked classes in your html elements do. If those classes aren't what you need, use a different class, or this could be a good opportunity for you to write your own custom class in the style.css. However, writing your own class if you're just beginning to get familiar with css may prove challenging. Probably better to find the class you really want from within bootstrap. That's the value of bootstrap.
To answer your original question which is basically why doesn't your css apply to your html elements, it's because a class is applied on the element and that takes precedence. CSS is tricky with specificity and it's hard to learn at first. See some of the answers in this post, and also this link mentioned in that same post.
Try accessing the 'link' attribute of the anchor tag as below and setting the value as none, also add !important to it, this worked for me.
a:link {
text-decoration: none!important;
}
I am developing a simple page with a form.
When I put a input text in the page, the characters that appear inside the input element have the browser default values, in chrome using the developers tools I can see that the font defaults to "webkit-small-control". But one of the fields that will appear in the page will be just a span field with data like this
<td>
<span id="readOnlyField">data</span>
</td>
When I render the page the data inside the span field is not equal to the data inside the input text field. My question is, how can I know the fonts and colors that the browser is applying to the input text field ? I can not use the value "webkit-small-control" because will not work in another browser.
I have only noticed this in Safari on a Mac. In order to make everything display the content as expected you need to override Safaris user agent stylesheet:
font: -webkit-small-control;
can be overridden using this in your reset.css:
button, input, textarea, select, isindex, datagrid {
font: inherit;
}
I cannot seem to find this in any reset.css but it done the trick for me.
In general, you can't know those values, because the defaults vary across browsers. Also, a user can set things like the default font family and style and hyperlink colors.
It is a good practice to use a "CSS reset" stylesheet to override browser defaults with your own "base" styles. There are lots of CSS reset examples on the web, for example the HTML5 Doctor's one or Eric Meyer's one. While your question is only about font style, resetting also other styles prevents many headaches in the long run.
There is no way to know for sure what default font-size the browser will choose.
You should instead reset the CSS (with Normalize for example) and further style your pages, for example:
span.some-class {
font-size: 12px;
color: #333;
}
And then your HTML:
<span class="some-class" id="readOnlyField">data</span>
that is the reason you should reset all the styles at first or use some established css framework like blueprint and avoid reinventing the wheel.
You should probably be overriding any style that you want in your css to aovid browser defaults
The default color for all major browsers for fonts is #000 but you can set it to whatever you want. The font you can set to whatever you want as long as it's on the system viewing it. Those defaults can be found by Googling.
There’s no known way you could find out, on your page, which font the browser uses by default. Neither can you specify in CSS that the browser render a span element using whatever font it uses by default for an input element.
But you can make text in span and input elements look the same (with the usual CSS Caveats, of course) by explicitly setting their font-family and font-size, e.g.
input, span { font: 100% Arial, sans-serif; }
In theory, you might need to set other properties too (there is no law against a browser displaying input element contents in blinking purple underlined by default), but this should take care of things in practice. Note that font size setting is needed, because browsers generally use reduced font size (about 90%) for input boxes.
If you are willing to use javascript, you can use getComputedStyle to find this data (check out Mozilla Developer Network).
For old IE browsers, you would need to use the currentStyle property (check out Quirksmode).
To copy ALL styles from one element to another, you could do something like this (I have simplified this to support modern browsers only):
var spanElement = document.querySelector('#mySpanElement');
var inputElement = document.querySelector('#myInputElement');
var styles = getComputedStyle(inputElement);
for (var name in styles) {
spanElement.style[name] = styles[name];
}
You will probably find you want to filter them, or only take a few ones you really want.
It is a behavior of WebKit.
See https://bugs.webkit.org/show_bug.cgi?id=50092
For a solution see: http://sijobling.com/tips/css-fix-for-html5-search-in-webkit/
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.
Recently when coding and HTML email, I noticed that Yahoo! started hijacking certain links and keywords, adding a <span class='yshortcuts'> which changes the colors of the text and links, which can cause some pretty bad rendering problems.
The 'fix' that Yahoo! suggested is pretty ugly (adding a span within all of the links and keywords that are affected) - far from an easy universal solution, especially when they apply the style to seemingly arbitrary text.
I am wondering if it is possible to simply over ride their class, and some how, with css, remove the color attribute. (While <style> blocks aren't supported in all major email platforms, Yahoo! does...and the ones that don't support it, gracefully ignore it.)
Something like
<style>
.yshortcuts{color:none;}
</style>
I know that color:none; isn't valid, and doesn't work universally.
Any Ideas?
After digging and slogging it seems this is the best way to handle the problem (to my mind).
At top of the email, add this style block. This will fix most of the problems in most browsers.
<style>
.yshortcuts{color:inherit;}
</style>
Since we want IE people to be happy too, insert a span, with a color style, inside each <a> that is causing problems. E.g.:
<span style="#c912dc">Google</span>
This should, fix it in almost all situations.
Since this can be a pain to do by hand if you have a file already coded, you can do a regex find/replace and it should help speed things up (but your mileage may vary...works in Textmate):
Find:
(<a[^>]*style=".*color:#(\w{6}).*".*>)(.+)(</a>)
Replace:
$1<span style="color:#$2;">$3</span>$4
You could try
.yshortcuts { color: auto !important }
I don't know what this will fall back to, though - the browser's default colour, or the next colour definition in the cascade. It will depend on the other CSS rules present.
If that doesn't work, I think you'll have to override it with a defined, new colour.
You can override color by more specific selector in CSS
body #content .yshortcuts{color:inherit;}
To work cross browser, you could add some definitions to your css to keep the color your definition. For example, let's say you have this in your css:
p {color: black}
a {color: blue}
Now, I'm not sure if your .yshortcuts is wrapping the a tags or is positioned inside the a tags, but for purposes of my illustration, I'm going to assume they wrap around the a, so a solution would be to change your css to:
p, p .yshortcuts {color: black}
a, .yshortcuts a {color: blue}
Basically, you would have to do this everywhere that color is defined in your css (assuming that Yahoo! could do this to any text). This is not as elegant as the other solutions given, but should work for IE6.
Unfortunately, I have found that to get reliable styling across most email clients, inline styles are the only way to go. Some strip any styles declared in the head, some add their own classes, some add random extra elements - but by giving every element its own inline style - along with some just wonderful tables - I've gotten it to render consistently in every major client - Gmail, Outlook, Hotmail, Yahoo, etc.
This article is pretty useful for seeing who supports what and where:
http://www.campaignmonitor.com/css/