style sheet class and quickly changing attributes

[Rob]

I am new to working with style sheets. I had a request to add some emphisis
to a couple of words within a block of text defined with a style sheet
class. What's the easiest way to do this?

<tr valign="top" class="helpBody">
<td valign="top">
This report provides a list ....... For example if you were looking for
just <EM>srvMailServer</EM>
enter <EM>srv</EM> in the textbox and click <STRONG>View Report</STRONG>.
This will now display............

I need to emphasize srvMailServer above, what's the solution without having
to create a new class and change the class for one word and change it back?
Thanks!

 

[Kris]

I am new to working with style sheets. I had a request to add some emphisis
to a couple of words within a block of text defined with a style sheet
class. What's the easiest way to do this?

<tr valign="top" class="helpBody">
<td valign="top">
This report provides a list ....... For example if you were looking for
just <EM>srvMailServer</EM>
enter <EM>srv</EM> in the textbox and click <STRONG>View Report</STRONG>.
This will now display............

I need to emphasize srvMailServer above, what's the solution without having
to create a new class and change the class for one word and change it back?

...if you were looking for just <em>srvMailServer</em>
enter <kbd>srv</kbd> in the textbox and click <strong>View
Report</strong>.

em { color: green; background: transparent; }
kbd{ color: red; background: transparent; }
strong { color: blue; background: transparent; }

 

[Kris]

<tr valign="top" class="helpBody">

By the way, doesn't look like table data to me.
Curse tables for layout, embrace CSS.

 

[Jukka K. Korpela]

I am new to working with style sheets.

The you should read a good tutorial on them. Most problems that people
have with CSS have been caused by themselves, either by working by
guesswork (inventing properties and syntax, etc.) or copying someone
else's CSS code without knowing what it means.

I had a request to add some
emphisis to a couple of words within a block of text defined with a
style sheet class. What's the easiest way to do this?

The "defined with a style sheet class" part of the question isn't crystal
clear. A class does not define _a_ block, in the general case.

<tr valign="top" class="helpBody">
<td valign="top">
This report provides a list ....... For example if you were
looking for
just <EM>srvMailServer</EM>
enter <EM>srv</EM> in the textbox and click <STRONG>View
Report</STRONG>.

There you already have emphasis - both "normal" and "strong". The use of
<em> and <strong> implies some browser-depending default rendering. So do
you wish to _replace_ them (typically, italics and bolding) by some other
hightlighting method, or _add_ something to it?

I need to emphasize srvMailServer above, what's the solution without
having to create a new class and change the class for one word and
change it back?

If you wish to assign some CSS rules to one EM element but not other EM
elements inside the same enclosing element (TD in this case), then the
only practical way is to add a class attribute to it.

By CSS specifications you _could_ use the selector
tr.helpBody em:first-child
without needing to change the current markup - assuming that
in your example "......." contains no tags, i.e. the EM element is the
first subelement of its parent. But this would be rare special case.
Moreover, IE does not support :first-child

 

[Jukka K. Korpela]

..if you were looking for just <em>srvMailServer</em>
enter <kbd>srv</kbd> in the textbox and click <strong>View
Report</strong>.

If we start discussing the markup, we might also ask whether
"srvMailServer" is really being emphasized (indicated as more important)
or whether the intent is just make it look different, in which case
<i> might be more logical (or less illogical) than <em>. Moreover,
"View Report" sounds like the text in a button or as a link, so
<samp> might be more adequate than <strong>, in principle.
These choices naturally have an impact on the CSS side. In fact,
_if_ the context is what I suspect, this might even be a case for using
"system colors" and "system fonts" in CSS.

 

[Rob]

The you should read a good tutorial on them. Most problems that people
have with CSS have been caused by themselves, either by working by
guesswork (inventing properties and syntax, etc.) or copying someone
else's CSS code without knowing what it means.


The "defined with a style sheet class" part of the question isn't crystal
clear. A class does not define _a_ block, in the general case.


There you already have emphasis - both "normal" and "strong". The use of
<em> and <strong> implies some browser-depending default rendering. So do
you wish to _replace_ them (typically, italics and bolding) by some other
hightlighting method, or _add_ something to it?


If you wish to assign some CSS rules to one EM element but not other EM
elements inside the same enclosing element (TD in this case), then the
only practical way is to add a class attribute to it.

By CSS specifications you _could_ use the selector
tr.helpBody em:first-child
without needing to change the current markup - assuming that
in your example "......." contains no tags, i.e. the EM element is the
first subelement of its parent. But this would be rare special case.
Moreover, IE does not support :first-child

thanks for the info. this isn't really my job which is why I'm clueless, i
was just sort of thrown at it and given the style sheets to work with. i
managed to get it to work using the SPAN tag. i.e.

<p class="helpBody">
This page allows you to move computers from one group to another. By
default, all computers are
initally assigned to the <SPAN STYLE="font:bold 12px
serif;">default</SPAN> group

This may not be the right way, but it does what they need it to do and is
based on the style sheet they gave me to use and they only care about
supporting IE 5+

 

[Jukka K. Korpela]

<p class="helpBody">
This page allows you to move computers from one group to another.
By
default, all computers are
initally assigned to the <SPAN STYLE="font:bold 12px
serif;">default</SPAN> group

This doesn't look like the example you gave first. It had some attempts
at semantic markup. Why don't you simply use <strong>default</strong>?
And where did you get the idea of setting font size to something that is
unreadable to a large number of people?

I would like to re-quote part of my response, which you quoted
comprehensively, apparently because you did not read it comprehensively
(the usual explanation):

The[n] you should read a good tutorial on them. Most problems that people
have with CSS have been caused by themselves, either by working by
guesswork (inventing properties and syntax, etc.) or copying someone
else's CSS code without knowing what it means.

This may not be the right way,

It isn't.

but it does what they need it to do

It only seems that way.

and is based on the style sheet they gave me to use

It isn't. The snipped you gave shows no sign of being based on any style
sheet external to it.

and they only care about supporting IE 5+

That's very foolish of them. What happens when a big boss decides that
that IE has intolerably many security holes and all people on the
intranet switch to using Mozilla, starting next Monday?