How to isolate text in a <p> tag to bold without changing the format of remaining paragraph

Question

I have three sections of text in there own <p></p> and I need to bold just a couple of words in each paragraph. So my question is how would I properly bold "CLX Exchange Accommodators, Inc." using CSS without having the text that follows appear below the bold text. The reason I'm asking this is because whenever I try to isolate the text I want to bold in another div or p tag the remaining text appears below the bolded text.

Here is my html

<div id="content">
   <p class="copy"> CLX Exchange Accommodators, Inc. have been proudly serving real estate investors nationwide since 1991.</p>

</div>
<!--End of content-->

Here is my current project on codepen if it helps http://codepen.io/Austin-Davis/pen/IpDLu.

Answer 1

To bold some text in a paragraph you could use the <b>, <strong> tag or a <span> with styling set. These options would look like this:

I want to <b>bold</b> a word.

This word is <strong>bolded</strong>.

The following word is <span style="font-weight: bold;">bolded</span>.

Note that your choice of tag has semantic implications. With the development of HTML5 there is a movement to make the tags that you're using carry meaning beyond just having them there for display purposes. You can read a bit about a few of the relevant meanings here.

Though I used inline styling in my code snippet above to style that span, I would probably use a stylesheet to set the style on an actual webpage. It's good practice to separate your HTML markup and the styling.

Oh, and one last thing: the reason that placing your text in a p or div tag moves it to the next line is because those elements are, by default, set to display: block;. If you want to use one of those tags (which you shouldn't for semantic reasons), you could set them to display: inline; or display: inline-block;. Read all about the display property here.

Answer 2

This can be achieved with a STRONG tag but I prefer to keep it flexible by using a SPAN. You can set the style for the SPAN (or for that matter the STRONG) in CSS.

<style>
#content p.copy span {font-weight: bold;}
</style>
<div id="content">
<p class="copy"> <span>CLX Exchange Accommodators, Inc.</span> have been proudly serving real estate investors nationwide since 1991.</p>

</div>
<!--End of content-->