removing bold styling from part of a header

Question

Is there a way to remove bold styling from part of a header?

<h1>**This text should be bold**, but this text should not</h1> 

Is there a way to accomplish this?

Answer 1

You could wrap the not-bold text into a span and give the span the following properties:

.notbold{     font-weight:normal }​ 

and

<h1>**This text should be bold**, <span class='notbold'>but this text should not</span></h1> 

See: http://jsfiddle.net/MRcpa/1/

Use <span> when you want to change the style of elements without placing them in a new block-level element in the document.

Answer 2

If you don't want a separate CSS file, you can use inline CSS:

<h1>This text should be bold, <span style="font-weight:normal">but this text should not</span></h1> 

However, as Madara's comment suggests, you might want to consider putting the unbolded part in a different header, depending on the use case involved.