How To? : Display text with highlighted background

[thricipio]

My knowledge of HTML could be fairly described as rudimentary. I've
been using the older (now deprecated) "<font> tag to control font
characteristics. I'd like to be able to display a character string
(word or phrase) with a highlighted background using the color of my
choice (e.g., yellow).

I don't think this can be done with this older font tag, but suspect
it can be done with newer tags. Could someone point me to a good
online reference that might describe a newer tag-set for controlling
font characteristics?

Or... I suppose someone could just show me how to accomplish my
specific objective... but I think it would be best to get to a good
online reference... so I can teach this dog (i.e., myself) some new
tricks!

Thanks,
—Thri

 

[Neredbojias]

My knowledge of HTML could be fairly described as rudimentary. I've
been using the older (now deprecated) "<font> tag to control font
characteristics. I'd like to be able to display a character string
(word or phrase) with a highlighted background using the color of my
choice (e.g., yellow).

I don't think this can be done with this older font tag, but suspect
it can be done with newer tags. Could someone point me to a good
online reference that might describe a newer tag-set for controlling
font characteristics?

Or... I suppose someone could just show me how to accomplish my
specific objective... but I think it would be best to get to a good
online reference... so I can teach this dog (i.e., myself) some new
tricks!

<span style="padding:0 2px;background:#f0f000;color:#504030;">Highlighted
Text</span>

 

[Ari Heino]

I'd like to be able to display a character string

(word or phrase) with a highlighted background using the color of my
choice (e.g., yellow).

Use CSS for all styling.

To emphasize some words, you could use

<p>Normal text <span style="background: yellow; color: black;">black
text on yellow background</span> normal text again.</p>

Or better, in your css file:

span.highlight {
background: #ffff00; /* always declare both background and color */
color: #000000; /* to avoid problems */
}

and then on html:

<p>Normal text <span class="highlight">black text on yellow
background</span> normal text again.</p>

 

[thricipio]

<span style="padding:0 2px;background:#f0f000;color:#504030;">Highlighted
Text</span>

Thanks, Nered... This worked great.

If you feel like showing me the syntax for including these attributes:
[face (e.g. verdana)], [size], [itallics], [underscore] and [bold],
I'm all eyeballs!

But even if you don't feel like it, I thank you again for the help
you've already provided.

All the best,
—Thri

 

[nice.guy.nige]

While the city slept, Ari Heino feverishly typed:

Use CSS for all styling.

To emphasize some words, you could use

<p>Normal text <span style="background: yellow; color: black;">black
text on yellow background</span> normal text again.</p>

Or... as you say, this is emphasising words, so use the <em> element with a
class and style that. This has the advantage that the text will be
emphasised whether or not it is allowed to be highlighted.

In your head (or - ideally - in a separate css file)

<style type="text/css">
body {
color: #000000;
background-color: #ffffff;
}

em.highlight {
color: inherit;
background-color: #00ff00; /* green background */
font-style: normal; /* <em> is normally italicised, this will make it
normal */
}
</style>

and in your body

<p>Normal text <em class="highlight">highlighted text</em> normal text
again.</p>

As seen in action (sort of) at
http://www.nigenet.org.uk/stuff/highlighttext/

Cheers,
Nige

 

[Ari Heino]

If you feel like showing me the syntax for including these attributes:

[face (e.g. verdana)], [size], [itallics], [underscore] and [bold],
I'm all eyeballs!

You'll find lots of basic css tutorial from the web to teach yourself
this. Just google css tutorial.

 

[thricipio]

Use CSS for all styling.
:
[snip]
:
<p>Normal text <span style="background: yellow; color: black;">black
text on yellow background</span> normal text again.</p>

Or better, in your css file:

span.highlight {
   background: #ffff00; /* always declare both background and color */
   color: #000000;      /* to avoid problems */
}

and then on html:

<p>Normal text <span class="highlight">black text on yellow
background</span> normal text again.</p>

Thanks, Ari.

I've seen references to CSS before... and I think I'm even using it in
one of my HTML files, but I've always been a little confused about how
it works. Especially as regards using a separate CSS file.

Question: is the <span> tag an example of using CSS?

Thanks again,
—Thri

 

[thricipio]

You'll find lots of basic css tutorial from the web to teach yourself
this. Just google css tutorial.

Thanks, Ari. I'll definitely take your advice.

All the best,
—Thri

 

[nice.guy.nige]

While the city slept, (e-mail address removed) feverishly typed:


[...]

Question: is the <span> tag an example of using CSS?

<span> is an HTML element that is used to group inline content (it spans a
set of content). It doesn't have any actual effect on the rendering of the
document, and as such is often used with CSS applied to style part of the
content.

However, as I mentioned in my earlier post, by highlighting, you are -
effectively - emphasising a piece of text, so in that case it may be better
to use the <em> element with style applied to that.

Cheers,
Nige

 

[thricipio]

<span> is an HTML element that is used to group inline content (it spans a
set of content). It doesn't have any actual effect on the rendering of the
document, and as such is often used with CSS applied to style part of the
content.

However, as I mentioned in my earlier post, by highlighting, you are -
effectively - emphasising a piece of text, so in that case it may be better
to use the <em> element with style applied to that.

Thanks, Nigel. I'll explore both tags: <span> and <em> along with an
exploration of CSS.

