Grow your CSS skills. Land your dream job.

h1 and h2 tags on same line

  • # October 30, 2008 at 8:39 pm

    How can you write a line of text with the first 2 words bold and the rest of the words in the line normal.

    I tried wrapping the first 2 words in a h1 tag and the rest in h2, but the h2 part gets pushed down to another line when previewed.
    e.g.
    <h1>First words</h1><h2>the rest of the sentence</h2>

    Thanks, Steve

    jim
    # October 30, 2008 at 8:42 pm

    <body>
    <strong>hey</strong> hey
    </body>

    Maybe?

    # October 30, 2008 at 9:07 pm

    The h2 elements get pushed down because h1, h2, etc are block elements instead of inline elements.

    You may want to put all of your text in the h1 element, and then the part you want to be bigger in a span element.

    ie:

    Code:

    This is biggerthan this text

    Then in your css you could assign a class to that text, or just style all the span elements

    Code:
    span {font-size:25px;}

    EDIT:

    Yeah, just re-read your post. If you want to bold your stuff, it would probably look like this:

    Code:

    Bold text is fun

    # October 30, 2008 at 10:45 pm

    Yep Brian is right, I just would recommend strong tags instead of the deprecated b tags:

    Code:

    first words rest of sentence

    # October 31, 2008 at 2:49 am

    couldn’t you use the disply:inline property to fix this?

    <div id="heading">
    <h1>first words</h1> <h2>Second words</h2>
    </div>

    then in the stylesheet do

    #heading h1, h2 { display: inline; }

    # November 2, 2008 at 6:01 pm

    The strong tags didn’t work. No idea why. This is what ended up working OK:

    <h1 style="display:inline;">Bold text goes here</h1> <h2 style="display:inline;">normal text goes here</h2>

    Steve

    box
    # November 3, 2008 at 7:53 am

    Only use H tags if the text you are displaying is supposed to be classed as a header. If it is a header, then

    Code:

    bold text this is non-bold

    Of course you wouldn’t use inline styling – but for purposes of illustration I have done so here.

    If it isn’t actually a header, then simply use <strong> tags as mentioned previously.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".