How Can I Override Style Info from a CSS Class in the Body of a Page

Question

So I m working on a project that accepts HTMLs as inputs and returns them as outputs  All of the HTMLs I get as inputs have all of their text in divs and style sheets that dictate the style for each div based on the class attribute    To better visualize things  and to see how my project is coming along  I would love to output the input HTMLs color coded to specifications I give them  It s really easy for me to modify the body of the HTML  but difficult to deal with the style sheet  All I m looking for is something simple to override the color property of the style sheet  It can be hacky  as this is just internal code for temporary use  I just want something simple that works  Is there an easy way to override aspects of CSS classes in the body of a file    EDIT  I want to provide an example to better explain what I m looking for  An example of the style sheets I have at the top of my page  that I want to override  is    style21 vertical-align top font-size 13px font-family Helvetica color  000000    An example of a div whose color I d like to change is    lt div style  position absolute top 432 left 422 color  ff0000   gt  lt span class  style21  gt relating to lt  span gt  lt  div gt   My problem is that I can t override the color specified in the css  As you can see in the above example  I m trying to do it in the specific style within the div  but that isn t working    EDIT

User · Accepted Answer

Either use the style attribute to add CSS inline on your divs, e.g.:

<div style="color:red"> ... </div>

... or create your own style sheet and reference it after the existing stylesheet then your style sheet should take precedence.

... or add a <style> element in the <head> of your HTML with the CSS you need, this will take precedence over an external style sheet.

You can also add !important after your style values to override other styles on the same element.

Update

Use one of my suggestions above and target the span of class style21, rather than the containing div. The style you are applying on the containing div will not be inherited by the span as it's color is set in the style sheet.

User · Answer

Eli  it is important to remember that in css specificity goes a long way  If your inline css is using the  important and isn t overriding the imported stylesheet rules then closely observe the code using a tool such as  firebug  for firefox  It will show you the css being applied to your element  If there is a syntax error firebug will show you in the warning panel that it has thrown out the declaration    Also remember that in general an id is more specific than a class is more specific than an element    Hope that helps   -Rick

User · Answer

You can put CSS in the head of the HTML file  and it will take precedent over a class in an included style sheet    lt style gt   thing      color   f00     lt  style gt

User · Answer

Id s are prior to classnames  Tag attribue  style   is prior to CSS selectors   important word is prior to first two rules  More specific CSS selectors are prior to less specific  More specific will be applied    for example     divclass  spanclass is more specific than  spanclass  divclass divclass is more specific than  divclass  divId  spanclass has ID that s why it is more specific than  divClass  spanClass  lt div id  someDiv  style  color red   gt  has attribute and beats  someDiv color blue  style   someDiv color blue important  will be applied over attribute style  color red

User · Answer

you can test a color by writing the CSS inline like  lt div style  color red   gt     lt  div gt

User · Answer

if you can access the head add  lt style gt       some style     lt  style gt   the way Hussein showed you and the ultra hacky  lt style gt   lt  style gt  in the html it will work but its ugly  or javascript it the best way if you can use it in you case

User · Answer

Have you tried using the  important flag on the style    important allows you to decide which style will win out   Also note  important will override inline styles as well    example p       color  blue  important         example p       color  red      Another couple suggestions   Add a span inside of the current   The inner most will win out   Although this could get pretty ugly    lt span class  style21  gt   lt span style  position absolute top 432px left 422px  color Red   gt relating to lt  span gt   lt  span gt    jQuery is also an option  The jQuery library will inject the style attribute in the targeted element    lt script src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  type  text javascript   gt  lt  script gt       lt script type  text javascript  gt             document  ready function                    span   css  color     ff0000                      lt  script gt    Hope this helps  CSS can be pretty frustrating at times

[html] How Can I Override Style Info from a CSS Class in the Body of a Page?

Examples related to html

Examples related to css