css ... Argh Why?

[The_KiD]

Ok on a site I am trying to do this

Fire
Alarms
Emergency
Lighting

by making custom header tags <h4> and <h5>. H4 for the F, A, E, L and h5 for the ire, larms, mergency and ighting.

Except if I do <h4>F</h4><h5>ire</h5> it comes out as

F
ire

on seperate lines.

Regardless of what I put in the css under h4 and h5 they always come on seperate lines.

Why is this?

 

[The_KiD]

But tbh that's not what hX tags should be used for this would be better:

<h4><span class="firstLetter">F</span>ire</h4>

h4 {
    /* whatever fonts etc here for the h4 tag */
    color: #000000;
}
h4 .firstLetter {
    font-size: 30px; /*or whatever size & styling you want*/
    color: #FF0000;
}

So it still appears properly to people with CSS turned off for one reason or another, and you're still making proper use of header tags this way (kind of )

Sweet thanks dude!