I have an issue in an ExtJS-based application, however, I don't believe the problem to be ExtJS-specific (I could be wrong, but I suspect not).
The issue is that I have a universal selector like so:
* {
font-family : arial;
font-size : 10pt;
font-weight : bold;
}
Later on I have some markup (generated by ExtJS) as seen in Firebug:
<td class="x-date-active" title="">
<a tabindex="1" class="x-date-date" hidefocus="on" href="#">
<em>
<span>20</span>
</em>
</a>
</td>
This is one of the dates on a calendar widget. Now, the problem I have is that I need to adjust the font size on the test inside the . So, I tried overriding both the x-date-active and x-date-date classes, like so:
.x-date-active {
font-family : arial;
font-size : 8pt;
color : #ff0000;
}
Same content for the x-date-date class. The red color works, so I know I'm targeting the correct style. However, the font-size DOES NOT take effect, the size specified in the universal selector continues. This happens in IE6 only, it works as expected in Firefox. I've tried adding !important to the font-size attribute, but that doesn't help.
Is there any issue overriding a universal selector as far as font sizes goes in IE? I've spent about two hours Googling to no avail. Any help would be appreciate!
You're setting yourself up for a world of hurt using the universal selector, but try adding the following code at the bottom of your CSS file:
.x-date-active * { font-size: 8pt; }
Related
I realize this sounds absurd, but I'm unable to change the font-family for an input type=submit button.
I've tried referencing it by id and input[type=submit], adding a !important tag in the css, and changing it in the dev tools, but nothing works. However, other css attributes are working (such as width, margins, etc).
Is there a css solution I'm overlooking here or should I change paths and style through jquery?
codepen:
http://codepen.io/blakeface/pen/mEJWQj?editors=1100
#submit-button {
font-family: cursive;
font-size: 10em;
margin-top: 30px;
}
Similar question:
Input password font -family
Perhaps you are looking for something more like this?
font-family: Vivaldi;
The 'cursive' font family for HTML/CSS isn't like conventional cursive handwriting. Your code works and displays 'cursive' font.
I just wanted to know why font: inherit; is used in Cascading Style Sheets.
Like the other answers have said, it’s to inherit a CSS property from the parent element.
What the other answers have failed to say is why you’d need this. Because, after all, CSS properties are inherited anyway, right?
Well, no. Most are, by default (but link colour isn’t inherited from the parent element, for instance). But consider this case:
p { color: blue; }
div.important { color: red; }
<div class="important">
<p>This is a text</p>
</div>
Now the text will be blue, not red. If we want the <p> to have its parent’s styling rather than its default styling, we have to override its CSS. We could of course repeat the property value (red) but that violates DRY (don’t repeat yourself). Instead, we inherit it:
div.important p { color: inherit; }
The declaration font:inherit is used in many “CSS Reset” stylesheets, which have often been copied into various libraries and frameworks. The original Reset CSS by Eric Meyer has font:inherit. No specific motivation is given. The overall rationale is said to be “to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on”. But Meyer links to a previous post of his where he explains the idea, saying, among other things: “I want all this because I don’t want to take style effects for granted. This serves two purposes. First, it makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—whether it’s strong or em or b or h3 or whatever—and then style it as needed.”
Several HTML elements have a default rendering in browsers as regards to font properties: headings, form fields, table header cells, some phrase elements, etc. Using CSS Reset, or specifically font: inherit means that on browsers supporting the inherit value, all such elements are rendered in copy text font, unless otherwise specified in a style sheet.
So this is about a particular methodology (or, as some people might say, ideology or religion) of authoring and design. It has gained popularity and often applied routinely.
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family; or a way to set the element's font to a system font, using specific keywords. -MDN
By using font: inherit;, it tells an element to inherit those relevant values from its parent container. See the examples below:
In the 1st group: you can see there are some special style set by default from the browser, h1 is bolder and larger it also inherits the relevant values from body automatically. However, for the input element, it doesn't inherit any of those values, since it's a replaced element and serves its unique purpose.
In the 2nd group: It forces those elements to inherit those values from body by using font: inherit;.
Now, you see what it does. It's entirely up to you when to use it, for instance you might want to use <h1> tag for the site logo in the home page, and you probably want to make it look no difference than it appears on other pages. And of course, it's commonly being used in CSS reset frameworks.
body {
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-style: italic;
}
.inherit {
font: inherit;
}
<h1>Heading</h1>
<input type="button" value="Button">
<hr>
<h1 class="inherit">Heading</h1>
<input class="inherit" type="button" value="Button">
Not all browsers inherit font properties on all elements. Netscape 4.x was notoriously bad about about inheritance. Consider the following style:
body { background: black; color: white }
In Netscape 4.x, the color was not applied to table elements, so you would end up with the default black text inside the table on a black background.
Font properties have the same kind of deal for some elements, particularly form elements (and table elements for older browsers). It's not uncommon to see a definition like this:
table, form { font: inherit }
The inherit is used to get the properties from the parent element. In other words, inherit the properties of parent element.
The default property is inherit, it means, say you have div and a p.
<div>
<p>Hello World!</p>
</div>
Now you give a style:
div {font-famlily: Tahoma;}
p {font-family: inherit;}
That font-family is inherited to the p from its parent element div.
Using {font:inherit;} in CSS makes sense because various user agents (a.k.a. browsers) have user agent stylesheet (read: default stylesheet) with something like
body
{
font: -magic-font-from-user-preferences;
}
textarea, input
{
font: monospace;
}
The {font:inherit;} is used to workaround the special case where font or font-family is not inherited by default due to user agent stylesheet but the author of the content wishes the font family to be inherited.
The actual user agent behavior with the value inherit differs due to various bugs, unfortunately. Resulting behavior may be closer to author intent than the default value, though.
inherit in CSS simply means it inherits the values from parent element, so for example:
<div style="font-family: Arial;">
<p style="font-family: inherit; /* This will inherit the font-family of the parent p*/">
This text will be Arial..And inherit is default behavior of the browser
</p>
</div>
Here <p> inherits the font-family: Arial; from it's parent div
You need to use inherit for example in the case of anchor elements,
the color property is commonly set to blue in the user agent style
sheet. If you wanted to reinforce the importance of the inherited
value, you could use the value inherit in an author or user style
sheet, overwriting the user agent style sheet declaration.
More Reference
I have one word ONE_WORD and I would like to make it little big bigger, change text style and color it in red. How can I do that?
I tried with this code, but it doesn't work:
<font color="#B00000 ">ONE_WORD</font>
thx, D.
Font is deprecated.Use span instead
<span class="word">Your Word</span>
Then apply style to it.
CSS:
.word
{
font-size:20px;
color:Red;
//Other styles
}
Using inline styles is not recommended.
font is deprecated. Use <span> and CSS to apply specific styling:
<span style="color: #b00; font-size: 16px; font-style: italic;">ONE_WORD</span>
You can try this
HTML and INLINE CSS
<div class="text" style="color:red; font-size:20px;">ONE_WORD</div>
OR USE THE FOLLOWING CSS
.text{color:red; font-size:20px;}
Use attribute style to edit style properties:
<span style="color:#B00000;">This is dark red.</span>
More info: http://www.w3schools.com/html/html_css.asp (By popular demand: Use http://www.w3.org/Style/Examples/011/firstcss.en.html#colors and also https://developer.mozilla.org/en-US/docs/CSS/color instead. It may take a long search to find out what you're looking for in w3.org or MDN, but as pointed out they are definitely more reliable sources than w3schools.com)
<span style="font-size: 20px; font-style: italic; color: red;">ONE_WORD</span>
Define CSS property inside style. write like this:
<font style="color:#B00000">ONE_WORD</font>
First, think of your reason for wanting to increase it's size. If there's an HTML element that matches that reason (such as <em> for emphasis), then that's the element to use:
<em>ONE_WORD</em>
If you use the same element elsewhere but don't want those other uses to have the same appearance, then use it with a class. The class name should also reflect your thinking that led to you wanting it larger:
<em class="ourName">ONE_WORD</em>
If there's no natural match, use <span>.
<span class="ourName">ONE_WORD</span>
Then in your CSS you set the style to match. If you went with the first choice:
em
{
color: red;
font-size: 120%;
font-style: italic;/*em does this by default, but we'll include it anyway*/
}
If you went with the second choice or third choice, then either:
.ourName
{
color: red;
font-size: 120%;
font-style: italic;
}
Or to e.g. only apply this style to <em> elements with that class - and treating other elements you used the same class on:
em.ourName
{
color: red;
font-size: 120%;
font-style: italic;/*em does this by default, but we'll include it anyway*/
}
While more work for this one word that just putting the style straight on it, taking this approach to your entire site will make it simpler, faster, more logical for you to understand later, and quicker to change. It'll start paying off after just one document. Putting the CSS in a separate file will start paying off after the second page, and keep on giving.
you have to use style attribute to do that like:
<font style="color: #B00000>ONE_WORD</font>"
If the code posted does not set the text color, then the problem is elsewhere, possibly in a style sheet that overrides this setting, or in browser settings (browsers can be set to ignore colors suggested on web pages).
People and organizations have various opinions, but technically the font tag keeps working, and you can also set font family and size there, e.g.
<font color="#B00000" face="Verdana" size="4">ONE_WORD</font>
This is however rather inflexible, since here font sizes are expressed by numbers from 1 to 7, so that 3 is normal size and others are something different, in a browser-dependent manner. To get better control, you can add a piece of CSS, e.g.
<font color="#B00000" face="Verdana" size="4"
style="font-size: 135%">ONE_WORD</font>
To change text style to italic, you could wrap <i> and </i> around this; to get bold font, use <b> and </b> around.
And you can of course use semantically empty span markup and set everything in CSS, though there is little practical reason to do so for just styling an individual word.
In a DIV I place some text/html code which get loaded from a database. This text sometimes contains font size definitions (ex: font size="3"). is there a way to override this font size in this specific DIV using CSS.
I am grateful for any help.
Assuming mark-up similar to the following:
<div>
<font size="1">Some text at 'size="1"'</font> and natively-sized text, with more at <font size="26">'size="26".'</font>
</div>
Then you can explicitly instruct CSS to inherit the font-size from the parent element:
div {
font-size: 1.5em;
}
div font {
font-size: inherit;
}
JS Fiddle demo.
Please note, of course, that font is deprecated and should, therefore, not be used (as support for the element can stop without notice, and/or implementations change without warning).
Incidentally, while !important will force a declaration to override the usual cascade of styles, it's taking a sledgehammer to crack a nut; and, if it can be avoided (and in this case, it seems, it can be avoided) it should be, since it complicates later debugging of styles, and associated inheritance problems.
Further, this is treating the symptom of your problem; the problem you're really facing is the presence of the font tags in your content/database. This should be corrected, by removing the elements, and replacing them with appropriately-styled elements, such as em, span and so forth...
References:
font element, at the W3.org.
font element at the MDN.
Using the CSS !important notation you are telling the browser to overwrite any font-size defined inside your div:
From the above link it reads:
However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration.
Example
See this working Fiddle Example!
.htmlContents * {font-size:10px!important;}
<div class="htmlContents">my database html content</div>
One idea: give these text tags an id or class, then use JavaScript to find these elements and change the style on them.
How about stripping the "font" tags from the text before inserting into the div? Then just style the div with a font size.
Thanks had same problem couldn't override font-size of footer of a nested element a.
.footer ul li a {
font-size: 20px ;
height: 25px;
}
Im importing an XML feed which has inline styles applied to its divs like:
face="Verdana"
I want to override this with CSS. Ive tried this:
#containing-div div {
font-family: arial !important;
}
But its not working. As 'face' is deprecated I'd hoped it would be overridden with the 'font-family' but it appears not to be. Given that I can't change the XML feed (I know I should be able to but just trust me!), how can I override this?
Thanks
Assuming that this:
face="Verdana"
is actually this:
<font face="Verdana">..</font>
(and it must be, right? There's no way it's <div face="">)
then you should use this CSS:
#containing-div, #containing-div font {
font-family: arial;
}
There should be no need for !important. The point is to select the font elements.
The problem might be the "XML" part. Can you set other properties with the #containing-div div selector, like background or border? If not, the selector might not match, because the ID is not correctly defined by the XML fragment or the namespaces don't match.