homepage Welcome to WebmasterWorld Guest from 23.22.217.122
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS text question
What tag Should I use?
Birdman




msg:1191542
 7:16 pm on Jul 17, 2002 (gmt 0)

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




msg:1191543
 7:18 pm on Jul 17, 2002 (gmt 0)

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




msg:1191544
 7:19 pm on Jul 17, 2002 (gmt 0)

Here ya go

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

<em>Italic or emphasized text</em>

Nick

Nick_W




msg:1191545
 7:24 pm on Jul 17, 2002 (gmt 0)

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




msg:1191546
 7:24 pm on Jul 17, 2002 (gmt 0)

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




msg:1191547
 7:34 pm on Jul 17, 2002 (gmt 0)

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




msg:1191548
 7:36 pm on Jul 17, 2002 (gmt 0)

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




msg:1191549
 7:37 pm on Jul 17, 2002 (gmt 0)

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




msg:1191550
 8:10 pm on Jul 17, 2002 (gmt 0)

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




msg:1191551
 9:11 pm on Jul 17, 2002 (gmt 0)

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




msg:1191552
 8:32 am on Jul 18, 2002 (gmt 0)

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




msg:1191553
 12:26 pm on Jul 18, 2002 (gmt 0)

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




msg:1191554
 10:58 am on Jul 21, 2002 (gmt 0)

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

...should of course be:

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

(Oops!)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved