Change One Word's Weight in a H1 CSS

Question

I've been trying to find out how to do the following for quite some time now. Obviously, I can solve this problem by having different h1s and position them, but I want to know if I can solve this problem without dividing these two into different h1s.

So here we go.

HTML:

<h1 id = "introText1">Hi, my name is Liam Shalon.</h1>

CSS:

#introText1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -110px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
}

I need:

• "Hi, my name is" to be with weight 300
• "Liam Shalon" to be with weight 400

How can I do that WITHOUT having to split it up into two h1s? Is there a way?

Thanks Liam

Answer 1

HTML

<h1 id="introText1">Hi, my name is <span>Liam Shalon.</span></h1>

CSS

#introText1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -110px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
}

span {
    font-weight: 900;
}

JSFiddle: http://jsfiddle.net/9kCeT/2/

Please note that I intentionally increased the font-weight to emphasize the <span> tag. A font-weight difference of 100 wasn't very noticeable on the fiddle.

Answer 2

You can use span tags within the H1. Use it the same way you're using CSS with the id, but do something like:

<h1 id = "introText1"><span id="textOne">Hi, my name is</span><span id="textTwo">Liam Shalon.</span></h1>

Answer 3

You can wrap one of the portions in a <span>, with a class to override the weight. Like:

HTML:

<h1 id = "introText1">Hi, my name is <span class="heavy">Liam Shalon.</span></h1>

CSS:

.heavy {
 font-weight: 400;
}

And leave the h1 with a normal weight of 300.