All the best,
—Thri

 

[Jukka K. Korpela]

Use CSS for all styling.

Well, at least as far as it is feasible, which means rather far.

To emphasize some words, you could use

<p>Normal text <span style="background: yellow; color: black;">black
text on yellow background</span> normal text again.</p>

To emphasize words, you should use <em> or <strong> markup, since that's
their defined meaning and since that makes them highlighted in _some_ manner
even when CSS is disabled.

Or better, in your css file:

span.highlight {
background: #ffff00; /* always declare both background and color */
color: #000000; /* to avoid problems */
}

Right except that you should use <em> or <strong> and the element name em or
strong as the selector, instead of span.highlight. If desired, you could
still use a class attribute, to distinguish between different types of
emphasis.

In common graphic browsers, <em> elements appear in italics, <strong>
elements in bold. This is the "backup" you get by using such elements. If
you do _not_ want those features when CSS is in use, you can remove them
using
strong { font-weight: bold; }
em { font-style: normal; }
if you rely e.g. on your color suggestions getting thru.

Yucca

 

[thricipio]

:
[snip]
:
To emphasize words, you should use <em> or <strong> markup, since that's
their defined meaning and since that makes them highlighted in _some_ manner
even when CSS is disabled.
:
[snip]
:
In common graphic browsers, <em> elements appear in italics, <strong>
elements in bold. This is the "backup" you get by using such elements. If
you do _not_ want those features when CSS is in use, you can remove them
using
strong { font-weight: bold; }
em { font-style: normal; }

Yucca, many thanks for the additional information. You've all been
kind with your time and suggestions. My next task is to find a good
online CSS tutorial, per Ari's earlier suggestion.

Thanks again to one and all.
—Thri

 

[nice.guy.nige]

While the city slept, (e-mail address removed) feverishly typed:

[...]

You've all been kind with your time and suggestions.

[...]

Looks like you got us on a good day ;-)

Have fun!

Cheers,
Nige

 

[Ari Heino]

To emphasize words, you should use <em> or <strong> markup

True. I was hasty and came up with span first for some reason.

strong { font-weight: bold; }

Typo, you meant font-weight: normal.

 

[Nico Schuyt]

.My next task is to find a good online CSS tutorial, ..

http://www.w3schools.com/css/css_examples.asp

 

[Adrienne Boswell]

Gazing into my crystal ball I observed (e-mail address removed) writing in

My knowledge of HTML could be fairly described as rudimentary. I've
been using the older (now deprecated) "<font> tag to control font
characteristics. I'd like to be able to display a character string
(word or phrase) with a highlighted background using the color of my
choice (e.g., yellow).

I don't think this can be done with this older font tag, but suspect
it can be done with newer tags. Could someone point me to a good
online reference that might describe a newer tag-set for controlling
font characteristics?

Or... I suppose someone could just show me how to accomplish my
specific objective... but I think it would be best to get to a good
online reference... so I can teach this dog (i.e., myself) some new
tricks!

Thanks,
—Thri

As others have said, use CSS, but, I wanted to say this bit as well.
Unless the text to be highlighted really is an emphasis, I would use
span instead of the emphasizing elements, em and strong.

For example, say you were writing a search feature, and you wanted to
highlight the desired keyword in the results. That would not
necessarily need emphasis, especially as some speaking browsers will say
the word differently if you are using em or strong.

<p>You searched for <span class="highlight">acme</span>. We found the
following results:</p>
<ul>
<li><a href="#"><span class="highlight">ACME</span> Roadrunner Bomb</a>
</li>
<li><a href="#">The <span class="highlight">ACME</span> Storage Company
</a></li>
</ul>

On the other hand, if you had a form, you might want to emphasize
something, eg:
<p>The following fields are <strong>required</strong>, <strong
class="highlight">Name and Address</strong>.</p>

 

[Jukka K. Korpela]

Typo, you meant font-weight: normal.

Right, thanks.

That's my usual mistake: I write the exact opposite of what I'm thinking.
Unfortunately, all checking tools appear to be ineffective against it. :-(

Yucca

 

[dorayme]

it would be best to get to a good
online reference... so I can teach this dog (i.e., myself) some new
tricks!

Funny you should mention dog, take a look at

<http://htmldog.com/>

and, perhaps, specifically:

<http://htmldog.com/reference/cssproperties/background/>

 

[thricipio]

Funny you should mention dog, take a look at

<http://htmldog.com/>

and, perhaps, specifically:

<http://htmldog.com/reference/cssproperties/background/>

You're funny . . . *AND* helpful. I really appreciate you providing
these links.

Also... many thanks to Nico for this one:
http://www.w3schools.com/css/css_examples.asp

Again... thanks to one and all for your help.
—Thri

 

[Jukka K. Korpela]

Also... many thanks to Nico for this one:
http://www.w3schools.com/css/css_examples.asp

Actually, it has often been stated and argumented that w3schools is
unreliable and otherwise questionable. It probably intentionally uses a
domain name that gets confused with the W3C, the World Wide Web Consortium -
at least that's a common confusion. W3schools has nothing to do with the
W3C. More importantly, W3schools is neither very readable nor factually
correct.

Let's see... the first example of CSS that they have sets background-color
without setting text color and lacks a DOCTYPE declaration in the HTML
document. Fundamentally bad practices, so don't learn from them.

Yucca