Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Stu Cowley
Stu Cowley
26,287 Points

How Do I? CSS Title Assistance

Hey guys,

So I'm currently developing a site for a client and they want me to do something that I have never done before, and I just want to know if there is an easier and tidier way to do it.

Basically what the design entails is a title that combines a regular font-face and a bold font-face, like this "Page Title"

Here is what I'm currently doing, but I feel that it is making my stylesheet messy, which is a massive pet peeve for me.

```.aboutHeading { font-size: 2em; font-weight: 200; letter-spacing: 3px; }

.aboutHeading span { font-weight: 900; }```

<div class="heading"> Page <span>Title</span> </div>

I know that there is no doubt a way of doing this with heading tags.

I look forward to hearing from someone real soon!

Thanking you in advance

Stu :D

4 Answers

Maximiliane Quel
PLUS
Maximiliane Quel
Courses Plus Student 55,489 Points
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

just to understand your question: you are going to have a heading at the top of the page that is different from your other headings and also consists of two parts one which is your general font and the other part the same font yet bold? you are happy with the styles you applied but you wonder whether there is a more semantic way to apply it?

if your only concern is to make the "title" part of page title bold and everything else stays the same then:

<h1>Page <strong>Title</strong></h1>

is your friend

if you want to control the font-weight of the "title" part more precisely then 

<h1>Page <span>Title</span></h1>

h1 {
    font-size: 2em; 
    font-weight: 200; 
    letter-spacing: 3px;
}

h1 span {
    font-weight: 900;
}

is probably the way to go

if you have other h1's that are markedly different from this heading then by all means apply the class directly to the h1 tag. if it is that unique then you should probably use an id instead of a class:

<h1 id="aboutHeading">Page <span>Title</span></h1>

h1#aboutHeading span {
    color: red;
}

if your entire heading is very intricate in kerning, font-weights, fonts, positioning and whatever other property then using an image instead of css might be an option too?

btw. the class you applied to your div in your example does not correspond with the class you defined for the div ;0)

James Barnett
James Barnett
39,199 Points

> if your entire heading is very intricate in kerning, font-weights, fonts, positioning and whatever other property then using an image instead of css

That's what lettering.js is for.

Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

one of these days I will give that a try.

in fact, to quote Michael JL Catlin: I am going to learn JavaScript, even if it kills me. :0))

you are of course right!

James Eden
James Eden
1,539 Points
James Eden
James Eden
1,539 Points

I think you could get rid on the span class and use and inline style...

<div class="heading"> Page <span style="font-weight:900;">Title</span> </div>

I'm a beginner here!!! But I think this should work. Inline styles override internal or external stylesheets as far as I understand.

Best, James.

Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

Hi James,

there is no need for an inline style here. If anything you want to avoid inline styles wherever you can. What you want to do is to target the element as specifically as need be and apply the styles which are distinct for that element. You can use the span tag as a hook inside a text element to apply styles that are different from the surrounding text. You don't need to use an inline style though but can target the span in your css.

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Maximiliane Quel this worked perfectly, just what I was looking for!

Many thanks

Stu :D

Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

which one :0D? in any case, my pleasure.

James Eden
James Eden
1,539 Points
James Eden
James Eden
1,539 Points

My post didn't work out!... Replace the opening span tag with:

span style="font-weight:900;"

And scrap the class..