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;
}
Related
I want to reduce the text size of the top left slider from the linked page.It is set to H2 on default and I can't figure a way to change it. The text size is too big for it and it looks stupid. I tried with the CSS below, but it only reduces the text size, unfortunately the spacing between the lines and words stays like in H2, which doesnt look appropriate either. Please help!
.fusion-flexslider.flexslider-posts .slide-excerpt h2 a {
color: #fff;
font-size: 20px !important;
line-height: 0.5 !important;
}
It's because the <a> derives font-related styling from the <h2>
Try this selector .fusion-flexslider.flexslider-posts .slide-excerpt h2, it works for me https://prnt.sc/v52pmy
If you set the a element style to include display: inline-block the element will then use the CSS styling you are giving it (though I guess you probably want to set line-height back to normal rather than try 0.5). I have tested this on your site using browser dev tools.
The reason is (to me) a quite complex one - why it doesn't work as you might expect on inline blocks. An explanation is given at https://stackoverflow.com/questions/22816123/why-cant-you-set-line-height-on-an-anchor-element-with-a-background
I have elements with this pattern (XML, not HTML, but CSS should still work):
<expan abbr="XX">YY</expan>
Sometimes I want to see "YY" in the output, sometimes I want to see "XX". No problem when I want to see "YY" and not the attribute value: just leave it as is. No problem if I want to see BOTH the element content and the attribute value: this bit of CSS does that:
expan:after {content:attr(abbr);}
will display <expan abbr="XX">YY</expan> as "YYXX".
But: problem if I want to see the attribute value and NOT the element content -- that is, if I want to see just "XX". I can use either CSS display or visibility to hide the element <expan>. But it hides EVERYTHING, including the :after pseudo-element. So, this code:
expan:after {content:attr(abbr);}
expan {display:none;}
Shows nothing at all.
So, good folk... help. This seems a very obvious thing to want to do. Of course, I could do it pretty easily manipulating the DOM with Javascript. But for various reasons, I don't have that option. I'd like to do it with simple CSS. Can I??
You'll have to use some kind of hack where the element is still there but only the pseudo element (:after) is visible to the user. An example of this would be color. If you know it's only text, then you can set the color to transparent on the main element, and set it to a real color on the pseudo. You'll still have a blank space to deal with, but you can fix that with position: relative on the parent and position: absolute on the pseudo element, because the pseudo element is a child of the main element. note that the text is still there, but you only see it if you highlight it with the mouse. That's fixable too, with ::selection, but it would still be copyable by accident, and ::select is only available in modern browsers.
Here is a demo showing what I mean: DEMO
EDIT: This one should work with text around it, but you'll have to increase the width in order to add more text: DEMO
Works for me in Chrome and Firefox.
One partial solution is to set the expan font-size to 0 and the :before content font-size to the desired size:
expan:before {
content: attr(name);
font-size: 15px;
}
expan {
font-size: 0;
}
Trying to set the :before font-size to 100% did not work.
You can only set the 'content:' attribute on ::before and ::after psuedo-elements.
But what you can do is just provide both your texts in two separate attributes, like this:
<div long-text="This is very long text" short-text="Short text">
<!-- this part is empty -->
</div>
Then your CSS can switch between them like this:
.AltText::before { content:attr(long-text); }
#media screen and (max-width:1200px) {
#HeaderTabContainer .AltText::before { content:attr(short-text); }
}
Or you could use a third attribute to toggle between them.
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
We use a CSS reset file that names every element from html to p to img, etc. and resets the margins, heights, sizes, etc. A pretty standard reset file. However, a client noticed that their <sub> and <sup> tags were not appearing as subscript and superscript should. So, I removed the and tag references from the reset file in hopes of this fixing the problem. It has fixed it in FireFox and Safari but it still remains in IE6 and IE7.
Is there something I'm missing here? Are these tags inheriting their styles from another tag in the reset? And, is there any way to use CSS to re-do whatever may have been undone to the <sub> and <sup> tags in the reset? Thanks for your help.
sup {vertical-align: super; }
sub { vertical-align: sub; }
Since css reset may affect your font sizes, I did it this way:
sub {
vertical-align: sub;
}
sup {
vertical-align: super;
}
sub, sup {
font-size: 0.5em;
line-height: 100%;
}
Maybe you should try different vertical-align values on sub, depending on your browser.
Without seeing your reset file, it's hard to say for certain. The easiest way to debug this is to load your reset file into an otherwise boring page, break out firebug, and see exactly what the computed style looks like. There may also be some CSS hacks in your reset file that apply only to IE.
You could use vertical-align and font adjustments to bring back the original appearance, but I'm inclined to say it's better to just remove the rules affecting these elements if that part of the reset isn't desired.
i have something like this
<body>
<h2>
Blue
<span>
<a ....>add to combo</a>
</span>
</h2>
</body>
and css
#body {font-size: 100%}
h2{font-size: 200%}
a{font-size: 80%}
Now I've been reading up and realize that the a link won't be 80% of 100% but 80% of 200% (of 100%) because percentages are taken from the parents' sizes.
However I'd like all my font-size declarations in percentages without inheriting, but rather just to calculate from some site-wide base font-size - say 16px?
How do you do that?
What you want is not possible with your give code. You want to inherit font 1 particular size, then every font-size in childNodes will be relative to the parent.
if you want to use certain font sizes and not inherit you should explicitly set them
That said never try to use the important statement. Please checkout how CSS assigns his properties to HTML nodes
http://www.w3.org/TR/CSS2/cascade.html#specificity
Try to use "!important" rule:
http://www.w3.org/TR/CSS2/cascade.html#important-rules
I don't think you can override inheritance, since that's part of the cascade of Cascading Style-Sheets.
For your usage you'll either have to explicitly state the font-size (this is likely to get very tedious and error-prone very quickly) for elements using (very) specific selectors, eg:
h2 span a {font-size: 18px; } /* or whatever */
Or reorder your html so that the span is a sibling of the h2, rather than descendant. I agree that it should be possible, though.