After a migration of an existing Content Management System i have some problems with existing classes - sometimes the Richtext Editor created the following HTML Code:
<span style="font-weight: bold; "><a href=""....>
Now, the Link is not bold, but i dont know if it is possible to overwrite any rule in CSS when having a custom inline Style property.
Is there any chance (without changing the HTML Code) to make the link as bold text?
Thanks in advance for any help.
Thanks for the first comments - but to be sure i want to add the "bold" tag only when ill have this "special" inline property. So i dont want to overwrite all classes with bold text.
When i have
<span><a style="font-weight: bold;">....</a>
Everthing is fine, the Link is bold
But when i have
<span style="font-weight: bold;">....
The link is NOT bold (but it should be bold).
This is little stupid Code from the Richtext Editor.
Original:
Use !important :
span {
font-weight: normal !important;
}
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
Edit:
This means that in your CSS, there is somewhere :
span {
font-weight: normal !important;
}
You need to overwrite it by selecting the span with more specificity than the declaration in the current css, e.g:
/* somewhere in the css you can't modify */
span {
font-weight: normal !important;
}
/* the css you add */
.container span {
font-weight: bold !important;
}
<div class="container">
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
</div>
The is because classes, ids, attributes, etc all have a score which add up to see which declaration will be used.
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
- smashingmagazine.com
And here is an cheat sheet :
Related
I need to use either tag or .h5 bootstrap class to increase font-size, but I don't want text bold.
<p class="h5 font-weight-light">Whatever</p>
and
<h5 class="font-weight-light">Whatever</h5>
and
<h5 style="font-weight: 300">Whatever</h5>
Doesn't work for me. They are all bold.
Do you have any idea how to make it work?
You are missing !important for that style to be active, so:
<h5 style="font-weight:300 !important;">Whatever</h5>
It would be best to put that CSS in a separate file not directly in html.
There is no need to use h5 when you can just set the font size directly.
style { font-size: 2rem ; }
How can i target the red text in CSS? I need to change the color of all the red text to orange:
<span style="color: #dc143c;"><strong>Red text that must be Orange</strong></span>
I tried with the following, but i don't really know how should I write it to make it work..
span[style="color: #dc143c;"] {
color:#f7941d !important;
}
Thanks for your help!
Place the all red code in <span> tag then in css target the <span> and give them class tag to change it color to red code given below
<span class="red-text">this is red text</span>
css code:
.red-text {color:#f7941d;}
You should remove the style tag from your html completely and use classes instead.
<span class="colored"><strong>colored text</strong></span>
then select the class in your css instead
.colored {
color: orange;
}
Give your Red Text an ID or Class of color-change etc.
<span class="color-change" style="color: #dc143c;"><strong>Red text that must be Orange</strong></span>
now in your css
.color-change {
color:#f7941d !important;
}
One More Thing not use inline css because inline css has maximum priority if you use inline css must use !important keyword to change color.
<span id="change">this is red text</span>
css code:
#change {
color:#f7941d;
}
Try this Hope this help you
Add the class orange at the strong tag:
<span style="color: #dc143c;"><strong class="orange">Red text that must be Orange</strong></span>
In the .css file:
.orange {
color: #f7941d !important;
}
I think it would be easier to use a class or id for the span and target it whenever you want using javascript or jquery. example
Red text must be orange
with jquery you can do this:
$('.OrangeRedSpan').css('color': #FE9A2E);
I have one div tag as below:
<div id="summaryDiv">
<span>
<p style="font-size: 10px;color: red">this is test comment </p>
<ul style="font-size: 8px;color: pink">>this is list of contents
<li class="liSummary">lost1</li>
<li class="liSummary">>list2</li>
</ul>
</span>
</div>
Now summaryDiv contains innerhtml summary which is not plain text but in form of formatted text.
And all formatted text may have different style applied inline or class.
What I need to create summary div css style globally which will overwrite to innerhtml formatted text.
So whole innerhtml will have same style at the end instead of individual inline style.
How to achieve this?
Any help will be most appreciated.
Check this out
#summaryDiv * {
color: #ccc !important;
}
You'll need to use the * wildcard to select all children elements of #summaryDiv and then mark the overriding style as !important.
HTML:
<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
<p>
Some text.
</p>
</div>
CSS:
.e_ticket_font {
font-weight: normal;
}
The HTML code is on content page, which is inside master page.
The issue is - the text is bolded out, but it shouldn't be.
How can I can get rid of it?
Try
.e_ticket_font p {
font-weight: normal;
}
because you are not targetting p tag.
Dipesh's answer is correct. I'll just add a bit explanation. CSS is cascading style sheet, means the style for any element/class/id can be mentioned at multiple places and applied in the order in which they are included. In your case, some other style seems to override your style to make it bold since your snippet will not make it bold.
Considering this, as a general best practice, always target the specific elements if you are not sure if it's class will be styled somewhere else or not.
Thus, .e_ticket_font p {... is prferable than .e_ticket_font {.... If there are multiple paragraphs and you want only some of them to be different, then again use classes/ids, like
.e_ticket_font p#heading {...
.e_ticket_font p#content {...
.e_ticket_font p.specialpara {
and so on.
Another way to make it sure is to apply css inline for that element, but this should not be used generously for many elements as it affects the "structure should be separate than presentation" principle
<div runat="server" Visible="False">
<p class="e_ticket_font">
Some text.
</p>
</div>
CSS:
.e_ticket_font {
font-weight: normal !important;
}
try inline css because if you don't know if there are other css classes are specified in masterpage for <P>
something like:
<div runat="server" Visible="False">
<p style="font-weight: normal;" >
Some text.
</p>
</div>
it will work for sure, then you can check for other css references for <P>
or (for each) element below .e_ticket_font:
.e_ticket_font * {
font-weight: normal;
}
i advice a rare use of !important in case of runaway bubbling your DOM
but mind of the selector detail.. if there is any css selector which describes the object on a directer way like...
.e_ticket_info#e_ticket_info {
font-weight: bold;
}
...css will pick that one with privileg!
I have following statement:
<font color="#2B547E">
Now I don't want to hard code it in my html; instead I want to apply a css class. I don't want this color for all fonts in my page, only for a specific part. I tried the following:
<font class="xyz" >
But it's not working. I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.
How can I move that hard coded value to css?
If you can add a CSS class for this <font> element, you should be able to switch over to using a <span>:
HTML:
<span class="coloredText">text</span>
CSS:
.coloredText {
display: inline; /* will stop spans creating a new line */
color: #2B547E;
}
If you still find the span creates a line break, you can change the rule to
display: inline !important; - this will increase the precendence of this rule so it will take effect. I'm not sure if the use of !important is frowned upon by CSS-pedants, but it might help.
Should be:
HTML:
<font class="xyz">...</font> <!-- or any other tag -->
CSS:
font.xyz {color:#2B547E;} /* or just .xyz */
See also: Class and ID Selectors
First off, use a reset css to reset all your styles to a default of your choice.
I use this one, but there are others around : http://meyerweb.com/eric/tools/css/reset/
Then, write your css and use targeting to apply the styles to different elements
This link explains CSS specificity : http://www.htmldog.com/guides/cssadvanced/specificity/
<link rel='stylesheet' href='reset.css'>
<style>
#top p {
color: blue;
}
#bottom p {
color: red;
}
.black {
background: #000;
}
</style>
<div id='top'>
<p>This text will be blue</p>
<span class='black'>I have a black background</span>
<div>
<div id='bottom'>
<p>This text will be red</p>
<span class='black'>I have a black background too!</span>
<div>
You can use a combination like this:
<div class="xyz">Your content goes here...</div>
and the CSS can be:
.xyz {display: inline; color: #2B547E;}
This will solve the problem of new line and also give the desired color.
HTML
<p>Lorem ipsum dolor sit amet, <span class="xyz">consectetur adipiscing elit.</span> Mauris ultrices arcu eu velit euismod pulvinar.</p>
CSS
.xyz {
color: #66CD00; }
View a live example
I'm sort of lost as to what you can and can't do here ;) but I'll put this in incase
font[color="#2B547E"] {color: red;}
<p>I have following statement: <font color="#2B547E">I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.</font></p>
Unfortunately IE7 has problems with this but it does target if you use font[color] {color: red;} - This will of course not enable you to specifically target by existing colors if that's what you're after - but it will target them all to bring them in line if that's all you require, a mixture of the two might provide a decent enough fallback?
Your problem might be a case of CSS specificity, i cant tell from the details provided. if your style for spans is defined through an ID such as
#somediv span{ display:block}
That css will overwrite something like
span.myspan{display:inline}
because the ID style is more specific, you can solve this a few ways, first you can set the style inline in the html.
<span style"display:inline; color:#2b547e;">some text</span>
or you can make a class and use a more specific style by including the parent ID in the css
#somediv span.myclass{display:inline}
Be more specific with your selector, instead of just div, use div.class, or div.id
<div class="Foo">
Bar
</div>
div.Foo {
color:#2B547E;
margin:0; /* overriding the predefined styles in other sheet */
padding:0; /* overriding the predefined styles in other sheet */
}
replace margin / padding with whatever is causing the new line.
Also I'd always recommend not using style tags; such as Font. Your Html should use declarative only tags. Not to mention the Font tag is deprecated.