39

I am a beginner in web programming and have some very simple questions.

I'm trying to bold several words in one paragraph but I don't know how to do that using HTML/CSS. I've figured out how to bold entire paragraphs, but not individual words yet. How can I bold one word, like "bold" in my example?

This bolds an entire paragraph:

<html>
<head>
<style type="text/css">
p.n1
{
    font:15px bold 30px Georgia,serif;
}

</style>
</head>

<body>
<p class="n1">I am in bold. </p>
</body>
</html>
Laurel
  • 5,965
  • 14
  • 31
  • 57
user1111042
  • 1,461
  • 4
  • 18
  • 23

7 Answers7

53
<p><strong>This is in bold.</strong> This is not.</p>

You might find Mozilla Developer Network to be a very handy and reliable reference.

Mike Hofer
  • 16,477
  • 11
  • 74
  • 110
  • Beat me to it, nice, here's the URL for HTML 4.01 specification: http://www.w3.org/TR/html4/struct/text.html#h-9.2.1 and from the HTML 5.0 draft specification: http://dev.w3.org/html5/spec/Overview.html#the-strong-element – sarnold Jan 30 '12 at 01:35
  • 2
    `strong` doesn't necessarily imply boldness, but that the text within is of higher relative importance. `b` is the correct tag to use if you simply wish to change the presentational style, or alternatively use a `span` element with an appropriately styled class. The same is true of `em` for emphasis and `i`. – djlumley Jan 30 '12 at 01:37
  • 1
    While b and strong are separate elements, strictly stylistic information (such as b) belongs in the stylesheet. However, I concede your point. What I probably should have pointed him to was the use of a nested span, with an id, and the use of a style to bold it. But that's a bit on the purist side, and I took the most direct route to solving the problem. – Mike Hofer Jan 30 '12 at 01:46
16

I know this question is old but I ran across it and I know other people might have the same problem. All these answers are okay but do not give proper detail or actual TRUE advice.

When wanting to style a specific section of a paragraph use the span tag.

<p><span style="font-weight:900">Andy Warhol</span> (August 6, 1928 - February 22, 1987) 

was an American artist who was a leading figure in the visual art movement known as pop 

art.</p>

Andy Warhol (August 6, 1928 - February 22, 1987) was an American artist who was a leading figure in the visual art movement known as pop art.

As the code shows, the span tag styles on the specified words: "Andy Warhol". You can further style a word using any CSS font styling codes.

{font-weight; font-size; text-decoration; font-family; margin; color}, etc.

Any of these and more can be used to style a word, group of words, or even specified paragraphs without having to add a class to the CSS Style Sheet Doc. I hope this helps someone!

Michael Anderson - NinjaSush2
  • 161
  • 1
  • 2
8
<p><b> BOLD TEXT </b> not in bold </p>;

Include the text you want to be in bold between <b>...</b>

Bruce
  • 1,647
  • 4
  • 20
  • 22
user1177371
  • 81
  • 2
5

if you want to just "bold", Mike Hofer's answer is mostly correct.

but notice that the tag bolds its contents by default, but you can change this behavior using css, example:

p strong {
    font-weight: normal;
    font-style: italic;
}

Now your "bold" is italic :)

So, try to use tags by its meaning, not by its default style.

Community
  • 1
  • 1
Rodrigo
  • 674
  • 8
  • 19
  • 2
    quick note: the way answers are sorted could change over time (or depending on how a particular user sorts them), so instead of "above answer", you should mention the answerer's name and/or include a link to the answer itself. – Cheran Shunmugavel Jan 30 '12 at 06:45
3
<style type="text/css">
p.boldpara {font-weight:bold;}
</style>
</head>

<body>
<p class="boldpara">Stack overflow is good site for developers. I really like this site </p>

</body>

</html>

http://www.tutorialspoint.com

swati16
  • 351
  • 1
  • 3
  • 16
1

Add <b> tag 

<p> <b> I am in Bold </b></p>

For more text formatting tags click here

Bruce
  • 1,647
  • 4
  • 20
  • 22
mee
  • 21
  • 1
1

Although your answer has many solutions I think this is a great way to save lines of code. Try using spans which is great for situations like yours.

  1. Create a class for making any item bold. So for paragraph text it would be 
span.bold(This name can be anything do not include parenthesis) {
   font-weight: bold;
}
  1. In your html you can access that class like by using the span tags and adding a class of bold or whatever name you have chosen
coletrain
  • 2,809
  • 35
  • 43