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.
Related
so I'm using Material UI Components on my react-app, for example for a button text, I would like to give it a margin-top and font-weight, however, I'm using CSS Modules, so I cannot just override the default CSS Styles, so I had to use the !important flag, is there a cleaner/better approach to do this and avoid using the better flag? Here's an example of what I'm looking like for a certain component.
I was adviced to use atomic CSS but googling that it seems like they're advising me to use in-line styles and that's something I've been meaning to avoid for future reusability.
TIA
Got through by setting specific CSS classes, for example for this font weight and margin top, my new CSS looks like
.loginSignUpLink.priority {
margin-top: 4%;
font-weight: 1000;
}
and my classname is as follows
className={classNames(styles.loginSignUpLink, styles.priority)}
Using important in CSS is not a good way. I prefer you please use the parent class or tag to avoid important.
One main thing is very important your CSS run last after all CSS files. It is the most important.
For example please check the below code.
<div class="test">
<span class="span"></span>
</div>
Than write down css for span like this
div.test span.span{ ... }
Also, you use more hierarchy to avoid important in css
body div.test span.span{ ... }
I tried to change the fonts and styles in my joomla website, and to achieve this I installed the following plugin:
Consequently the body font was changed, however the inline styles were not.
How can i disable or remove inline styles, like the following one?
<span style="font-size: 14pt; font-family: 'arial black', 'avant garde';">Test</span>
I need a lot help :)
From the looks on the image it appears to me that this plugin of yours uses CSS selectors to choose which elements it will affect.
Given that my assumption is correct, if your span tag is not being affected its likely because there is a conflict in the CSS selection order.
My suggestion to fix your problem is to add a specific class to your span tag, like for example <span class="myNewShinySpanTag"> and then add the line span .myNewShinySpanTag to the text box of your plugin.
Hope it helps!
good way is find the inline css and remove it.
but if you can not find it you can write an high Priority css to disable this properties.
you should find an unique selector for this code:
span
{
font-size:unset !important;
font-family:unset !important;
}
I'm sure that css code is correct. But Firefox cannot understand and display it.
Here is case 1 within css:
.fa-circle:before {
content: "\f111"
}
and here is another case:
.fa-group:before,
.fa-users:before {
content: "\f0c0"
}
Can you tell me how to fix it? Thank you!
Sounds to me like your pseudo-element's containers (the i and span elements) are having their font properties overridden by something else.
In Firefox's element inspector you should see the following inherited styles:
Importantly the font-family property should not have a line through it - if it does, it means the font being used isn't Font Awesome. If that is the case you'll instead see:
If this is the case, the font being used isn't Font Awesome and the requested character code doesn't exist in the other font's character set.
When working with CSS, i'm able to set all properties of font in one declaration like font: italic bold 24px "verdana"; instead of writing font-style:italic; font-weight:bold; font-size:24px; font-family:"verdana";
Similarly i tried to set text properties (text-align, text-indent, text-transform, text-decoration, etc) in one declaration but i did not get the effects.
What I want to know is...
Is it possible to set these kind of properties in one declaration like text:underline justify capitalize 20px;?
if possible...,
-what properties can I set?
-What is the order of the properties that i should specify?
-what are the required properties?
Although font is a known abbreviation for an aggregate collection of properties, there does not appear to be any equivalent to let you specify all text properties together.
This is not possible and neither efficient to look back on. But what you can do is make an extra stylesheet.css and add "standard" classes in there like a class: text1
Which you will fill in with:
text-align: justify;
text-decoration: underline;
etc.
so you just have basic classes which add alot of css you dont need to make an extra stylesheet but it would keep everything orderd from custom css to standard classes you made on your own and you can use em for sites in the future.
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;
}