Using CSS to underline/bold/italicize one word within a paragraph

[eluser]kthxbai2u[/eluser]
I feel noob for asking this, but I dont know CSS too well... Well, I know it, just not what is valid...

This is what I am doing right now:

Code:

<p>      
<font style='font-style:italic;'>Sign up for an account today!</font> Start
by completing the registration code and verifying your email!
</p>

but when I XHTML validate, it says:

Element "font" undefined. Did you mean "font" or "basefont"?

What is the proper way to italicize/style only one word or one sentance in that paragraph? When I use DIV instead of FONT, it puts a page break before and after the styled text >.<

It figures... I get Ajax working, but I cant simply style a font... The Ajax I tried years back and failed... Heh...

[eluser]Thorpe Obazee[/eluser]
Try using &lt;span&gt;

[eluser]kthxbai2u[/eluser]
I swear I tried that but it didnt work >.< I must have been high and not uploading the file before I viewed it ^.^

Thanks, now I am down to 1 error!

[eluser]naren_nag[/eluser]

Code:

<p><em>String Part One </em> Rest of string</p>

No styling needed.

You NEVER want to use inline CSS. Well, not never, but you should try and avoid it as much as possible.

cheers,

[eluser]kthxbai2u[/eluser]
so what are you supposed to do to style inline text without breaking the paragraph? I just want to underline, italicize and bold font, a specific group of words within a paragraph the proper XHTML/CSS compliant way. I can't do that by putting it into the css file... Unless < div>'s work within a < p> tag. Maybe I will try that later when I get back from work

I don't really do a lot of CSS. Well I do I'm just starting to pick up a bit.

[eluser]naren_nag[/eluser]
basic html tags:

Code:

<p>
<em> word </em> to italicize
<u> word </u> to underline
<strong> word </strong> to make it bold
</p>

you don't need CSS to do this in the first place. And the paragraph doesn't "break" when you nest other HTML tags.

So in your case

Code:

<p>      
<em>Sign up for an account today!</em> Start by completing the registration code and verifying your email!
</p>

[eluser]umefarooq[/eluser]
i think you have to go through from this for basic html

http://www.w3schools.com/html/default.asp

[eluser]kthxbai2u[/eluser]
I know HTML. I was asking about CSS. I want it to be CSS/XHTML compliant, and using the HTML tags to style the text is not CSS compliant.

Thanks for the insult though

[eluser]slowgary[/eluser]
kthxbai2u,

As long as your XHTML and your CSS both validate then your page is compliant with both standards. CSS validators don't know or care which tags you've used, and the <em>, <u>, <strong>, <b>, <i> tags I believe are all valid XHTML.

While you can use the <span> tag with inline styles to achieve the visual effect you're looking for, using the actual tags is more semantic and considered to be the better approach. One of the main goals of CSS is to make your markup less cluttered and more accessible to users with disabilities, and using the above mentioned tags makes your content more accessible. There's a higher chance that a screen reader for blind users will be able to understand and emphasize text within the <em> tag than if it's wrapped in a generic <span> tag with inline styles.

Also, take insulting replies with a grain of salt. Everyone learns by asking questions.