I have a question regarding html color code.
<font color=rgb(255,0,0)> This is my font </font>
not showing red color fonts in firefox though the color code is fine. Any idea? Instead it is showing some weird green gray color!
Thanks
Try with "style".
<font style="color: rgb(255,0,0)"> This is my font </font>
The syntax rgb(255,0,0) is not HTML and you are encountering error recovery. It is defined in the CSS colors spec. You can only use it in CSS.
Aside from that, the color attribute and the rest of the <font> element have been removed from HTML.
Use a stylesheet and a semantically appropriate element.
p {
color: rgb(255, 0, 0);
}
<p>This is my font</p>
I think something has to be added to this. You shouldn't use the HTML <font> tag. It's deprecated, it's not supported by HTML5 and it has a weird behavior such as the one already displayed when you tried to go rgb(255,0,0) and the browser painted your font dark green.
Go with any of the text tags such as <span>, or <p> or whatever. And for the color, use the style attribute:
<span style="color:rgb(255,0,0);">This is my font</span>
Docs regarding <font> http://www.w3schools.com/html/html_styles.asp
The color attribute only supports named and hexadecimal colors. To achieve the same affect using semantic HTML you can use the ID attribute on a span element and then use CSS to style it:
#warning {
color: rgb(255, 0, 0);
}
<span id="warning">This is my font</span>
The reason it is displayed as the weird color is because of the same reason "chucknorris" produces a red-brownish color.
The <font> tag is obsolete, and the color attribute may not work completely in most recent browsers as it's deprecated, although it still works when using the hex color codes and the name of the color.
HTML should be used for describing the structure of web pages.
For styling your web page, you should use CSS. In your case, you could do something like:
<span style="color: rgb(255,0,0)">Hello World</span>
From W3C:
The <font> element is a non-standard element.
HTML5 classifies it as a non-conforming feature.
From MDN:
Do not use this element! Though once normalized in HTML 3.2, it was
deprecated in HTML 4.01, at the same time as all elements related to
styling only, then obsoleted in HTML5.
Starting with HTML 4, HTML does not convey styling information anymore
(outside the <style> element or the style attribute of each element).
For any new web development, styling should be written using CSS only.
The former behavior of the <font> element can be achieved, and even
better controlled using the CSS Fonts CSS properties.
Sources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
https://www.w3.org/wiki/HTML/Elements/font
https://www.w3.org/TR/html5/obsolete.html#non-conforming-features
https://www.w3.org/standards/webdesign/htmlcss
Related
<span style="color: #21584b;"><p>Text</p></span>
That's an example of some code I have in my website. The colour is a dark green and it displays normally on my PC as well as on my Android phone. But, when viewed on an iPhone or an iMac the text is within the <p> tag appears white. I don't have any CSS in the stylesheet targeting just a <p> or a <span>. All of the CSS in the stylesheet has an additional class or an id.
I've removed the <span> tags wrapping the <p> one, but I have no way of testing it since I don't own any Apple devices myself.
So, the question is, will elements inherit inline CSS, like I've put here if they don't have any classes or ids overriding them?
Do it the other way round (span inside p), that's valid HTML and will overrule any previous properties for p:
<p><span style="color: #21584b;">Text</span></p>
Yes. If the value of a property is inherit then it will copy the value from the parent element regardless of how it was applied to the parent element.
That said, a <p> may not be a child element of a <span> element. The differences you are experiencing are likely due to different browsers recovering from your invalid HTML in different ways.
Sorry for the retro question, but I have to add two highlighted paragraphs of text (just a kind of "oldness warning") to a VERY old website (HTML4), and I can't seem to find out how to set text color and size as inline attributes in HTML4.
I tried all kind of attributes in the pand h2 tags (like <p color="#ff0000">also "text, "text-color" and others, but none of them worked.
I know all this for today's standards, but this is in HTML4. Is anyone old enough to remember? ;-)
The style attribute was introduced in HTML 4, so you can use inline CSS.
style="color: #ff0000"
There is no, and never has been, a presentation attribute specifically for setting the foreground colour of a paragraph element. That was the job of the font element.
This can be done in two ways:
The HTML4 font tag.
The CSS font-size and font-color properties.
1. The HTML4 font tag:
<p><font size="12" color="#ff0000">hello world</font></p>
2. The CSS font-size and font-color properties:
p {
font-size: 180%;
color: #ff0000;
}
<p>hello world</p>
Hope I could help
Please check this out.
<p style="color:#ff0000; font-size:12px;">
you can check by reducing font site or can write like this for forcefully apply style in html element:
<p style="color:#ff0000; font-size:12px !important;">
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'd like to style some SVG sprites using an external stylesheet, as detailed in this Sitepoint tutorial and W3C's Styling with SVG.
However, the CSS isn't very, er, standard:
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
as it doesn't validate with the W3C CSS Validator.
What gives?
To validate SVG using the W3C CSS Validator, under "More Options" change the profile to SVG
Is CSS for SVG “standard” CSS?
No, it is not. It makes use of the CSS language, but it is not in the CSS property specification. It's only part of the SVG specification. It's quite similar to using non-standard vendor extensions, in that while prefixes are defined in the CSS grammar, prefixed properties don't actually validate as CSS solely because they're non-standard.
You're supposed to choose the SVG validation profile when validating your code, but it doesn't appear to work; it spits just as many errors as validating according to the CSS spec would. In that case, then it's probably a validator bug.
Some properties are standard CSS e.g. display, and some aren't; they apply only to SVG content e.g. fill. They're all listed here.
I don't think there's an easy to digest list of which is which but if you click on an individual property such as display in the SVG specification property list (display happens to be a standard CSS property) then you get this text in the SVG standard at the end of the definition:
Except for any additional information provided in this specification, the normative definition of the ‘display’ property is the CSS2 definition ([CSS2], section 9.2.6).
Is it possible to use the noscript element in CSS selectors?
noscript p {
font-weight: bold;
}
Yes! You can definitely do that.
In fact, many (all?) browsers support targeting any arbitrary tag using CSS. "Official" tags in the HTML spec only define what a browser should do with them. But CSS is a language that targets any flavor of XML, so you can say foo {font-weight:bold;} and in most browsers, <foo> hello world </foo> will come out bold.
As Darko Z clarifies, IE6/7 do not add arbitrary (non-standard) elements to the DOM automatically from the source; they have to be programmatically added.
I have an IE bug to keep in mind. If, like OP, you just want to style text within the noscript tag and not the noscript tag itself, please disregard this..
Say you want to make the noscript tag's background red. In IE8, it will show up with JS enabled. Just the box itself, not the text inside.
So this combination isn't good:
CSS
noscript {
background-color: red;
}
HTML
<noscript>Turn on your damned JavaScript! What is this, 1999?</noscript>
But this workaround works fine:
CSS
noscript div {
background-color: red;
}
HTML
<noscript><div>Turn on your damned JavaScript! What is this, 1999?</div></noscript>
Weirdly, I only see this behavior in IE8, not IE7. And who knows about 6..
In addition to Rex M's answer - IE 6/7 (6 def, 7 maybe?) will not style an arbitrary tag for you. But lucky for you as with all many IE problems there's a workaround.
Say you want to style an element called foo. To get IE to recognise it as a styleable element you need to include this line somewhere in your JS:
document.createElement('foo');
You don't need to append it, just create it.
This will kick IE into styling that element for you with the CSS rule:
foo { font-weight:bold; }