How can I prevent hardcoding of some attributes in HTML?

I have fo开发者_开发技巧llowing 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.