CSS text question

What tag Should I use?

[Birdman]

I know this one is probably easy, but it has me stumped. I'm using CSS/XHTML and I can't figure out what tag to use to define words I want to display in bold, italics, etc. Thank you in advance.
Birdman

[Knowles]

You are just wanting to Bold one word? A span would work I guess and just give it a .bold {decoration:bold;} in css. Your tag would be <span class=bold>word</span>

[Nick_W]

Here ya go

<strong>Bold or strongly emphasized text</strong>

<em>Italic or emphasized text</em>

Nick

[Nick_W]

Hmmmm... never seen the 'decoration' thingy Knowles? didn't work for me anyway.

The way I know is

font-weight: bold;

or text-decoration: none;

Nick

[Knowles]

errr I was thinking of text-decoration hate it when my mind dont work guess it was just totally not working. Text-decoration is for underlines and overlines and the such right?

[Birdman]

Ok, so I can use <span class="">to differentiate certain text from the rest. <strong>works by itself(w/out defining in CSS) for bold text. <em> displays italic text using it source code alone. I take it I can add classes to any of these tags to make them appear any way I want them to. BTW, thanks for the quick responses.:)

[Knowles]

Yes Birdman you can assign a class and have it display how ever you like. So you could make different color bolds and such, but just for the simple bold word or phrase I would use Nicks. Also make sure what you are declaring in CSS is valid (unlike what I put there) that way it will work.

[Nick_W]

Yes, add what you like to them, colors bg's etc.

Remember that <strong> and <em> are markup so if you're a nice coder then you'll have to make sure they are really warranted. (I cheat all the time btw)

If you need to bold text for purely visual purposes then best go with the <span> and class.

Knowlse:

hehe, happens to me all the time! ;);)

Nick

[moonbiter]

Note that strong and em aren't required to be shown as bold or italic respectively, but do so in most visual browsers for historical purposes. So if you go that route and want to make double-diggly sure that bold text will stay that way in the future, style 'em with CSS too.

[Birdman]

Thanks for all the help everyone! It all seems easy when I hang out here. I'm sure glad I found Webmaster World. Now, I'll move on to my next problem. I don't know what it is, but I know it'll be there soon;)

[rewboss]

I believe that <b> and <i> have not been deprecated (at least, they didn't seem to be in XHTML 1.0, although there was a lot of conflicting information about this).

There are occasions when you might want to use bold or italic text for reasons other than emphasis, when <em> and <strong> would be inappropriate (especially for audio browsers) -- this was discussed a few weeks ago. An example might be foreign words, which are usually set in italics:

She displayed a certain joie-de-vivre.

It would be wrong to use <em> here, because you are not trying to emphasise the words, merely to set them off visually. Personally, I prefer to use <i> with a lang attribute, because it is actually more efficient than using CSS. Compare:

.foreign { font-style: italic; }

<span class="foreign" lang="fr">joie-de-vivre</span>

with:

<i lang="fr">joie-de-vivre</i>

As CSS-2 becomes better supported, though, a future solution should be:

span[lang] { font-style: italic; }

<span lang="fr">joie-de-vivre</i>

...still a little more verbose, but easier to change if you have a lot of foreign words and phrases.

There are some other structural tags which usually render in italics which you should use where appropriate. These are:

<cite> for titles of books and other publications, e.g. Charles Dickens' <cite>David Copperfield</cite>

<var> to represent text in a sample of code which the user should replace with actual code, e.g. Copy the file using <code>copy(</code><var>temp_variable</var><code>, </code><var>destination_file</var><code>)</code>

<address> marks up contact information

<dfn> marks up a technical term which is explained at that point (usually the first occurrance), e.g. A <dfn>labio-dental fricative</dfn> is the sound produced by placing the lower lip against the top row of teeth and forcing air out of the mouth.

Bold text is much less frequently used.

Note that large amounts of either bold or italic text is actually difficult to read on screen: use them very sparingly.

[Eric_Jarvis]

Birdman, the secret of using css effectively is to think about the concept BEFORE you think about presentation...so don't think "I want that word in bold"...think "I need that word to stand out as important" or "I want that word to be read first"...that will pretty much tell you how you need to do the mark up...then later you can style it to suit

I often use several classes called things like "menu", "highlight" or "explanation" and place them all over the site long before I start thinking of how they will look

[rewboss]

<span lang="fr">joie-de-vivre</i>

...should of course be:

<span lang="fr">joie-de-vivre</span>

(Oops!)