[css] how to remove the bold from a headline?

I have a headline:

<h1>THIS IS A HEADLINE</h1>

How do i make the phrase "THIS IS..." not to be bold and the rest without a change? couldn't find any relevent tag in text-decoration.

This question is related to css xhtml

The answer is


The heading looks bold because of its large size, if you have applied bold or want to change behaviour, you can do:

h1 { font-weight:normal; }

More: http://www.w3.org/TR/css3-fonts/#font-weight-prop


for "THIS IS" not to be bold - add <span></span> around the text

<h1>><span>THIS IS</span> A HEADLINE</h1>

and in style

h1 span{font-weight:normal}

you can simply do like that in the html part:

<span>Heading Text</span>

and in the css you can make it as an h1 block using display:

span{
display:block;
font-size:20px;
}

you will get it as a h1 without bold ,
if you want it bold just add this to the css:

font-weight:bold;

<h1><span>This is</span> a Headline</h1>

h1 { font-weight: normal; text-transform: uppercase; }
h1 span { font-weight: bold; }

I'm not sure if it was just for the sake of showing us, but as a side note, you should always set uppercase text with CSS :)


<h1><span style="font-weight:bold;">THIS IS</span> A HEADLINE</h1>

But be sure that h1 is marked with

font-weight:normal;

You can also set the style with a id or class attribute.


You can use font-weight:100 or lighter: this is working with i.e. Opera 16 and older, but I do not know why the h1 tags in Firefox are bolder, sorry.


You want font-weight, not text-decoration (along with suitable additional markup, such as <em> or <span>, so you can apply different styling to different parts of the heading)


style is accordingly vis css. An example

<h1 class="mynotsoboldtitle">Im not bold</h1>
<style>
.mynotsoboldtitle { font-weight:normal; }
</style>

Try font-weight:normal;

h1 {
    font-weight: normal;
}