Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to make isolated words in paragraph bold /italic with CSS?

Status
Not open for further replies.

hotfusion

Technical User
Jan 20, 2001
755
GB
I'm trying to get my head around CSS at the moment, but desipe much effort I can't seem to find a method of rendering individual words in a paragraph bold or italic.
To illustrate, using plain HTML you could do the following:
<P>bla <b>bla</b> bla bla <i>bla</i> bla</p>

But is there a way to do this using just CSS?
Thanks for any help.

Regards, Andy.
**************************************
My primitive attempts at designing a private web site can be laughed at here:
 
Code:
<p>bla <span class="bold">bla</span> bla bla <span class="italic">bla</span> bla</p>

<p>bla <strong>bla</strong> bla bla <em>bla</em> bla</p>

However, the point of CSS is to apply presentation to structural markup. the span tag has no structural meaning - so the question is, what structural meaning do these words have that makes you wish to present them differently?

If you wish to emphasise things, the structural equivalents to <b> and <i> are <strong> </strong> and <em> </em>.
Most visual browsers render these as bold and italic, but they also retain the structural meaning.

Note: I changed your initial <P> to lowercase <p>. This is because for xhtml compatibility (and future-proofing your work!), all xhtml tags should be in lowercase. Furthermore, tags have to work as a matched pair, and as XML tags are case-sensitive, <P> </p> is not a matched pair.
Not essential at the moment, but it'll probably pay to get into the habit now.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Thanks for that, Manarth, and for the correction concerning the upper-case <P>. I tend to write my markup in lower-case for just the reason you suggested, but that one crept in there somehow....

The reason I'm looking for alternatives to the <b> and <i> tags is that I'm trying to avoid depreciated tags and elements in my markup, although to be honest, I'm not sure which ones are, as my patience ran out at WC3's site, and I couldn't find a list anywhere.
I'll look harder next time, but for now the <em> and <strong> tags look like promising alternatives.
Thanks for the information.

Regards, Andy.
**************************************
My primitive attempts at designing a private web site can be laughed at here:
 
hotfusion,

this is a pretty good site that notes a lot of 'deprecated' tags; this site also has a built in testing environment where you can toy around with DHTML experiments;

you will want to use that site in conjunction with

But be aware that this is Microsoft so a lot of there DHTML is Internet Explorer only
 
Thanks for the sites, dsdsdsdsd, most useful. I even tried to download the entire Internet, must send that one to a couple of friends!
Thanks both of you for your help.

Regards, Andy.
**************************************
My primitive attempts at designing a private web site can be laughed at here:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top